/* ============================================================
   TuneGrab — type & signature effects
   Cyberpunk / pseudo-Japanese styling
   Fonts (free, Google Fonts):
     Chakra Petch  — Latin display & UI (squared, technical)
     DotGothic16   — Japanese, LED / dot-matrix feel
     Noto Sans JP  — Japanese body fallback
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=DotGothic16&family=Noto+Sans+JP:wght@400;700&display=swap');

:root{
  --tg-void:#07090B; --tg-panel:#0D1316; --tg-panel-2:#121B1F; --tg-edge:#1E2B30;
  --tg-text:#E6EFF0; --tg-muted:#8FA3A8; --tg-dim:#5E7176;
  --tg-red:#FF3B2F; --tg-red-deep:#8C1D17; --tg-teal:#3FD0C9; --tg-cyan:#8FE9EC;

  --tg-font-display:'Chakra Petch', 'Noto Sans JP', system-ui, sans-serif;
  --tg-font-ui:'Chakra Petch', 'Noto Sans JP', system-ui, sans-serif;
  --tg-font-jp:'DotGothic16', 'Noto Sans JP', monospace;

  --tg-track-wide:.34em;   /* headings in caps */
  --tg-track-sub:.30em;    /* red sublines, labels */
  --tg-glow-red:0 0 10px rgba(255,59,47,.55);
  --tg-fringe:-2px 0 rgba(255,59,47,.35), 2px 0 rgba(143,233,236,.28); /* chromatic split */
}

body{ background:var(--tg-void); color:var(--tg-text); font-family:var(--tg-font-ui); }

/* ---------- LOGO:  TUNE GRAB　音を掴め ---------- */
.tg-logo{ display:inline-flex; align-items:center; gap:.7em; line-height:1; }
.tg-logo__en{ font-family:var(--tg-font-display); font-weight:700; letter-spacing:.32em;
  color:var(--tg-red); text-shadow:var(--tg-glow-red); text-transform:uppercase; }
.tg-logo__rule{ width:1px; height:1.2em; background:rgba(255,59,47,.45); }
.tg-logo__jp{ font-family:var(--tg-font-jp); letter-spacing:.18em; color:var(--tg-red);
  opacity:.9; text-shadow:var(--tg-glow-red); }

/* ---------- HEADINGS ---------- */
.tg-display{ font-family:var(--tg-font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; line-height:1.05; font-size:clamp(34px,4.6vw,64px);
  color:var(--tg-text); text-shadow:var(--tg-fringe); }
.tg-h2{ font-family:var(--tg-font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tg-track-wide); font-size:26px; color:var(--tg-text); }

/* red subline under a heading: "THE SIGNAL BENEATH THE NOISE" */
.tg-sub{ font-family:var(--tg-font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--tg-track-sub); font-size:13px; color:var(--tg-red); text-shadow:var(--tg-glow-red); }

/* small index number "01" */
.tg-index{ font-family:var(--tg-font-display); font-size:11px; letter-spacing:.3em; color:var(--tg-dim); }

/* three red tick marks  | | |  */
.tg-ticks{ display:flex; gap:9px; height:16px; }
.tg-ticks::before,.tg-ticks::after,.tg-ticks span{ content:""; width:2px; height:100%; background:var(--tg-red); }
.tg-ticks span{ opacity:.7; }
/* usage: <div class="tg-ticks"><span></span></div> */

/* labels, nav, buttons */
.tg-label{ font-family:var(--tg-font-ui); font-weight:600; text-transform:uppercase; letter-spacing:.26em; font-size:12px; }
.tg-body{ font-family:var(--tg-font-ui); font-weight:400; font-size:15px; line-height:1.55; color:var(--tg-muted); letter-spacing:.01em; }

/* ---------- JAPANESE ACCENTS ---------- */
/* horizontal red glyph line, e.g. 変化 音 波 */
.tg-glyphs{ font-family:var(--tg-font-jp); color:var(--tg-red); letter-spacing:.5em; text-shadow:var(--tg-glow-red); }
/* vertical column of glyphs, as in the title cards */
.tg-glyphs--vertical{ writing-mode:vertical-rl; letter-spacing:.35em; }

/* ---------- DECODE EFFECT ----------
   Letters flicker through glyphs, then settle into the real word.
   Add class .tg-decode and data-text="DISCOVER"; the small script below runs it. */
.tg-decode{ font-family:var(--tg-font-display); text-transform:uppercase; letter-spacing:var(--tg-track-wide); }
.tg-decode .tg-scramble{ font-family:var(--tg-font-jp); color:var(--tg-red); text-shadow:var(--tg-glow-red); }

/* chromatic flicker on hover for big titles */
@keyframes tg-flicker{ 0%,100%{text-shadow:var(--tg-fringe)} 48%{text-shadow:-4px 0 rgba(255,59,47,.6),4px 0 rgba(143,233,236,.5)} 52%{text-shadow:var(--tg-fringe)} }
.tg-display:hover{ animation:tg-flicker .6s steps(2) 1; }

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){ .tg-display:hover{animation:none} }

/* ---------- BUTTONS (from the UI kit) ---------- */
.tg-btn{ display:inline-flex; align-items:center; gap:14px; padding:14px 26px; border-radius:999px;
  font-family:var(--tg-font-ui); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:13px; cursor:pointer; }
.tg-btn--primary{ background:var(--tg-red); color:var(--tg-void); box-shadow:0 0 22px rgba(255,59,47,.55); border:0; }
.tg-btn--secondary{ background:transparent; color:var(--tg-teal); border:1px solid rgba(63,208,201,.6); }

/*
  DECODE SCRIPT (paste once, before </body>):
  <script>
  document.querySelectorAll('.tg-decode').forEach(el=>{
    const t=el.dataset.text, g='化さ炭素変たれ音波掴め', n=t.length; let f=0;
    const id=setInterval(()=>{ el.innerHTML=[...t].map((c,i)=> i<f/2||c===' '?c:
      '<span class="tg-scramble">'+g[Math.random()*g.length|0]+'</span>').join(''); if(++f>n*2+4){el.textContent=t;clearInterval(id)} },45);
  });
  </script>
*/