/* =========================================================================
   DeepBrain - CINEMATIC LAYER  (additive over style.css, lightweight)
   ---------------------------------------------------------------------------
   Progressive enhancement: film grain, scroll spine, label reveals,
   section sweeps, magnetic buttons, parallax, kinetic headline.
   No scroll hijacking, no second canvas, no pinned hero.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. FILM GRAIN
   --------------------------------------------------------------------------- */
.grain{position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.05;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;will-change:transform;
  animation:grain-jitter .7s steps(4) infinite}
@keyframes grain-jitter{
  0%{transform:translate(0,0)}25%{transform:translate(-50px,28px)}
  50%{transform:translate(34px,-40px)}75%{transform:translate(-24px,38px)}
  100%{transform:translate(0,0)}}

/* ---------------------------------------------------------------------------
   2. NEURAL SPINE - scroll-progress rail
   --------------------------------------------------------------------------- */
.spine{position:fixed;top:50%;right:26px;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;align-items:center;gap:0;
  pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.spine.is-ready{opacity:1}
.spine__track{position:relative;width:2px;height:46vh;max-height:440px;
  background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.spine[data-on-light="1"] .spine__track{background:rgba(10,10,11,.14)}
.spine__fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--pulse),var(--pulse-2));
  box-shadow:0 0 10px rgba(242,27,63,.6)}
.spine__nodes{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;align-items:center}
.spine__node{position:relative;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.22);pointer-events:auto;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s}
.spine[data-on-light="1"] .spine__node{background:rgba(10,10,11,.2)}
.spine__node::after{content:attr(data-label);position:absolute;right:18px;top:50%;
  transform:translateY(-50%) translateX(6px);white-space:nowrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-paper);opacity:0;transition:opacity .25s,transform .25s;
  pointer-events:none}
.spine[data-on-light="1"] .spine__node::after{color:var(--t-ink)}
.spine__node:hover{transform:scale(1.5)}
.spine__node:hover::after{opacity:.9;transform:translateY(-50%) translateX(0)}
.spine__node.is-active{background:var(--pulse);
  box-shadow:0 0 0 4px var(--pulse-soft),0 0 12px rgba(242,27,63,.7)}

/* ---------------------------------------------------------------------------
   3. KINETIC HEADLINE
   --------------------------------------------------------------------------- */
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line>span{display:block;transform:translateY(115%);
  animation:hero-line-rise 1s var(--ease-out) forwards}
.hero h1 .line:nth-child(1)>span{animation-delay:.18s}
.hero h1 .line:nth-child(2)>span{animation-delay:.29s}
.hero h1 .line:nth-child(3)>span{animation-delay:.40s}
@keyframes hero-line-rise{to{transform:none}}

/* ---------------------------------------------------------------------------
   4. LABEL REVEAL
   --------------------------------------------------------------------------- */
[data-scramble]{white-space:nowrap}
.lbl{display:inline-block}
.lbl-reveal .lbl-char{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.lbl-reveal.in .lbl-char{opacity:1;transform:none}

/* intensity readout */
.range-out{display:inline-flex;align-items:center;gap:.55em;white-space:nowrap}
.range-out b{font-family:var(--display);font-weight:800;font-size:1rem;
  color:var(--pulse);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.range-state{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-paper);
  padding:.22em .6em;border:1px solid var(--pulse-line);border-radius:var(--r-pill);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.range-loop{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-paper-dim)}

/* focal-dose readout on the brain cap */
.brain__cap-dose{display:block;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.1);font-size:.58rem;line-height:1.45;
  color:var(--t-paper-dim);letter-spacing:.08em}
.brain__cap-dose b{display:inline;color:var(--pulse);font-size:.72rem;
  letter-spacing:0;font-variant-numeric:tabular-nums;margin:0}

/* ---------------------------------------------------------------------------
   5. REVEALS, PARALLAX & SECTION SWEEPS
   --------------------------------------------------------------------------- */
.js .reveal--clip{opacity:0;clip-path:inset(0 0 100% 0);transform:none;
  transition:clip-path 1s var(--ease-out),opacity 1s var(--ease-out)}
.js .reveal--clip.in{opacity:1;clip-path:inset(0 0 0 0)}

.js .reveal-stagger > *{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .reveal-stagger.in > *{opacity:1;transform:none}
.js .reveal-stagger.in > *:nth-child(1){transition-delay:.04s}
.js .reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.js .reveal-stagger.in > *:nth-child(3){transition-delay:.20s}
.js .reveal-stagger.in > *:nth-child(4){transition-delay:.28s}
.js .reveal-stagger.in > *:nth-child(5){transition-delay:.36s}

.sweep{position:relative}
.sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pulse-line) 18%,
    var(--pulse) 50%,var(--pulse-line) 82%,transparent);
  transform:scaleX(0);transform-origin:left;opacity:0}
.sweep.in::before{animation:sweep-x 1.4s var(--ease-out) forwards}
@keyframes sweep-x{0%{transform:scaleX(0);opacity:0}
  12%{opacity:1}100%{transform:scaleX(1);opacity:.0}}

[data-parallax]{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

.stat .n{position:relative}
.stat.in .n .accent{text-shadow:0 0 26px rgba(242,27,63,.45)}

/* ---------------------------------------------------------------------------
   6. MAGNETIC + MISC
   --------------------------------------------------------------------------- */
.magnetic{will-change:transform}
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:none}
.btn--primary:hover::after{animation:sheen 1s var(--ease) forwards}
@keyframes sheen{to{left:130%}}

.road::before{display:none}
.road__line{position:absolute;left:0;right:0;top:46px;height:1px;
  background:var(--line-light);transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease-out)}
.is-dark .road__line{background:var(--line-dark)}
.road.in .road__line{transform:scaleX(1)}

.brand img{position:relative}

/* ---------------------------------------------------------------------------
   7. REDUCED MOTION & RESPONSIVE FALLBACKS
   --------------------------------------------------------------------------- */
@media (max-width:920px){
  .spine{display:none}
  .road__line{display:none}
}

@media (hover:none){
  .magnetic{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none;opacity:.04}
  .hero h1 .line>span{animation:none;transform:none}
  .spine__fill{transition:none}
  .sweep::before,.btn--primary::after{display:none}
  .reveal--clip,.reveal-stagger > *{opacity:1!important;clip-path:none!important;
    transform:none!important}
}