/* MILLION — a cinematic field that resolves a million points into one.
   Design tokens are the locked brief's; layout + components are built to them.
   The cosmos is a fixed WebGL canvas; the narrative scrolls over it in the DOM. */

:root{
  color-scheme: dark;

  /* Void / ground */
  --void-0:#05060B; --void-1:#070912; --fog:#0A0E1A; --console:#0C1120;
  /* Cosmic cools */
  --cool-violet:#3A2F7A; --cool-indigo:#5B6BFF; --cool-teal:#46E3D0; --cool-white:#EAF0FF;
  /* Signal (warm, precious) */
  --signal-core:#FF6B4A; --signal-mid:#FF8A5C; --signal-warm:#FFB27A; --signal-flare:#FFFFFF;
  /* Type */
  --ink:#EAF0FF; --ink-dim:#8791AD; --ink-faint:#4C5570;
  /* Lines */
  --hairline:rgba(234,240,255,0.12); --hairline-soft:rgba(234,240,255,0.06); --hairline-warm:rgba(255,107,74,0.40);
  /* Effects */
  --grain-opacity:0.045; --vignette:rgba(5,6,11,0.55); --bloom-tint:#FFE7D6;

  --font-display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --fs-display-xl:clamp(3.25rem,12vw,11rem);
  --fs-display-l:clamp(2.25rem,6.5vw,5.5rem);
  --fs-heading:clamp(1.5rem,3vw,2.5rem);
  --fs-body-l:clamp(1.125rem,1.6vw,1.375rem);
  --fs-mono:clamp(0.9rem,1.4vw,1.25rem);
  --fs-label:0.75rem; --fs-tick:0.6875rem;
  --tracking-display:-0.02em; --tracking-tight:-0.01em; --tracking-label:0.18em;
  --leading-tight:1.02; --leading-body:1.5;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px;
  --gutter:clamp(20px,5vw,80px); --measure:36ch;

  --r-0:0px; --r-1:2px; --r-pill:999px;
  --glow-signal:0 0 40px rgba(255,107,74,0.35); --glow-cool:0 0 60px rgba(91,107,255,0.25);

  --ease-astro:cubic-bezier(0.22,1,0.36,1);
  --ease-damp:cubic-bezier(0.16,1,0.30,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:240ms; --dur-ui:400ms; --dur-reveal:800ms; --dur-morph:1200ms; --dur-cosmic:1600ms;

  --z-canvas:0; --z-content:10; --z-hud:20; --z-nav:30;
  --hud-bg:rgba(7,9,18,0.55); --hud-border:var(--hairline);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:1ms;--dur-ui:1ms;--dur-reveal:1ms;--dur-morph:1ms;--dur-cosmic:1ms}
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void-0); color:var(--ink);
  font-family:var(--font-body); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,107,74,.32);color:#fff}
:focus-visible{outline:2px solid var(--signal-core);outline-offset:3px;border-radius:var(--r-1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--void-0);padding:.6rem 1rem;font-family:var(--font-mono);font-size:var(--fs-label)}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

/* ---------- cosmos + overlays (fixed behind content) ---------- */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-canvas);display:block;background:var(--void-0)}
body.no-webgl .field{display:none}

.field-fallback{position:fixed;inset:0;z-index:var(--z-canvas);display:none}
body.no-webgl .field-fallback{display:block}
.fb-cosmos{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 68% 30%, rgba(91,107,255,.16), transparent 55%),
  radial-gradient(90% 80% at 30% 70%, rgba(58,47,122,.22), transparent 60%),
  radial-gradient(60% 60% at 50% 50%, rgba(70,227,208,.05), transparent 60%),
  var(--void-0);}
.fb-cosmos::after{content:"";position:absolute;inset:0;opacity:.5;background-image:
  radial-gradient(1px 1px at 20% 30%, rgba(234,240,255,.7), transparent),
  radial-gradient(1px 1px at 75% 60%, rgba(234,240,255,.5), transparent),
  radial-gradient(1px 1px at 45% 80%, rgba(234,240,255,.6), transparent),
  radial-gradient(1px 1px at 60% 20%, rgba(234,240,255,.4), transparent),
  radial-gradient(1px 1px at 88% 42%, rgba(234,240,255,.5), transparent),
  radial-gradient(1px 1px at 12% 66%, rgba(234,240,255,.4), transparent);
  background-repeat:no-repeat}
