/* ============================================================
   NEUFORM — scroll pipeline
   Palette: near-black ground, one accent per stage, ink on top
   ============================================================ */

:root{
  --bg:        #06070a;
  --bg-2:      #0b0d12;
  --ink:       #eef1f7;
  --ink-2:     #a7aec0;
  --ink-3:     #5f6879;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.045);
  --accent:    #8b7cff;

  --font-d: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-s: "Instrument Serif", Georgia, "Times New Roman", serif;

  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-d);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:#06070a; }

/* accent-tinted ambient wash that follows the active stage */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(120% 80% at 50% 108%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  transition:opacity .6s var(--ease);
}

/* ── film grain ────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}  60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,2%)}   100%{transform:translate(0,0)}
}

/* ── fixed render stage ────────────────────────────────────── */
.stage{
  position:fixed; inset:0;
  z-index:1; pointer-events:none;
  transition:opacity .4s linear;
}
#scene{ width:100%; height:100%; display:block; }
.stage__vignette{
  position:absolute; inset:0;
  background:radial-gradient(72% 62% at 50% 48%, transparent 42%, rgba(3,4,7,.72) 100%);
}

/* HUD */
.hud{
  position:absolute;
  font-family:var(--font-m);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  opacity:0; transition:opacity .5s var(--ease);
}
.stage.is-live .hud{ opacity:1; }
.hud--tl{ top:calc(var(--pad) + 42px); left:var(--pad); display:flex; align-items:center; gap:8px; color:var(--ink-2); }
.hud--tr{ top:calc(var(--pad) + 42px); right:var(--pad); text-align:right; }
.hud--bl{ bottom:var(--pad); left:var(--pad); display:grid; gap:3px; }
.hud--br{ bottom:var(--pad); right:var(--pad); display:flex; align-items:center; gap:10px; }
.hud__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
  animation:pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
