/* ─── THALLYX · motion.css · redesign20260726 ───────────────────────────
   Scroll-journey layer: Lenis compat, injected HUD instruments (progress
   rail, chapter readout, ghost numerals), kinetic-type scaffolding, chain
   spine, 3D card entrances, magnetic CTAs.
   RULE: nothing in this file hides content by default — all animation
   initial states are applied by JS, so no-JS / reduced-motion users always
   see the full page. ─────────────────────────────────────────────────── */

/* ── Lenis compat ── */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html.js{scroll-behavior:auto}   /* Lenis owns the easing; CSS smooth fights it */
html,body{overflow-x:clip}
/* contain every scene's transforms: off-screen kinetic states must never
   widen the document (slide-ins read as edge reveals) */
.s{overflow:hidden}

/* ── kinetic type scaffolding (spans injected at runtime) ── */
.kx{display:inline-block;white-space:pre;will-change:transform,opacity}
/* word group emitted by M.split('ch') — keeps a char-split word unbreakable */
.kx-w{white-space:nowrap}
.kx-clip{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.kx-in{display:inline-block;white-space:pre;will-change:transform}
.wordmark .kx{will-change:transform,opacity,filter}

/* hero copy is scrub-driven during the pin */
.s-hero .chip,.s-hero .tagline,.s-hero .byline,.s-hero .scroll-hint{will-change:transform,opacity}

/* glitch burst (toggled at scene beats) */
.glitching{animation:thx-glitch .34s steps(2) 2}
@keyframes thx-glitch{
  0%{transform:translate(0);filter:none}
  25%{transform:translate(-3px,1px) skewX(-4deg);filter:drop-shadow(2px 0 0 rgba(33,230,255,.8)) drop-shadow(-2px 0 0 rgba(255,63,216,.55))}
  50%{transform:translate(2px,-1px) skewX(3deg)}
  75%{transform:translate(-1px,1px);filter:drop-shadow(-2px 0 0 rgba(33,230,255,.7))}
  100%{transform:translate(0);filter:none}
}

/* ── progress rail (left edge) ── */
.prog{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:11;pointer-events:none;background:rgba(57,255,106,.07)}
.prog-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(to bottom,var(--green),var(--toxic));
  box-shadow:0 0 12px rgba(57,255,106,.55);will-change:transform}
.prog-tick{position:absolute;left:0;width:9px;height:1px;background:rgba(57,255,106,.38)}

/* ── chapter readout (bottom-left, above ticker) ── */
.chap{position:fixed;left:16px;bottom:calc(46px + env(safe-area-inset-bottom));z-index:11;pointer-events:none;
  display:flex;align-items:baseline;gap:10px;font-family:var(--font-m);
  font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;transition:opacity .5s}
.chap b{font-weight:400;font-size:20px;letter-spacing:.08em;color:var(--toxic);text-shadow:0 0 14px rgba(57,255,106,.5)}
.chap.flick{animation:thx-flick .5s steps(3)}
@keyframes thx-flick{0%{opacity:.1}40%{opacity:1}60%{opacity:.3}100%{opacity:1}}
body.at-end .chap{opacity:0}

/* ── ghost chapter numerals (parallax watermarks) ── */
.chnum{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-d);font-size:clamp(170px,26vw,400px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(57,255,106,.12);
  opacity:.6;will-change:transform}
.chnum-l{left:1.5vw;top:9vh}
.chnum-r{right:1.5vw;top:11vh}
.s-build .chnum{top:4vh}

/* ── chain spine (build section: the chain grows, blocks commit) ── */
.build-grid{position:relative;perspective:1200px}
.spine{position:absolute;top:-30px;bottom:-30px;left:50%;width:1px;z-index:0;pointer-events:none}
.spine-line{position:absolute;inset:0;transform:scaleY(0);transform-origin:top;will-change:transform;
  background:linear-gradient(to bottom,transparent,rgba(57,255,106,.55) 5%,rgba(57,255,106,.55) 95%,transparent)}
.spine-node{position:absolute;left:50%;width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(57,255,106,.4);background:rgba(3,9,12,.95);
  transition:background .45s,box-shadow .45s,border-color .45s}
.spine-node.lit{background:var(--toxic);border-color:var(--toxic);
  box-shadow:0 0 16px var(--toxic),0 0 44px rgba(57,255,106,.45)}

/* ── build cards: 3D entrance + gleam sweep ── */
.b-card{position:relative;z-index:1;transform-style:preserve-3d;will-change:transform,opacity}
.b-card .b-letter{will-change:transform}
.b-card::after{content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-135%) skewX(-12deg);
  background:linear-gradient(115deg,transparent 32%,rgba(184,255,224,.10) 46%,rgba(57,255,106,.20) 50%,transparent 64%)}
.b-card.gleam::after{animation:thx-gleam 1.05s cubic-bezier(.3,.7,.2,1) 1}
@keyframes thx-gleam{to{transform:translateX(135%) skewX(-12deg)}}
.b-pillars{perspective:900px}
.b-pillar{will-change:transform,opacity;transform-style:preserve-3d}

/* ── validators: tilt + stat ignition ── */
.val-stage{perspective:950px;will-change:transform}
.val-screen{will-change:transform}
.val-stat{transition:border-color .5s,box-shadow .5s}
.val-stat.ignite{border-color:rgba(57,255,106,.5);box-shadow:0 0 26px rgba(57,255,106,.14),inset 0 0 18px rgba(22,224,122,.05)}
.val-h .kx{will-change:transform,opacity}

/* ── CTA finale ── */
.coming{perspective:800px}
.coming .c-line{will-change:transform,opacity}
.c-hollow.filled{color:var(--toxic);-webkit-text-stroke:0;
  text-shadow:0 0 26px rgba(57,255,106,.5),0 0 90px rgba(22,224,122,.3);
  animation:thx-flick .5s steps(3)}

/* ── magnetic CTAs ── */
.btn{will-change:transform}

/* ── vision scene ── */
.vision .kx-clip{padding-bottom:.14em;margin-bottom:-.14em}
.v-meta span{will-change:transform,opacity}

/* ── mobile ── */
@media (max-width:820px){
  .prog{width:2px}
  .prog-tick{width:7px}
  .chap{left:10px;bottom:calc(42px + env(safe-area-inset-bottom));font-size:8.5px;gap:7px}
  .chap b{font-size:15px}
  .chnum{font-size:clamp(120px,38vw,220px);opacity:.42}
  .chnum-l{left:2vw}.chnum-r{right:2vw}
  .spine{left:7px}
}

/* ── reduced motion: strip the journey layer entirely ── */
@media (prefers-reduced-motion:reduce){
  .prog,.chap,.chnum,.spine{display:none}
  .b-card::after{display:none}
  .glitching,.chap.flick,.c-hollow.filled{animation:none}
}