.fb-point{position:absolute;left:50%;top:44%;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%) scale(1);background:var(--signal-core);
  box-shadow:0 0 30px 8px rgba(255,107,74,.6),0 0 90px 30px rgba(255,107,74,.25);
  transition:transform var(--dur-cosmic) var(--ease-astro)}
body.no-webgl.collapsed .fb-point{transform:translate(-50%,-50%) scale(3.4)}

.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%, transparent 52%, var(--vignette) 100%)}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:var(--grain-opacity);
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grain-shift 6s steps(4) infinite}
}
@keyframes grain-shift{0%{transform:translate(0,0)}25%{transform:translate(-4%,2%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:var(--z-hud);
  display:flex;align-items:center;gap:var(--sp-6);
  padding:var(--sp-4) var(--gutter);
  font-family:var(--font-mono)}
.wordmark{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--font-mono);
  font-size:var(--fs-label);letter-spacing:var(--tracking-label);color:var(--ink);font-weight:500}
.wm-dot{width:9px;height:9px;border-radius:50%;background:var(--signal-core);box-shadow:var(--glow-signal)}
.wm-dot.sm{width:7px;height:7px;display:inline-block;vertical-align:middle;margin-right:.5em}
.hud-readout{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.ro-label{font-size:var(--fs-tick);letter-spacing:var(--tracking-label);color:var(--ink-faint)}
.ro-count{font-size:var(--fs-mono);color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hud-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--hud-bg);
  border:1px solid var(--hud-border);border-radius:var(--r-pill);padding:.4rem .7rem;cursor:pointer;
  color:var(--ink-dim);font-family:var(--font-mono);font-size:var(--fs-tick);letter-spacing:var(--tracking-label);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color var(--dur-ui) var(--ease-damp),border-color var(--dur-ui) var(--ease-damp)}
.hud-toggle:hover{color:var(--ink);border-color:var(--hairline)}
.tg-led{width:8px;height:8px;border-radius:50%;background:var(--cool-teal);box-shadow:0 0 10px var(--cool-teal);transition:background var(--dur-ui),box-shadow var(--dur-ui)}
.hud-toggle[aria-pressed="true"] .tg-led{background:var(--ink-faint);box-shadow:none}

/* ---------- phase rail ---------- */
.rail{position:fixed;top:50%;right:var(--sp-6);transform:translateY(-50%);z-index:var(--z-nav)}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.rail a{display:flex;align-items:center;gap:var(--sp-3);justify-content:flex-end;color:var(--ink-faint);
  font-family:var(--font-mono);font-size:var(--fs-tick);letter-spacing:var(--tracking-label)}
.rail .rl-txt{opacity:0;transform:translateX(6px);transition:opacity var(--dur-ui) var(--ease-damp),transform var(--dur-ui) var(--ease-damp);white-space:nowrap}
.rail a:hover .rl-txt,.rail a:focus-visible .rl-txt{opacity:1;transform:none;color:var(--ink-dim)}
.rail .rl-tick{width:16px;height:1px;background:currentColor;transition:width var(--dur-ui) var(--ease-damp),background var(--dur-ui)}
.rail a[aria-current="true"]{color:var(--signal-core)}
.rail a[aria-current="true"] .rl-tick{width:28px;background:var(--signal-core)}
@media (max-width:860px){.rail{display:none}}

/* ---------- content / beats ---------- */
main{position:relative;z-index:var(--z-content)}
.beat{min-height:100svh;display:flex;align-items:center;padding:var(--sp-24) var(--gutter);position:relative}
.copy{max-width:var(--measure);width:100%}
.copy--right{margin-left:auto;text-align:left}
.copy--center{margin:0 auto;text-align:center;max-width:44ch}
@media (min-width:900px){
  .copy{margin-left:8vw}
  .copy--right{margin-left:auto;margin-right:8vw}
  .copy--center{margin:0 auto}
}

.microlabel{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--signal-core);margin-bottom:var(--sp-6);display:flex;align-items:center;gap:var(--sp-3)}
.microlabel::before{content:"";width:22px;height:1px;background:var(--signal-core);display:inline-block}
.copy--center .microlabel{justify-content:center}

.display-xl{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display-xl);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin-bottom:var(--sp-8)}
.display-l{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display-l);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin-bottom:var(--sp-6)}
.lead{font-size:var(--fs-body-l);color:var(--ink-dim);max-width:var(--measure);line-height:var(--leading-body)}
.copy--center .lead{margin:0 auto}

