/* fizzyfeed landing — page chrome (module styles are injected per-section by the assembler) */
/* tokens: single source = repo tokens.css values, dark-first */
:root{
  --electric-300:#4D8DFF; --electric-400:#1A6BFF; --electric-500:#0A5CFF; --electric-600:#0047E0; --volt-500:#00D5FF; --violet-500:#6333FF;
  --spark-500:#C8FF4D; --ink-950:#05070E; --ink-900:#0A0E1A; --ink-800:#131A2B;
  --ink-300:#9AA8C4; --ink-200:#C6D0E4; --ink-50:#F5F8FE; --white:#FFFFFF;
  --ink-400:#76839B; /* dim-but-AA text on ink-950 (≈5.1:1) — replaces stacked opacity */
  --grad-brand: linear-gradient(135deg,#6333FF,#0A5CFF,#00D5FF);
  --radius-card:28px; --radius-md:14px; --radius-pill:999px;
  --glow-electric: 0 0 0 1px rgb(10 92 255 / .25), 0 12px 48px rgb(10 92 255 / .35);
  --shadow-card: 0 8px 30px rgb(5 7 14 / .35);
  --wrap: 1120px;
  --line: rgb(255 255 255 / .07); --line-strong: rgb(255 255 255 / .14);

  /* motion library — measured from vibrant.design production CSS
     (experiments-with-ai/data/extracted-tokens.json §motion) */
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);   /* default entrances */
  --ease-out-quart: cubic-bezier(.23, 1, .32, 1);   /* panels, cards, hover lifts */
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);    /* hero reveals, big surfaces */
  --ease-inout-quint: cubic-bezier(.32, .72, 0, 1); /* state changes */
  --ease-inout-cubic: cubic-bezier(.66, 0, .34, 1); /* loops, position swaps */
  --ease-spring: cubic-bezier(.34, 1.96, .94, 1);   /* success pops */
  --ease-spring-soft: cubic-bezier(.34, 1.45, .64, 1); /* button press/release */
  --dur-hover: 180ms; --dur-entrance: 500ms; --stagger: 64ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-950); color:var(--ink-200);
  font:400 16px/1.6 "Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2{font-family:"Space Grotesk",sans-serif; font-weight:700; text-transform:lowercase;
  color:var(--ink-50); margin:0; line-height:1.05}
h1{font-size:clamp(44px,7vw,84px); letter-spacing:-.03em}
h2{font-size:clamp(30px,4.2vw,48px); letter-spacing:-.02em}
p{margin:0}
a{color:var(--ink-200); text-decoration:none;
  transition:color var(--dur-hover) var(--ease-out-quart)}
a:hover{color:var(--ink-50)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.overline{font:500 12px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:lowercase;
  color:var(--electric-300); display:inline-flex; align-items:center; gap:8px}
.overline::before{content:""; width:18px; height:2px; background:var(--grad-brand); border-radius:2px}
.sub{color:var(--ink-300); font-size:17px; max-width:56ch}
section{position:relative; padding:clamp(64px,9vw,128px) 0}
section[id],main[id]{scroll-margin-top:76px}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:44px}
.sec-head--center{align-items:center; text-align:center; margin-left:auto; margin-right:auto}
.sec-head--center .sub{margin:0 auto}

/* entrance reveals — benchmark: 300–600ms, translateY(16px), 40–80ms stagger.
   .reveal starts hidden; main.js assigns --i per section and adds .is-in at 15% visibility */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.is-in{opacity:1; transform:none;
  transition:opacity var(--dur-entrance) var(--ease-out-expo),
             transform var(--dur-entrance) var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * var(--stagger))}

/* nav — frosted glass (vibrant.design nod) */
.nav{position:fixed; inset:0 0 auto; z-index:50; backdrop-filter:blur(14px);
  background:rgb(5 7 14 / .62); border-bottom:1px solid rgb(255 255 255 / .06)}
.nav .wrap{display:flex; align-items:center; gap:28px; height:64px}
.nav img.brand{height:26px; display:block}
.nav nav{margin-left:auto; display:flex; gap:24px; font-size:14px}
.nav nav a{color:var(--ink-300); display:inline-block; padding:14px 2px} /* >=44px tap target */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer;
  font:500 15px "Inter",sans-serif; border-radius:var(--radius-pill); padding:12px 22px;
  color:var(--white); background:var(--electric-500); box-shadow:var(--glow-electric);
  transition:transform var(--dur-hover) var(--ease-spring-soft),
             background var(--dur-hover) var(--ease-out-quart),
             box-shadow var(--dur-hover) var(--ease-out-quart)}
