/* Swiss / editorial: black page, white type, hairline rows, one muted green for "live". */
:root {
  --bg: #0a0a0a; --fg: #ffffff; --muted: rgba(255,255,255,.62); --rule: rgba(255,255,255,.25); --rule-strong: rgba(255,255,255,.5);
  --brand-green: #76B900;
  --count-grad: linear-gradient(120deg, #c8f560 0%, #76B900 35%, #3fae5a 65%, #0fb5a8 100%);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  --font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --g: 16px; --col-gap: 16px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --count-grad: linear-gradient(120deg, #7fae0f 0%, #5a9200 35%, #2c8745 65%, #0a8a80 100%);
    --bg: #f2f2f0; --fg: #0a0a0a; --muted: rgba(10,10,10,.64); --rule: rgba(10,10,10,.25); --rule-strong: rgba(10,10,10,.5);
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.4'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.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; }

/* ---------- Grid ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--col-gap); max-width: 1440px; margin: 0 auto; padding: 0 var(--g); position: relative; z-index: 1; }
main { position: relative; z-index: 1; }

/* ---------- Tiny meta type ---------- */
.meta { font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--brand-green); vertical-align: 1px; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Hero ---------- */
.hero { padding-top: 14px; }
.meta-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.meta-r { text-align: right; }
.meta-r time { font-variant-numeric: tabular-nums; }
.headline { margin: clamp(28px, 4vh, 56px) 0 clamp(24px, 4vh, 48px); font-weight: 600; font-size: clamp(4.2rem, min(19vw, 15vh), 15rem); line-height: .88; letter-spacing: -.055em; }
.hl { display: block; }
.hl-2 { text-align: right; }
.hl-1, .hl-2, .hl-3 { animation: up .9s cubic-bezier(.2,.8,.2,1) both; }
.hl-2 { animation-delay: .08s; } .hl-3 { animation-delay: .16s; }

.count { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); padding: 14px 0 clamp(32px, 6vw, 72px); }
.count-label { margin-bottom: 6px; }
.count-num { font-weight: 600; color: var(--brand-green); font-size: clamp(4.5rem, min(22vw, 28vh), 14rem); line-height: .9; letter-spacing: -.06em; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; margin-left: -.04em; }
.count-num[data-len="7"], .count-num[data-len="8"] { font-size: clamp(3.4rem, 16vw, 12rem); }
.count-num[data-len="9"], .count-num[data-len="10"], .count-num[data-len="11"] { font-size: clamp(2.6rem, 12vw, 10rem); }
/* Gradient numerals with a slow shimmer; shimmer stays first in the list so a bump never restarts it. */
.count-num { background: var(--count-grad); background-size: 200% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 8s ease-in-out infinite alternate; }
.count-num.bump { animation: shimmer 8s ease-in-out infinite alternate, tick .5s ease-out; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .count-num { background: none; color: var(--brand-green); -webkit-text-fill-color: currentColor; }
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.count-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 20px; }
.agent-count { color: var(--fg); }

/* ---------- CTA (the only rounded thing) ---------- */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 500 14px/1 var(--font); letter-spacing: .02em; color: var(--bg); background: var(--fg); border: 1px solid var(--fg);
  transition: background-color .2s, border-color .2s, color .2s; }
