/* ============================================================================
   useTalos EXTRAVAGANZA — the "amazing" scroll layer (homepage).
   Design law: the page lives in LIGHT; it dives into the DARK machine at
   controlled full-bleed moments, then resurfaces. Dark-bg tech clips ride
   mix-blend-mode:screen on light ground so only their glow shows.
   Pairs with assets/extravaganza.js · Author: Fable (Mariah) 2026-07-06.
   Everything here is decoration: no link/click target lives in these layers
   except the fleet CTA, which is a real <a>. Reduced-motion & mobile collapse
   every takeover to a static poster with the copy fully readable.
   ========================================================================== */

/* ---------- hero: gyroscope glow halo (dark clip -> luminous overlay) ---------- */
.hero video.tech-halo{mix-blend-mode:screen;opacity:.95;filter:saturate(1.2) brightness(1.05)}
@media(prefers-reduced-motion:reduce){.hero video.tech-halo{display:none}}

/* ---------- craft layer (2026-07-07 award pass) ---------- */
/* film grain — kills the flat-plastic tell; sits over everything, fully inert */
body::after{content:"";display:none;position:fixed;inset:0;z-index:75;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* branded scrollbar + selection */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#EAF4FF}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#45E3FF,#1E9BFF);border-radius:8px;border:2.5px solid #EAF4FF}
::selection{background:rgba(69,227,255,.35);color:#0A2540}
a:focus-visible,button:focus-visible{outline:3px solid #45E3FF;outline-offset:3px;border-radius:8px}
/* kinetic-type char spans (splitChars) — global so the hero H1 can use them */
.ch{display:inline-block;will-change:transform,opacity}
/* per-word wrapper: a line may only break BETWEEN .wd blocks, never inside one */
.wd{display:inline-block;white-space:nowrap}

/* ---------- presenter bg: AI plexus "network connects as you scroll" ---------- */
.present .scrub video.net-scrub{mix-blend-mode:screen;opacity:.55;filter:saturate(1.3)}

/* ---------- shared takeover primitives ---------- */
.tk{position:relative;overflow:clip}
.tk .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.tk .frame-poster,.tk canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tk .frame-poster{z-index:0}
.tk canvas{z-index:1;opacity:0;transition:opacity .5s}
/* idle life: pinned takeover frames breathe slowly even when scroll is parked */
.tk canvas.on{opacity:1;animation:tk-breathe 10s ease-in-out infinite alternate}
@keyframes tk-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.tk canvas.on{animation:none}}
.tk .frame-poster.off{opacity:0;transition:opacity .5s}
.tk .hudtag{position:absolute;top:86px;left:26px;z-index:4;font:700 .68rem/1 ui-monospace,"JetBrains Mono",Menlo,monospace;
  letter-spacing:.18em;color:#9fd8ff;opacity:.85;display:inline-flex;align-items:center;gap:8px}
.tk .hudtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral,#FF6A55);
  box-shadow:0 0 10px var(--coral,#FF6A55);animation:hudpulse 2.4s ease-in-out infinite}

/* ---------- DIVE: full-bleed dark HUD flythrough takeover ---------- */
.dive{background:#04101f;height:320vh}
.dive .pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(2,10,22,.55) 100%)}
.dive .cap{position:absolute;z-index:3;max-width:min(560px,84vw);padding:22px 26px;border-radius:12px;
  background:rgba(4,16,31,.55);border:1px solid rgba(69,227,255,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(69,227,255,.08),0 24px 60px rgba(0,0,0,.45)}
/* caps are visible by default (no-JS / frame-failure safe); the engine hides
   them only once the scrub is successfully armed, then drives the beats */
.tk.armed .cap,.tk.armed .line{opacity:0;visibility:hidden}
.dive .cap::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#45E3FF,#1E9BFF,transparent)}
.dive .cap .k{display:block;font:700 .66rem/1 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.18em;color:#45E3FF;margin-bottom:10px}
.dive .cap h3{font-family:var(--display,"Space Grotesk",sans-serif);color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.02em;line-height:1.08;margin:0 0 8px}
.dive .cap p{color:#b9d6f2;margin:0;font-size:1.02rem}
.dive .cap.c1{left:6%;top:20%}
.dive .cap.c2{right:6%;top:54%;text-align:right}
.dive .cap.c2::before{background:linear-gradient(270deg,#45E3FF,#1E9BFF,transparent)}
.dive .cap.c3{left:50%;transform:translateX(-50%);bottom:14%;text-align:center}
.dive .cap .ch{display:inline-block;will-change:transform,opacity}

/* ---------- LOGO MOMENT: liquid chrome, brand ground, plays once ---------- */
.logo-moment{position:relative;height:100vh;overflow:hidden;background:linear-gradient(180deg,#fff,var(--bg,#EAF4FF))}
.logo-moment video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo-moment .lm-mark{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:10px;
  opacity:0;transform:scale(.94);pointer-events:none}
.logo-moment .lm-mark img{width:min(18vw,120px);height:auto;filter:drop-shadow(0 14px 34px rgba(11,95,217,.35))}
.logo-moment .lm-mark b{font-family:var(--display,"Space Grotesk",sans-serif);font-size:clamp(2.2rem,6vw,4rem);
  letter-spacing:-.03em;color:var(--ink,#0A2540)}
.logo-moment .lm-mark small{font:700 .72rem/1 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sapphire,#0B5FD9);opacity:.8}
.logo-moment.done .lm-mark{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.logo-moment .lm-mark{opacity:1;transform:none}}

/* ---------- FLEET: wireframe globe (slow) + particle stream (fast, in front) ---------- */
.fleet{background:#03122b;height:200vh;position:relative;overflow:clip}
.fleet .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:block}
.fleet video{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.fleet video.back{opacity:.9}
.fleet video.front{mix-blend-mode:screen;opacity:.7}
.fleet .pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,18,43,.62),transparent 30%,transparent 70%,rgba(3,18,43,.66))}
.fleet .copy{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:min(680px,88vw)}
.fleet .copy .k{display:block;font:700 .68rem/1 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.2em;color:#45E3FF;margin-bottom:14px}
.fleet .copy h2{font-family:var(--display,"Space Grotesk",sans-serif);color:#fff;font-size:clamp(2rem,5.4vw,3.6rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.fleet .copy p{color:#b9d6f2;font-size:clamp(1rem,2vw,1.2rem);margin:0 0 24px}
.fleet .copy .cta{pointer-events:auto}
.fleet .copy .ch{display:inline-block;will-change:transform,opacity}

/* ---------- TRON WIPE: scan-wave transition into the finale ---------- */
.wipe{background:#04101f;height:220vh}
.wipe .line{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  font:700 clamp(.8rem,2vw,1.05rem)/1.7 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.24em;color:#9fd8ff}
.wipe .line b{display:block;color:#fff;font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:.08em}

/* ---------- how-vid poster polish ---------- */
.how-vid{background:#EAF4FF}

/* ============ graceful collapse: mobile ============ */
@media(max-width:860px){
  .dive,.wipe,.fleet{height:auto}
  .dive .pin,.wipe .pin,.fleet .pin{position:relative;height:auto;min-height:62vh;padding:56px 0}
  .tk canvas{display:none}
  .tk .frame-poster{position:absolute}
  .dive .cap{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;transform:none;
    opacity:1;visibility:visible;margin:14px auto;text-align:left}
  .dive .cap.c2,.dive .cap.c3{text-align:left}
  .wipe .line{position:relative;inset:auto;transform:none;opacity:1;visibility:visible;margin:0 auto;padding:40px 0}
  .fleet video.front{display:none}
  .fleet .copy{position:relative;inset:auto;transform:none;margin:0 auto;padding:20px}
  .logo-moment{height:70vh}
}
/* ============ graceful collapse: reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  .dive,.wipe,.fleet{height:auto}
  .dive .pin,.wipe .pin,.fleet .pin{position:relative;height:auto;min-height:54vh;padding:56px 0}
  .tk canvas{display:none}
  .dive .cap,.wipe .line{position:relative;inset:auto;transform:none;opacity:1;visibility:visible;margin:14px auto;text-align:center}
  .fleet video{display:none}
  .fleet .copy{position:relative;inset:auto;transform:none;margin:0 auto;padding:20px}
  .logo-moment video{display:none}
}