.btn:hover{background:var(--electric-400); transform:translateY(-1px)}
.btn:active{transform:scale(.97); transition-timing-function:var(--ease-out-quart)}
.btn.ghost{background:rgb(255 255 255 / .05); box-shadow:none; border:1px solid rgb(255 255 255 / .4); color:var(--ink-200)}
.btn.ghost:hover{border-color:var(--electric-500); color:var(--ink-50)}
.btn.small{padding:11px 18px; font-size:14px} /* 40px tall in a 64px bar */
.btn:focus-visible,a:focus-visible{outline:2px solid var(--volt-500); outline-offset:2px}

/* hero */
.hero{padding:136px 0 64px}
.hero-copy{display:flex; flex-direction:column; gap:20px; align-items:flex-start; max-width:820px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.hero-note{font:500 12px/1.6 "JetBrains Mono",monospace; color:var(--ink-300); letter-spacing:.04em}
.hero-note b{color:var(--volt-500); font-weight:500}
.hero-fx{margin-top:24px}
.hero-fx .fx{width:100%}

/* proof band */
.proof{padding:40px 0 96px}
.proof .fx{margin-top:8px}

/* how it works — steps beside the homage animation */
.how-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:40px; align-items:center}
.steps{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.step{display:flex; gap:14px; padding:18px; background:var(--ink-900);
  border:1px solid var(--line); border-radius:var(--radius-md);
  transition:transform var(--dur-hover) var(--ease-out-quart),
             border-color var(--dur-hover) var(--ease-out-quart)}
.step:hover{transform:translateY(-2px); border-color:rgb(10 92 255 / .4)}
.step .n{font:500 13px "JetBrains Mono",monospace; color:var(--volt-500); padding-top:2px}
.step h3{margin:0; font:600 17px/1.3 "Inter",sans-serif; color:var(--ink-50)}
.step p{color:var(--ink-300); font-size:14px}

/* chapters — bento list */
.chapters-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.chapter{display:flex; gap:12px; align-items:baseline; padding:16px 18px;
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--radius-md);
  transition:transform var(--dur-hover) var(--ease-out-quart),
             border-color var(--dur-hover) var(--ease-out-quart)}
.chapter:hover{transform:translateY(-2px); border-color:rgb(10 92 255 / .4)}
.chapter .cn{font:500 12px "JetBrains Mono",monospace; color:var(--ink-300)}
.chapter b{color:var(--ink-50); font-weight:600; font-size:14px}
.chapter span{color:var(--ink-300); font-size:13.5px}
.chapters-fx{margin:36px 0 28px}

/* cta */
.cta-box{display:grid; place-items:center; gap:28px; text-align:center;
  padding:64px 24px; border-radius:var(--radius-card); background:
  radial-gradient(120% 140% at 85% -10%, rgb(10 92 255 / .16), transparent 55%),
  radial-gradient(120% 140% at 10% 110%, rgb(99 51 255 / .14), transparent 55%),
  var(--ink-900); border:1px solid var(--line)}
.cta-box .btn{font-size:17px; padding:16px 34px}
.cta-micro{font:500 12.5px "JetBrains Mono",monospace; color:var(--ink-300)}

/* footer */
footer{border-top:1px solid var(--line); padding:44px 0 64px; color:var(--ink-300); font-size:13.5px}
footer .wrap{display:grid; gap:10px}
footer .f-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px 24px; flex-wrap:wrap}
footer .f-right{display:grid; gap:10px; justify-items:end; text-align:right}
footer .f-brand{display:flex; align-items:center; gap:12px; color:var(--ink-200)}
footer .f-brand img{height:20px}
footer .legal{color:var(--ink-400); max-width:72ch}
footer a{color:var(--ink-200); text-decoration:underline; text-underline-offset:3px}

/* module host: CPU guard — pause CSS loops when a section is offscreen (main.js toggles) */
.fx[data-fx-state="idle"] *, .fx[data-fx-state="idle"] *::before, .fx[data-fx-state="idle"] *::after{
  animation-play-state:paused !important;
}

/* responsive */
@media (max-width: 900px){
  .how-grid{grid-template-columns:1fr}
  section{padding:72px 0}
  .hero{padding:132px 0 48px}
  .nav nav{display:none}
}
@media (max-width: 480px){
  /* align-self:stretch — the hero-copy parent is align-items:flex-start, so the
     grid would otherwise shrink-wrap and the 1fr column never reaches full width */
  .hero-cta{display:grid; grid-template-columns:1fr; align-self:stretch}
  .cta-box .btn{justify-self:stretch} /* the closing CTA gets the same thumb target */
  footer .f-row{flex-direction:column; align-items:flex-start}
  footer .f-right{justify-items:start; text-align:left}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.btn:hover{transform:none}
  .step:hover,.chapter:hover{transform:none}
  .reveal{opacity:1; transform:none}
  .reveal.is-in{transition:none}
}

/* without JS the reveals must never hide content */
.no-js .reveal{opacity:1; transform:none}