.cta:hover { background: var(--brand-green); border-color: var(--brand-green); color: #0a0a0a; }
.cta:disabled { opacity: .5; cursor: wait; }
.cta-block { width: 100%; margin-top: 18px; padding: 18px 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-ghost { color: var(--fg); background: transparent; border-color: var(--rule-strong, var(--fg)); }
.cta-ghost:hover { color: #0a0a0a; }

/* GitHub link, top-right of the meta row */
.gh-link { color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
.gh-link:hover { color: var(--brand-green); border-bottom-color: var(--brand-green); }

/* Install the skill */
.install-step { margin-top: 22px; }
.install-step .meta { color: var(--muted); margin-bottom: 8px; }
.code-line { display: flex; align-items: stretch; border: 1px solid var(--rule); max-width: 100%; }
.code-line code { flex: 1 1 auto; min-width: 0; padding: 12px 14px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
button.copy { flex: none; padding: 0 16px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--fg); font: 500 12px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
button.copy:hover { background: var(--brand-green); color: #0a0a0a; }
.install-then { margin-top: 20px; color: var(--muted); }
.install-then a { color: var(--fg); }

/* ---------- Sections ---------- */
.sec { padding-top: clamp(72px, 11vw, 160px); }
.sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4em; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  font-size: clamp(2.2rem, 7vw, 5.2rem); line-height: .95; letter-spacing: -.05em; }
.sec-label { font: inherit; font-weight: 600; margin: 0; }
.live-tag { margin-left: auto; align-self: center; letter-spacing: .08em; }

.row { padding: 22px 0 28px; border-bottom: 1px solid var(--rule); }
.row-key { display: block; margin-bottom: 14px; font-weight: 600; font-size: clamp(3rem, 12vw, 7rem); line-height: .85; letter-spacing: -.06em; }
.row-body h2 { font-weight: 600; font-size: clamp(1.6rem, 6vw, 2.8rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 18px; }
.row-body p { max-width: 62ch; }
.row-body p + p { margin-top: 14px; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.4; letter-spacing: -.015em; }
.built strong { display: block; font-weight: 500; font-size: clamp(1.4rem, 4.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.04em; max-width: 22ch; }

/* Portrait (petition row key). The frame holds its shape even if the image 404s. */
.portrait { margin: 0 0 14px; max-width: min(100%, 360px); font-size: inherit; line-height: inherit; letter-spacing: normal; }
.portrait-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: rgba(128,128,128,.12); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0); transition: filter .8s ease;
  animation: kenburns 24s ease-in-out infinite alternate; }
.portrait.is-missing img { visibility: hidden; }
.credit { margin-top: 8px; font-size: 11px; line-height: 1.4; letter-spacing: .02em; color: var(--muted); }
.credit a { color: var(--muted); }
.credit a:hover { color: var(--fg); }
@media (min-width: 768px) {
  .portrait img { filter: grayscale(1); }
  .portrait:hover img { filter: grayscale(0); }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* Marquee of recent messages between sections */
.marquee { margin-top: clamp(72px, 11vw, 160px); padding: 14px 0; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee[hidden] { display: none; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-dur, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: none; padding: 0 2.2em; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.marquee-item::after { content: '\2022'; margin-left: 2.2em; color: var(--brand-green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Timeline rows */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 22px 0 26px; border-bottom: 1px solid var(--rule); }
.timeline strong { display: block; margin-bottom: 12px; font-weight: 600; font-size: clamp(2.8rem, 12vw, 7rem); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }

/* ---------- Form ---------- */
.sign .row-key h2 { font: inherit; font-size: clamp(2rem, 8vw, 4.2rem); line-height: .92; max-width: 8ch; }
.field { padding-top: 22px; }
label { display: block; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.opt { text-transform: none; letter-spacing: 0; }
input[type=text], select { width: 100%; margin: 0; padding: 8px 0 10px; font: 400 1.3rem/1.3 var(--font); letter-spacing: -.02em; color: var(--fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; transition: border-color .2s; }
select { -webkit-appearance: none; appearance: none; background: var(--arrow) no-repeat right 4px center; padding-right: 28px; cursor: pointer; }
select option { color: var(--fg); background: var(--bg); }
input[type=text]:hover, select:hover { border-bottom-color: var(--fg); }
input[type=text]:focus, select:focus { outline: none; border-bottom: 1px solid var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--fg); border-radius: 0; }
#turnstile { margin: 20px 0 0; min-height: 65px; max-width: 100%; }
.status { min-height: 1.5em; margin-top: 14px; font-size: 14px; font-weight: 500; }
.status.ok::before { content: '\2713\00a0'; } .status.err::before { content: '\2715\00a0'; }

/* ---------- Voices (feed) ---------- */
.feed-cols { display: none; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed:empty::before { content: 'Be the first to sign.'; display: block; padding: 22px 0; color: var(--muted); border-bottom: 1px solid var(--rule); }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.f-name { font-weight: 500; }
.f-country { color: var(--muted); text-align: right; }
.f-msg { grid-column: 1 / -1; color: var(--fg); }
.f-msg:empty { display: none; }
.slide-in { animation: rowIn .5s ease-out both; }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(80px, 12vw, 160px); padding-top: 16px; padding-bottom: 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13px; gap: 6px; }
.foot a { color: var(--fg); }

/* ---------- Floating messages (monochrome text lines) ---------- */
.floaters { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.floater { position: absolute; top: 100%; width: max-content; opacity: var(--o, .2); will-change: transform; animation: floatUp var(--dur, 18s) linear forwards; }
.floater-in { display: block; max-width: min(420px, 80vw); font-size: calc(13px * var(--s, 1)); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: var(--fg);
  transform: translateX(var(--shift, 0)); animation: sway var(--sway-dur, 4s) ease-in-out infinite alternate; }
@keyframes floatUp { to { transform: translate3d(0, calc(-100vh - 100%), 0); } }
@keyframes sway { from { transform: translateX(calc(var(--shift, 0px) - var(--sway, 10px))); } to { transform: translateX(calc(var(--shift, 0px) + var(--sway, 10px))); } }

/* ---------- Desktop: strict 12-column grid ---------- */
@media (min-width: 768px) {
  :root { --g: 32px; --col-gap: 20px; }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid > * { grid-column: 1 / -1; }
  .count { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .count-label { grid-column: 1 / -1; }
  .count-num { grid-column: 1 / span 8; }
  .count-side { grid-column: 9 / -1; margin: 0 0 .8em; }
  .row, .timeline li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .row-key { grid-column: 1 / span 4; margin: 0; }
  .row-body { grid-column: 5 / -1; }
  .timeline li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .timeline strong { margin: 0; }
  .feed-cols, .feed li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--col-gap); }
  .feed-cols { padding: 14px 0 10px; border-bottom: 1px solid var(--rule); color: var(--muted); }
  .f-country { text-align: left; }
  .f-msg { grid-column: auto; }
  .f-msg:empty { display: block; }
  .f-msg:empty::before { content: '\2014'; color: var(--muted); }
  .sign form { max-width: 640px; }
  .foot { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .foot > p:first-child { grid-column: 1 / span 8; }
  .foot > p:last-child { grid-column: 9 / -1; text-align: right; }
}
@media (min-width: 1280px) { :root { --g: 48px; --col-gap: 24px; } }

/* ---------- Scroll reveal (only when JS is running and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Hairline rules draw left to right. */
  .js .reveal:is(.sec-head, .row, .timeline li) { position: relative; border-bottom-color: transparent; }
  .js .reveal:is(.sec-head, .row, .timeline li)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule);
    transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--i, 0) * 60ms + .1s); }
  .js .reveal.is-in::after { transform: scaleX(1); }
  /* Timeline years slide in as their row enters. */
  .js .timeline li.reveal strong { opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 60ms + .1s); }
  .js .timeline li.reveal.is-in strong { opacity: 1; transform: none; }
}

/* ---------- Keyframes ---------- */
@keyframes up { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes tick { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Motion pass: keynote/editorial layer (all of it off under reduced motion) ---------- */
/* Odometer (built by app.js only when motion is allowed): each cell paints its own slice of the
   hero gradient, positioned by --x (cell offset) and --w (box width) so it lines up like one fill. */
.count-num { position: relative; }
.odo-cell { display: inline-block; height: .9em; vertical-align: top; clip-path: inset(0 -.25em); }
.odo-strip { display: block; transition: transform calc(700ms + var(--steps, 0) * 45ms) cubic-bezier(.2,.8,.2,1) calc(var(--j, 0) * 35ms); }
.odo-strip > span { display: block; height: .9em; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .count-num.odo { background-image: none; }
  .odo-strip, .odo-sep { background-image: var(--count-grad); background-repeat: repeat; background-size: calc(var(--w, 100%) * 2) .9em;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmerCell 8s ease-in-out var(--phase, 0s) infinite alternate; }
}
@keyframes shimmerCell { from { background-position: calc(var(--x, 0px) * -1) 0; } to { background-position: calc(var(--x, 0px) * -1 - var(--w, 0px)) 0; } }
.odo-sep.odo-new { opacity: 0; animation: shimmerCell 8s ease-in-out var(--phase, 0s) infinite alternate, fadeIn .4s ease calc(var(--j, 0) * 35ms + .2s) forwards; }

/* "+n" pop above the end of the number, and the agent line's green flash. */
.pop { position: absolute; top: .05em; left: 100%; margin-left: .12em; font-size: clamp(1rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  color: var(--brand-green); -webkit-text-fill-color: var(--brand-green); background: none; pointer-events: none; animation: pop 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(.6em) scale(.8); } 18% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1.6em); } }
.agent-count.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 25% { color: var(--brand-green); } 100% { color: var(--fg); } }

/* Copy buttons: quick check-mark state. */
button.copy.is-copied { background: var(--brand-green); color: #0a0a0a; }
button.copy.is-copied::before { content: '\2713'; display: inline-block; margin-right: .45em; animation: check .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes check { from { opacity: 0; transform: scale(.2) rotate(-25deg); } to { opacity: 1; transform: none; } }

/* Timeline rows: hover sweep (green rule draws from the left, year picks up the accent). */
.timeline li { position: relative; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .timeline li::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1; background: var(--brand-green);
    transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,0,.2,1); }
  .timeline li:hover::before { transform: scaleX(1); }
  .timeline li strong { transition: color .3s ease; }
  .timeline li:hover strong { color: var(--brand-green); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Headline letters rise behind a clip mask (motion.js splits them; until then the words stay hidden under .js). */
  .js .headline:not(.split) .hl { opacity: 0; animation: none; }
  .headline.split .hl { animation: none; padding-bottom: .14em; margin-bottom: -.14em; clip-path: inset(-.3em -.3em 0 -.3em); }
  .headline.split .ch { display: inline-block; animation: chUp .95s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--hl-delay, 0s) + var(--ci, 0) * 32ms); }
  @keyframes chUp { from { transform: translateY(110%); } to { transform: none; } }

  /* Section titles wipe up from below as their head enters view; the head itself no longer fades. */
  .js .reveal.sec-head { opacity: 1; transform: none; }
  .js .reveal.sec-head .sec-label { display: inline-block; clip-path: inset(100% -.1em -.2em -.1em); transform: translateY(.35em);
    transition: clip-path .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
  .js .reveal.sec-head.is-in .sec-label { clip-path: inset(-.2em -.1em -.2em -.1em); transform: none; }
  .js .reveal.sec-head .live-tag { opacity: 0; transition: opacity .6s ease .5s; }
  .js .reveal.sec-head.is-in .live-tag { opacity: 1; }

  /* CTA pills: magnetic lean (motion.js sets --mx/--my for fine pointers only) and an arrow nudge. */
  .cta-row .cta { translate: var(--mx, 0px) var(--my, 0px); transition: background-color .2s, border-color .2s, color .2s, translate .35s cubic-bezier(.2,.8,.2,1); }
  .cta > span[aria-hidden] { display: inline-block; }
  @media (hover: hover) and (pointer: fine) {
    .cta:hover > span[aria-hidden] { animation: nudge .9s cubic-bezier(.5,0,.3,1) infinite; }
  }
  @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

  /* Scroll-driven: progress bar, headline drift and count parallax (no JS). */
  @supports (animation-timeline: view()) {
    body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 9; height: 2px; background: var(--brand-green);
      transform: scaleX(0); transform-origin: left; pointer-events: none; animation: progress linear both; animation-timeline: scroll(root); }
    .headline { transform-origin: 0 0; animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @media (min-width: 768px) {
      .count-num { animation: shimmer 8s ease-in-out infinite alternate, parallax linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
      .count-num.bump { animation: shimmer 8s ease-in-out infinite alternate, parallax linear both, tick .5s ease-out; animation-timeline: auto, scroll(root), auto; animation-range: normal, 0 100vh, normal; }
    }
  }
  @keyframes progress { to { transform: scaleX(1); } }
  @keyframes drift { to { transform: translateY(-2vh) scale(.94); opacity: .35; } }
  @keyframes parallax { to { translate: 0 clamp(16px, 6vh, 64px); } }
}

/* ---------- Intro overlay (always black) ---------- */
.intro { position: fixed; inset: 0; z-index: 10; display: grid; align-items: center; padding: 0 var(--g); background: #0a0a0a; color: #fff;
  animation: introOut .4s ease 2.7s forwards; }
.intro[hidden] { display: none; }
.skip { position: absolute; top: 14px; right: var(--g); padding: 6px 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); color: #fff; cursor: pointer;
  font: 500 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.skip:hover { border-bottom-color: #fff; }
.stage { width: 100%; max-width: 1440px; margin: 0 auto; }
.intro-word { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; font-weight: 600; font-size: clamp(4.2rem, 21vw, 14rem); line-height: .9; letter-spacing: -.055em; }
.intro-word.r { text-align: right; }
.intro-word span { display: inline-block; animation: slideUp .8s cubic-bezier(.2,.8,.2,1) both; }
.intro-word:nth-child(2) span { animation-delay: .15s; } .intro-word:nth-child(3) span { animation-delay: .3s; }
.tagline { margin-top: 28px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.25); font: 500 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase;
  animation: fadeIn .6s ease .8s both; }
@keyframes slideUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro, .floaters, .marquee { display: none; }
  .pop { display: none; }
}