.hud__row{ display:flex; gap:10px; }
.hud__row em{ font-style:normal; width:44px; }
.hud__row b{ font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.hud__bar{
  width:120px; height:2px; background:var(--line);
  overflow:hidden; border-radius:2px;
}
.hud__bar i{
  display:block; height:100%; width:0%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}

/* ── topbar ────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--pad) * .55) var(--pad);
  font-family:var(--font-m);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  mix-blend-mode:difference;
}
.brand{
  display:flex; align-items:center; gap:9px;
  color:var(--ink); text-decoration:none;
  font-family:var(--font-d); font-weight:600;
  letter-spacing:.22em; font-size:12px;
}
.brand svg{ opacity:.85; }
.topbar__mid{ display:none; }
@media (min-width:900px){ .topbar__mid{ display:block; } }

/* ── progress rail ─────────────────────────────────────────── */
.rail{
  position:fixed; z-index:40;
  right:var(--pad); top:50%; transform:translateY(-50%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.rail.is-on{ opacity:1; pointer-events:auto; }
.rail ol{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.rail li{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  cursor:pointer;
  font-family:var(--font-m); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  transition:color .35s var(--ease);
}
.rail li span{
  opacity:0; transform:translateX(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.rail li i{
  width:22px; height:1px; background:currentColor; opacity:.4;
  transition:width .45s var(--ease), opacity .35s var(--ease);
}
.rail li:hover span, .rail li.is-active span{ opacity:1; transform:none; }
.rail li.is-active{ color:var(--accent); }
.rail li.is-active i{ width:40px; opacity:1; box-shadow:0 0 10px var(--accent); }
.rail li.is-done{ color:var(--ink-2); }
@media (max-width:900px){ .rail{ display:none; } }

/* ── shared type ───────────────────────────────────────────── */
main{ position:relative; z-index:2; }

.eyebrow, .section-kicker, .panel__kicker{
  font-family:var(--font-m);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}
.eyebrow span{ color:var(--accent); margin-right:12px; }

em{ font-family:var(--font-s); font-style:italic; font-weight:400; }

/* reveal */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease);
  transition-delay:var(--d, 0ms);
}
.hero__title .line.in > span{ transform:none; }
.hero__title .line{ opacity:1; transform:none; }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:0 var(--pad);
}
.hero__inner{ max-width:min(1100px, 100%); }
.hero__title{
  margin:.35em 0 0;
  font-size:clamp(3.4rem, 13vw, 12.5rem);
  line-height:.92;
  font-weight:600;
  letter-spacing:-.045em;
}
.hero__title em{
  font-size:1.04em;
  letter-spacing:-.02em;
  color:var(--accent);
  padding-right:.06em;
}
.hero__sub{
  margin:2rem 0 0;
  max-width:44ch;
  font-size:clamp(1rem, 1.35vw, 1.2rem);
  color:var(--ink-2);
  line-height:1.6;
}
.hero__meta{
  margin-top:clamp(2.5rem, 6vh, 5rem);
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-m); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.hero__mousedot{ animation:mouse 2s var(--ease) infinite; }
@keyframes mouse{ 0%{transform:translateY(0);opacity:0} 25%{opacity:1} 70%{transform:translateY(10px);opacity:0} 100%{opacity:0} }
.hero__edge{
  position:absolute; bottom:var(--pad);
  font-family:var(--font-m); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.hero__edge--l{ left:var(--pad); }
.hero__edge--r{ right:var(--pad); }
@media (max-width:760px){ .hero__edge{ display:none; } }

/* ── pipeline steps ────────────────────────────────────────── */
.pipeline{ position:relative; }
.step{ position:relative; height:260vh; }
.step__sticky{
  position:sticky; top:0;
  height:100svh;
  display:flex; align-items:center;
  padding:0 var(--pad);
  overflow:hidden;
}

.ghost{
  position:absolute;
  right:-.07em; top:50%;
  font-size:clamp(9rem, 21vw, 21rem);
  font-weight:700; line-height:.8;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.085);
  pointer-events:none;
  will-change:transform;
}
.ghost--r{ right:auto; left:-.07em; }
@media (max-width:1100px){ .ghost{ opacity:.5; } }

.panel{
  position:relative;
  width:min(430px, 100%);
  will-change:transform, opacity;
}
.panel--right{ margin-left:auto; }
@media (min-width:1400px){
  .panel--left{ margin-left:clamp(0px, 5vw, 90px); }
  .panel--right{ margin-right:clamp(0px, 5vw, 90px); }
}

.panel__kicker{ display:flex; align-items:center; gap:12px; }
.panel__kicker b{
  font-weight:500; color:var(--accent);
  font-family:var(--font-m); font-size:11px;
}
.panel__kicker i{ width:26px; height:1px; background:var(--line); }
.panel__title{
  margin:.7rem 0 1.1rem;
  font-size:clamp(2rem, 3.6vw, 3.15rem);
  line-height:1.03;
  font-weight:600;
  letter-spacing:-.035em;
}
.panel__body{
  margin:0;
  color:var(--ink-2);
  font-size:clamp(.94rem, 1.05vw, 1.02rem);
  line-height:1.68;
  max-width:40ch;
}

/* specs table */
.specs{
  margin:1.8rem 0 0; padding-top:1.1rem;
  border-top:1px solid var(--line);
  display:grid; gap:.55rem;
  font-family:var(--font-m); font-size:11px;
  letter-spacing:.08em;
}
.specs div{ display:flex; justify-content:space-between; gap:1rem; }
.specs dt{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; font-size:10px; }
.specs dd{ margin:0; color:var(--ink); }

/* prompt terminal (step 01) */
.prompt{
  position:relative;
  margin:0 0 1.4rem;
  padding:1rem 1.1rem 1.05rem;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(10,12,17,.6);
  backdrop-filter:blur(10px);
}
.prompt::before{
  content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:2px;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}
.prompt__label{
  position:absolute; top:-7px; left:14px;
  padding:0 6px; background:var(--bg);
  font-family:var(--font-m); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.prompt__text{
  margin:0; font-family:var(--font-m);
  font-size:12.5px; line-height:1.75; color:var(--ink);
  min-height:5.2em;
}
.caret{
  display:inline-block; width:7px; height:1em;
  background:var(--accent); vertical-align:-2px; margin-left:2px;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{opacity:0} }

/* channel chips (step 04) */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:1.4rem; }
.chips span{
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:100px;
  font-family:var(--font-m); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.chips span.on{
  color:#06070a; background:var(--accent); border-color:var(--accent);
}

/* timeline (step 06) */
.timeline{
  position:relative; margin-top:1.5rem; height:34px;
  border:1px solid var(--line); border-radius:3px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12.5%),
    rgba(10,12,17,.5);
  overflow:hidden;
}
.timeline::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line);
}
.timeline i{
  position:absolute; top:-1px; bottom:-1px; left:0; width:2px;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}

/* formats (step 07) */
.formats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:1.5rem; }
.formats span{
  display:flex; align-items:baseline; gap:8px;
  padding:11px 13px;
  border:1px solid var(--line); border-radius:4px;
  background:rgba(10,12,17,.5);
  font-family:var(--font-m); font-size:10px;
  letter-spacing:.12em; color:var(--ink-3);
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease);
}
.formats span.on{ opacity:1; transform:none; border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.formats b{ font-size:12px; letter-spacing:.06em; color:var(--ink); font-weight:500; }

/* ── metrics ───────────────────────────────────────────────── */
.metrics{
  position:relative;
  padding:clamp(7rem, 18vh, 12rem) var(--pad);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,7,10,.75), var(--bg) 45%);
}
.section-title{
  margin:1rem 0 clamp(3rem,7vh,5rem);
  font-size:clamp(2.2rem, 6.5vw, 5.2rem);
  line-height:1;
  font-weight:600; letter-spacing:-.04em;
}
.section-title em{ color:var(--ink-2); opacity:.7; }
.metrics__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.metrics__grid > div{
  background:var(--bg);
  padding:clamp(1.5rem,3vw,2.4rem);
  display:grid; gap:.6rem; align-content:start;
}
.metrics__grid b{
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:500; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.metrics__grid span{
  font-family:var(--font-m); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  line-height:1.6;
}

/* ── outro ─────────────────────────────────────────────────── */
.outro{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(6rem,14vh,10rem) var(--pad) 0;
}
.outro__inner{ margin:auto 0; }
.outro__title{
  margin:0;
  font-size:clamp(3rem, 11vw, 9.5rem);
  line-height:.94; font-weight:600; letter-spacing:-.045em;
}
.outro__title em{ color:var(--accent); }
.outro p{
  margin:1.6rem 0 0; max-width:38ch;
  color:var(--ink-2); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.65;
}
.cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:2.6rem; padding:15px 26px;
  border:1px solid var(--line); border-radius:100px;
  color:var(--ink); text-decoration:none;
  font-family:var(--font-m); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease);
}
.cta:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); gap:18px; }

.foot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between;
  padding:1.6rem 0;
  border-top:1px solid var(--line);
  font-family:var(--font-m); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* ── mobile layout: panels sit low, model reads above ──────── */
@media (max-width:900px){
  .step{ height:215vh; }
  .step__sticky{ align-items:flex-end; padding-bottom:calc(var(--pad) + 8px); }
  .panel{
    width:100%;
    padding:1.2rem 1.25rem 1.35rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:rgba(6,7,10,.74);
    backdrop-filter:blur(18px) saturate(1.2);
  }
  .panel--right{ margin-left:0; }
  .panel__body{ font-size:.9rem; line-height:1.6; }
  .specs{ margin-top:1.1rem; padding-top:.85rem; }
  .ghost{ top:11%; font-size:7.5rem; right:auto; left:50%; transform:translateX(-50%); }
  .hud--bl, .hud--tr{ display:none; }
}

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero__title .line > span{ transform:none; transition:none; }
  .hero__mousedot, .hud__dot, .caret{ animation:none; }
}