.scrollcue{margin-top:var(--sp-16);font-family:var(--font-mono);font-size:var(--fs-tick);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:var(--sp-3)}
.sc-line{width:1px;height:40px;background:linear-gradient(var(--ink-faint),transparent);display:inline-block}

/* reveal (JS-gated) */
.js .copy > *{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-astro),transform var(--dur-reveal) var(--ease-astro)}
.js .beat.in .copy > *{opacity:1;transform:none}
.js .beat.in .copy > *:nth-child(2){transition-delay:60ms}
.js .beat.in .copy > *:nth-child(3){transition-delay:120ms}
.js .beat.in .copy > *:nth-child(4){transition-delay:180ms}
.js .beat.in .copy > *:nth-child(5){transition-delay:240ms}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-label);letter-spacing:.04em;padding:.85rem 1.3rem;border-radius:var(--r-pill);
  border:1px solid var(--hairline);color:var(--ink);cursor:pointer;background:transparent;
  transition:border-color var(--dur-ui) var(--ease-damp),background var(--dur-ui) var(--ease-damp),color var(--dur-ui) var(--ease-damp),transform var(--dur-fast) var(--ease-damp)}
.btn:hover{border-color:var(--ink-dim)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal-core);border-color:var(--signal-core);color:#210a04;font-weight:500;box-shadow:var(--glow-signal)}
.btn-primary:hover{background:var(--signal-mid);border-color:var(--signal-mid)}
.btn-ghost{color:var(--ink)}
.btn-line{margin-top:var(--sp-8);border-color:var(--hairline-soft);color:var(--ink-dim)}
.btn-line:hover{color:var(--ink)}
.coord-readout{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-tick);color:var(--signal-warm);min-height:1.2em;letter-spacing:.04em}

/* terminal */
.term{margin-top:var(--sp-6);display:flex;align-items:center;gap:var(--sp-3);
  border:1px solid var(--hairline);border-radius:var(--r-1);background:var(--hud-bg);
  padding:.7rem var(--sp-4);max-width:var(--measure);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.term:focus-within{border-color:var(--hairline-warm)}
.term-prompt{font-family:var(--font-mono);color:var(--signal-core)}
.term-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);
  font-family:var(--font-mono);font-size:var(--fs-body)}
.term-input::placeholder{color:var(--ink-faint)}

/* cta + model card */
.cta-row{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center}
.modelcard{margin-top:var(--sp-16);display:grid;grid-template-columns:1fr 1fr;gap:1px;
  border:1px solid var(--hairline-soft);background:var(--hairline-soft);text-align:left;max-width:640px;margin-left:auto;margin-right:auto}
.modelcard > div{background:var(--void-1);padding:var(--sp-6)}
.modelcard dt{font-family:var(--font-mono);font-size:var(--fs-tick);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--sp-2)}
.modelcard dd{font-size:var(--fs-body);color:var(--ink)}
@media (max-width:560px){.modelcard{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:var(--z-content);border-top:1px solid var(--hairline-soft);
  background:linear-gradient(var(--void-0),var(--void-1));padding:var(--sp-16) var(--gutter);}
.site-footer p{max-width:78ch;color:var(--ink-faint);font-size:var(--fs-body);line-height:var(--leading-body)}
.site-footer b{color:var(--ink-dim)}

/* needle crosshair (pinned by JS at the located point) */
#needle-crosshair{position:fixed;left:-100px;top:-100px;z-index:var(--z-content);width:0;height:0;
  pointer-events:none;opacity:0;transition:opacity var(--dur-ui) var(--ease-damp)}
#needle-crosshair .ch-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--signal-core);box-shadow:0 0 18px rgba(255,107,74,.6);animation:ch-pulse 1.6s var(--ease-inout) infinite}
#needle-crosshair .ch-h{position:absolute;left:-30px;top:0;width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--signal-core),transparent)}
#needle-crosshair .ch-v{position:absolute;left:0;top:-30px;width:1px;height:60px;background:linear-gradient(180deg,transparent,var(--signal-core),transparent)}
@keyframes ch-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
@media (prefers-reduced-motion:reduce){#needle-crosshair .ch-ring{animation:none}}

@media (max-width:640px){
  .hud{gap:var(--sp-4);padding:var(--sp-3) var(--gutter)}
  .hud-readout{display:none}
}