/* ============================================================
   Home page — sound gate, hero lens grid, HUD, proof sequence
   ============================================================ */

/* ---------- sound gate ----------
   Hidden unless the inline head script sets html.gate-on, so a JS
   failure can never lock the site behind a splash. */
.gate{ display:none; }
html.gate-on .gate{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:200;
  background:var(--black);
}
html.gate-on body{ overflow:hidden; }
.gate-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .9s var(--ease);
}
.gate.webgl-ready .gate-canvas{ opacity:1; }
.gate-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:24px; text-align:center;
}
.gate-word{
  /* placeholder only — replaced by the real mark, then by particles */
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(52px, 13vw, 168px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
  color:var(--white);
  transition:opacity .6s var(--ease);
}
/* once particles take over, the CSS wordmark steps aside */
.gate.webgl-ready .gate-word{ opacity:0; }
.gate-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
/* default to the neutral Enter; .has-audio swaps in the sound choice
   the moment the signature loop is actually available */
.gate-sound{ display:none; }
.gate.has-audio .gate-sound{ display:inline-flex; }
.gate.has-audio .gate-note{ display:block; }
.gate.has-audio .gate-plain{ display:none; }
.gate-note{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); margin:0;
}
.gate.leaving{ opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }

/* ---------- HUD instrument panels ---------- */
.hud{ position:absolute; z-index:6; display:flex; gap:10px; align-items:flex-end; }
/* "Now looping" is the brand statement — it sits centre stage */
.hud-bl{ left:50%; transform:translateX(-50%); bottom:26px; }
.hud-br{ right:24px; bottom:26px; }
.hud-card{
  display:flex; flex-direction:column; gap:3px;
  min-width:132px;
  padding:11px 14px;
  background:rgba(10,10,10,.62);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  font-family:var(--font-mono);
}
.hud-k{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
  display:flex; align-items:center; gap:6px;
}
.hud-v{ font-size:19px; font-weight:700; color:var(--white); line-height:1.1; }
.hud-sub{ font-size:9.5px; color:var(--grey); letter-spacing:.03em; }
.hud-dot{
  width:5px; height:5px; border-radius:50%; background:var(--lime);
  animation:hud-pulse 2s ease-in-out infinite;
}
@keyframes hud-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@media (max-width:900px){
  .hud-br{ display:none; }
  .hud-bl{ left:50%; transform:translateX(-50%); bottom:30px; }
  /* the centred chip already owns this spot */
  .hero-scroll-hint{ display:none; }
}

.hero-grid-stage{
  position:relative;
  /* the nav is sticky and sits in flow, so a full 100svh hero runs
     its own footer off the bottom of the viewport */
  height:calc(100svh - var(--nav-h, 76px));
  min-height:560px;
  overflow:hidden;
  background:var(--black);
  isolation:isolate;
  perspective:1500px;
  perspective-origin:50% 44%;
}

/* the tilting plane — overscanned past the stage on every side so
   rotation never swings an empty edge into view */
.feed-3d{
  position:absolute; inset:-7%;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  will-change:transform;
}

.feed-grid-base, .feed-grid-lit{
  position:absolute; inset:0;
  display:grid;
  gap:6px;
  padding:6px;
}
.feed-grid-base{
  filter:grayscale(1) brightness(.34) contrast(.9);
  opacity:.9;
}
.feed-grid-lit{
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  will-change:mask-image;
}

.tile{
  position:relative;
  background:var(--black-soft);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--radius);
  /* no aspect-ratio: the grid sets explicit 1fr rows, and an aspect
     lock here leaves dead bands between rows at narrow widths */
  display:flex; align-items:flex-end; justify-content:flex-start;
  overflow:hidden;
  /* raised-card read: lit top edge, weight underneath */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 26px rgba(0,0,0,.55);
  /* --lift is written per frame by hero-lens.js: tiles inside the
     lens rise toward the viewer. Identical in both layers. */
  transform:scale(var(--lift,1));
}
.feed-grid-lit .tile{
  box-shadow:
    inset 0 1px 0 rgba(204,255,0,.18),
    0 14px 34px rgba(0,0,0,.6),
    0 0 22px rgba(204,255,0,.07);
}
/* flat tones are the standing texture until the real IG
   screenshots resolve — and the fallback if they never do */
.tile.tone-flat{ background:#151515; }
.tile.tone-ghost{ background:#1c1c1c; }
.tile.tone-lime{ background:linear-gradient(155deg,#1c220a,#0f1200); }

/* ---------- real Instagram photo slices ----------
   --bg / --bs / --bp are set per tile by hero-lens.js: one cell
   of one of the 3 source screenshots, cropped to this tile. */
.tile::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:var(--bg, none);
  background-size:var(--bs, cover);
  background-position:var(--bp, 50% 50%);
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .7s var(--ease);
}
.has-photos .tile::before{ opacity:1; }

/* legibility scrim so the view ticker + waveform hold against
   bright source photography */
.has-photos .tile::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 34%, transparent 62%);
}
/* lime accent tiles stay lime — now as a wash over the photo
   instead of a flat fill */
.has-photos .feed-grid-lit .tone-lime::after{
  background:
    linear-gradient(155deg, rgba(204,255,0,.58), rgba(140,175,0,.44)),
    linear-gradient(to top, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode:hard-light;
}
.has-photos .feed-grid-base .tone-lime::after{
  background:
    linear-gradient(155deg, rgba(204,255,0,.28), rgba(140,175,0,.20)),
    linear-gradient(to top, rgba(0,0,0,.5), transparent 62%);
}
.tile-type-icon, .tile-meta{ z-index:2; }

.feed-grid-lit .tile.tone-lime{ background:linear-gradient(155deg,var(--lime),#7a9600); }
.feed-grid-lit .tile.tone-flat{ background:#232323; }
.feed-grid-lit .tile.tone-ghost{ background:#2a2a2a; }
.feed-grid-lit .tile{ border-color:rgba(204,255,0,.18); }

.tile-glyph{
  position:absolute; top:8px; right:10px;
  font-family:var(--font-mono);
  font-size:12px; color:rgba(255,255,255,.25);
}
.tile-type-icon{
  position:absolute; top:14px; right:14px;
  font-size:15px; color:rgba(255,255,255,.5);
  line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.feed-grid-lit .tile-type-icon{ color:rgba(255,255,255,.4); }
.feed-grid-lit .tone-lime .tile-type-icon{ color:rgba(10,10,10,.55); }
.feed-grid-lit .tile-glyph{
  color:var(--black);
  animation:flash-glyph 2.4s ease-in-out infinite;
}
@keyframes flash-glyph{ 0%,80%,100%{ opacity:.55; } 90%{ opacity:1; } }
.feed-grid-lit .tone-flat .tile-glyph,
.feed-grid-lit .tone-ghost .tile-glyph{ color:var(--lime); }

.tile-meta{
  position:relative;
  padding:10px 13px 12px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-mono);
}
.tile-views{ font-size:12px; color:rgba(255,255,255,.42); letter-spacing:.02em; }
.feed-grid-lit .tile-views{ color:var(--black); font-weight:700; }
.feed-grid-lit .tone-flat .tile-views,
.feed-grid-lit .tone-ghost .tile-views{ color:var(--lime); }

.feed-grid-base .waveform span{ animation-play-state:paused; background:rgba(255,255,255,.15); }
.feed-grid-lit .waveform span{ background:var(--black); }
.feed-grid-lit .tone-flat .waveform span,
.feed-grid-lit .tone-ghost .waveform span{ background:var(--lime); }

.lens-ring{
  position:absolute; top:0; left:0;
  border-radius:50%;
  border:1px solid rgba(204,255,0,.55);
  box-shadow:0 0 0 1px rgba(204,255,0,.08), 0 0 40px rgba(204,255,0,.12), inset 0 0 40px rgba(204,255,0,.05);
  pointer-events:none;
  z-index:5;
}

.hero-copy{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:40px 32px;
  pointer-events:none;
}
/* ciao-style HUD framing: thin corner brackets around the stage */
.hero-grid-stage::after{
  content:'';
  position:absolute; inset:22px;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(var(--lime),var(--lime)) left top/22px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left top/1px 22px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right top/22px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right top/1px 22px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left bottom/22px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left bottom/1px 22px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom/22px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom/1px 22px no-repeat;
  opacity:.5;
}
.hero-copy .kicker{ pointer-events:auto; margin-bottom:30px; }
.hero-copy h1{
  font-size:clamp(32px, 5vw, 72px);
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 38px;
  max-width:17ch;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}
.hero-copy h1 em{
  font-style:normal;
  color:var(--lime);
}
/* chromatic aberration — RGB fringing that drifts, then snaps.
   Reads as signal interference, not decoration. */
.hero-copy h1{
  animation:rgb-split 7s steps(1, end) infinite;
}
@keyframes rgb-split{
  0%, 88%, 100%{
    text-shadow:0 4px 40px rgba(0,0,0,.6);
  }
  90%{
    text-shadow:0 4px 40px rgba(0,0,0,.6),
                -2px 0 rgba(255,0,84,.55), 2px 0 rgba(0,229,255,.5);
  }
  93%{
    text-shadow:0 4px 40px rgba(0,0,0,.6),
                3px 0 rgba(255,0,84,.45), -3px 0 rgba(0,229,255,.42);
  }
  96%{
    text-shadow:0 4px 40px rgba(0,0,0,.6),
                -1px 0 rgba(255,0,84,.5), 1px 0 rgba(0,229,255,.45);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-copy h1{ animation:none; }
}
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  pointer-events:auto;
}
/* the hero's ghost CTA now sits over photography rather than flat
   black — a hairline in --line disappears against it */
.hero-actions .btn-ghost{
  border-color:rgba(255,255,255,.30);
  background:rgba(10,10,10,.42);
  backdrop-filter:blur(8px);
}
.hero-actions .btn-ghost:hover{
  border-color:var(--lime);
  background:rgba(10,10,10,.62);
}
/* ---------- floating sound-signature chip (hero) ---------- */
.sound-chip{
  position:relative;
  display:flex; align-items:center; gap:14px;
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(10px);
  border:1px solid rgba(204,255,0,.35);
  border-radius:40px;
  padding:10px 20px 10px 10px;
  pointer-events:auto;
  cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.sound-chip:hover{ border-color:var(--lime); box-shadow:0 0 24px rgba(204,255,0,.16); }
.sound-chip:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
/* no audio file resolved — the chip stops claiming it can play */
.sound-chip[data-audio="missing"]{ opacity:.55; cursor:default; }
.sound-chip .chip-play{
  width:34px; height:34px; border-radius:50%;
  background:var(--lime); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.sound-chip .chip-eq{
  display:flex; align-items:flex-end; gap:2.5px; height:18px;
}
.sound-chip .chip-eq span{
  width:2.5px; background:var(--lime); border-radius:1px;
  animation:eq 1s ease-in-out infinite;
  animation-play-state:paused;          /* only moves while audio plays */
  transform:scaleY(.25);
}
.sound-chip.playing .chip-eq span{ animation-play-state:running; }
.sound-chip .chip-eq span:nth-child(1){ animation-delay:-.9s; }
.sound-chip .chip-eq span:nth-child(2){ animation-delay:-.6s; }
.sound-chip .chip-eq span:nth-child(3){ animation-delay:-.3s; }
.sound-chip .chip-eq span:nth-child(4){ animation-delay:-.75s; }
.sound-chip .chip-eq span:nth-child(5){ animation-delay:-.15s; }
@keyframes eq{
  0%,100%{ transform:scaleY(.25); }
  50%{ transform:scaleY(1); }
}
.sound-chip .chip-text{ display:flex; flex-direction:column; line-height:1.25; }
.sound-chip .chip-label{ font-family:var(--font-mono); font-size:10px; color:var(--lime); letter-spacing:.06em; text-transform:uppercase; }
.sound-chip .chip-track{ font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.75); }
@media (max-width:640px){
  .sound-chip{ padding:8px 16px 8px 8px; gap:10px; }
  .sound-chip .chip-track{ display:none; }
}

/* the centred sound chip owns bottom-centre now */
.hero-scroll-hint{ display:none; }
.hero-scroll-hint-unused{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; z-index:6;
}
.hero-scroll-hint::after{
  content:''; width:1px; height:28px; background:linear-gradient(var(--lime), transparent);
  animation:scrolldown 1.8s ease-in-out infinite;
}
@keyframes scrolldown{ 0%{ opacity:0; transform:scaleY(0); transform-origin:top;} 40%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(1); transform-origin:bottom;} }

@media (max-width:640px){
  .hero-grid-stage{ height:calc(100vh - var(--nav-h, 76px)); }
}

/* ---------- stat block v2 — icon cards with animated bars ---------- */
.stat-block-v2{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.stat-v2{
  background:var(--black); padding:30px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.stat-v2 .stat-icon{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--lime); color:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:15px;
}
.stat-v2 .num{
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(30px,3.6vw,44px); color:var(--white); line-height:1;
}
.stat-v2 .lbl{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--grey); text-transform:uppercase;
}
.stat-v2 .stat-bars{ display:flex; align-items:flex-end; gap:3px; height:20px; margin-top:2px; }
.stat-v2 .stat-bars span{
  flex:1; background:var(--lime); opacity:.85; border-radius:1px 1px 0 0;
  animation:barpulse 1.8s ease-in-out infinite;
}
@keyframes barpulse{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
@media (max-width:760px){
  .stat-block-v2{ grid-template-columns:1fr; }
}

/* ---------- proof sequence (Shift / Problem / Why) ---------- */
.proof-seq{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.proof-seq::before{
  content:'';
  position:absolute; top:24px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  z-index:0;
}
.proof-panel{
  background:var(--black-card);
  border:1px solid var(--line);
  padding:34px 26px;
  position:relative;
  z-index:1;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.proof-panel:hover{ border-color:var(--lime); transform:translateY(-4px); }
.proof-panel .step-badge{
  width:48px; height:48px; border-radius:50%;
  background:var(--black); border:1px solid var(--lime); color:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:18px;
  margin-bottom:22px;
}
.proof-panel .step-no{
  font-family:var(--font-mono);
  font-size:11px; color:var(--lime); letter-spacing:.12em; text-transform:uppercase;
  display:block; margin-bottom:10px;
}
.proof-panel h3{
  font-family:var(--font-display); font-weight:700;
  font-size:21px; margin:0 0 14px; line-height:1.25;
}
.proof-panel p{ color:var(--grey); font-size:14.5px; margin:0; }
@media (max-width:900px){
  .proof-seq{ grid-template-columns:1fr; }
  .proof-seq::before{ display:none; }
}

/* ---------- pillar preview (Studio/Sounds/Network/Index teaser) ---------- */
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pillar{
  border:1px solid var(--line); padding:26px 22px; position:relative;
  transition:border-color .25s var(--ease);
}
.pillar:hover{ border-color:var(--lime); }
.pillar .p-no{ font-family:var(--font-mono); font-size:11px; color:var(--grey); }
.pillar h4{ font-family:var(--font-display); font-weight:700; font-size:17px; margin:10px 0 8px; }
.pillar p{ font-size:13.5px; color:var(--grey); margin:0; }
@media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillar-grid{ grid-template-columns:1fr; } }

/* ============================================================
   The stave — four pillars written as one bar of music
   Sits on a receding 3D plane so the notation reads as an
   object in space, not a flat diagram.
   ============================================================ */
.stave{
  perspective:1100px;
  margin:0 0 8px;
  padding:8px 0 4px;
}
.stave-svg{
  display:block;
  width:100%; height:auto;
  overflow:visible;
  transform:rotateX(14deg) scale(.98);
  transform-style:preserve-3d;
}

.staff-lines line{
  stroke:rgba(255,255,255,.16);
  stroke-width:1.5;
}
.stave-clef{
  fill:var(--lime);
  font-size:96px;
  font-family:var(--font-display);
  font-style:italic;
  opacity:.9;
}
.stave-time{
  fill:rgba(255,255,255,.42);
  font-family:var(--font-mono);
  font-size:46px;
  font-weight:700;
}

/* the beam draws itself left to right, then the notes land */
.stave-beam{
  fill:var(--lime);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.1s var(--ease);
  filter:drop-shadow(0 6px 18px rgba(204,255,0,.28));
}
.stave.in .stave-beam{ transform:scaleX(1); }

.stave-note{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--rise-delay, 0ms);
}
.stave.in .stave-note{ opacity:1; transform:none; }

.stave-note .stem{ stroke:var(--lime); stroke-width:5; }
/* hollow = written but not yet sounding */
.stave-note .head{
  fill:none;
  stroke:var(--lime);
  stroke-width:5;
}
/* filled = playing today */
.stave-note.is-live .head{
  fill:var(--lime);
  filter:drop-shadow(0 0 20px rgba(204,255,0,.5));
}

/* pillar cards line up under their own notehead */
.pillar-grid{ margin-top:4px; }

@media (max-width:900px){
  /* the bar only reads at width — below that it becomes a smear */
  .stave{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .stave-beam{ transform:none; transition:none; }
  .stave-note{ opacity:1; transform:none; transition:none; }
  .stave-svg{ transform:none; }
}

/* ============================================================
   THE ATTENTION GAP — a search that returns nothing
   ============================================================ */
.searchbox{
  max-width:660px;
  margin:0 0 44px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(18,18,18,.7);
  backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.search-bar{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:15px;
}
.search-icon{ color:var(--grey); font-size:19px; }
.search-typed{ color:var(--white); white-space:pre; }
.search-caret{
  width:9px; height:18px; background:var(--lime);
  animation:caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }

.search-results{ padding:20px; min-height:132px; position:relative; }
.search-skeleton{ display:flex; flex-direction:column; gap:12px; }
.search-skeleton span{
  height:16px; border-radius:3px;
  background:linear-gradient(90deg, #1d1d1d, #262626, #1d1d1d);
  background-size:220% 100%;
  animation:skel 1.2s linear infinite;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.searchbox.searching .search-skeleton span{ opacity:1; }
.search-skeleton span:nth-child(1){ width:82%; }
.search-skeleton span:nth-child(2){ width:64%; }
.search-skeleton span:nth-child(3){ width:71%; }
@keyframes skel{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

.search-empty{
  position:absolute; inset:20px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:14px; color:var(--grey);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  margin:0;
}
.search-empty strong{
  font-size:34px; color:var(--lime); line-height:1;
  font-weight:700;
}
.searchbox.empty .search-empty{ opacity:1; transform:none; }
.searchbox.empty .search-skeleton span{ opacity:0; }

.gap-note{
  max-width:600px; font-size:16px; color:var(--grey); margin:0;
}
.gap-note strong{ color:var(--white); }

/* ============================================================
   THE DATA — sequential single-hue charts, labels on every bar
   ============================================================ */
.chart-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-bottom:20px;
}
.chart-card{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--black-card);
  padding:24px 22px 18px;
}
.chart-card figcaption{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.chart-title{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--white);
}
.chart-sub{ font-family:var(--font-mono); font-size:11px; color:var(--grey); }
.chart{ width:100%; height:auto; display:block; }
.chart .grid line{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.chart .axis{ stroke:rgba(255,255,255,.22); stroke-width:1; }
.chart .y-ticks text, .chart .x-ticks text{
  fill:var(--grey); font-family:var(--font-mono); font-size:11px; text-anchor:middle;
}
.chart .y-ticks text{ text-anchor:end; }
.chart .h-labels text{
  fill:var(--grey); font-family:var(--font-mono); font-size:11px; text-anchor:end;
}
/* one hue, stepped by magnitude — never two categorical colours */
.chart .bar{ fill:#7F9E00; }
.chart .bar.live{ fill:var(--lime); }
.chart .bar-labels text{
  fill:var(--white); font-family:var(--font-mono); font-size:13px;
  font-weight:700; text-anchor:middle;
}
.chart .chart-gapnote{
  fill:#6a6a6a; font-family:var(--font-mono); font-size:9px; text-anchor:middle;
}
.chart-src{
  font-family:var(--font-mono); font-size:10px; color:#6a6a6a;
  margin:12px 0 0; letter-spacing:.03em;
}

.figure-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.figure-tile{
  border:1px solid var(--line);
  border-top:2px solid #7F9E00;
  border-radius:var(--radius);
  padding:26px 22px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--black-card);
}
.figure-tile.is-ours{ border-top-color:var(--lime); }
.fig-n{
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(30px,3.4vw,44px); color:var(--lime); line-height:1;
}
.fig-l{ font-size:14.5px; color:var(--grey); }
.fig-l em{ color:var(--white); font-style:normal; }
.fig-s{
  font-family:var(--font-mono); font-size:10px; color:#6a6a6a;
  letter-spacing:.04em; margin-top:auto;
}

@media (max-width:900px){
  .chart-row, .figure-row{ grid-template-columns:1fr; }
}

/* ============================================================
   THE FLOW — scattered image boxes at depth
   ============================================================ */
.flow-scene{ overflow:hidden; }
.flow-field{
  position:relative;
  height:520px;
  margin-top:-20px;
  perspective:1000px;
}
.flow-box{
  position:absolute;
  border-radius:var(--radius);
  background-image:var(--bg);
  background-size:300% 400%;
  background-position:var(--bp);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  filter:blur(var(--blur,0px)) grayscale(var(--gs,0));
  opacity:var(--op,1);
  will-change:transform;
}
@media (max-width:760px){
  .flow-field{ height:360px; }
}

/* ============================================================
   THE LOOP, PLAYING — 3D keyboard running a repeating phrase
   ============================================================ */
.piano{
  perspective:900px;
  perspective-origin:50% 30%;
  padding:20px 24px 80px;
  display:flex; justify-content:center;
}
.piano-keys{
  position:relative;
  display:flex;
  gap:4px;
  transform:rotateX(34deg) rotateZ(-1deg);
  transform-style:preserve-3d;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));
}
.key{
  position:relative;
  transform-origin:top center;
  border-radius:0 0 4px 4px;
  animation:keypress var(--dur,3.2s) var(--ease) infinite;
  animation-delay:var(--delay,0s);
}
.key-white{
  width:clamp(26px,3.4vw,50px);
  height:clamp(120px,15vw,210px);
  background:linear-gradient(180deg,#f4f4f4,#cfcfcf 72%,#a9a9a9);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.22);
}
.key-black{
  position:absolute; top:0;
  width:clamp(16px,2.1vw,30px);
  height:clamp(74px,9.4vw,132px);
  background:linear-gradient(180deg,#242424,#0c0c0c);
  box-shadow:inset 0 -6px 10px rgba(255,255,255,.06), 0 6px 10px rgba(0,0,0,.6);
  z-index:2;
}
@keyframes keypress{
  0%, 74%, 100%{ transform:rotateX(0deg); filter:brightness(1); }
  78%{ transform:rotateX(9deg); filter:brightness(1.6) saturate(1.4); }
  88%{ transform:rotateX(0deg); filter:brightness(1); }
}
/* the lit key throws lime, not white — it's a LOOOP note sounding */
.key.is-lit{ animation-name:keypress-lit; }
@keyframes keypress-lit{
  0%, 74%, 100%{ transform:rotateX(0deg); box-shadow:inset 0 -8px 12px rgba(0,0,0,.22); }
  78%{
    transform:rotateX(9deg);
    box-shadow:inset 0 -8px 12px rgba(0,0,0,.22), 0 0 34px 6px rgba(204,255,0,.75);
    background:linear-gradient(180deg,var(--lime),#9cc200);
  }
  88%{ transform:rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .key{ animation:none; }
  .search-caret{ animation:none; }
  .search-skeleton span{ animation:none; }
}

/* ---------- piano geometry: black keys straddle the whites ---------- */
.piano-keys{
  --kw: clamp(26px, 3.4vw, 50px);
  --kb: clamp(16px, 2.1vw, 30px);
  --kgap: 4px;
}
.key-white{ width:var(--kw); }
.key-black{
  width:var(--kb);
  left:calc((var(--i) + 1) * (var(--kw) + var(--kgap)) - (var(--kb) / 2) - (var(--kgap) / 2));
}
/* press lands at the START of the cycle, so animation-delay places
   each note at its own beat in the bar */
@keyframes keypress{
  0%   { transform:rotateX(0deg); }
  6%   { transform:rotateX(10deg); }
  18%  { transform:rotateX(0deg); }
  100% { transform:rotateX(0deg); }
}
@keyframes keypress-lit{
  0%{
    transform:rotateX(0deg);
    box-shadow:inset 0 -8px 12px rgba(0,0,0,.22);
    background:linear-gradient(180deg,#f4f4f4,#cfcfcf 72%,#a9a9a9);
  }
  6%{
    transform:rotateX(10deg);
    box-shadow:inset 0 -8px 12px rgba(0,0,0,.22), 0 0 38px 8px rgba(204,255,0,.8);
    background:linear-gradient(180deg,var(--lime),#9cc200);
  }
  26%{
    transform:rotateX(0deg);
    box-shadow:inset 0 -8px 12px rgba(0,0,0,.22);
    background:linear-gradient(180deg,#f4f4f4,#cfcfcf 72%,#a9a9a9);
  }
  100%{
    transform:rotateX(0deg);
    background:linear-gradient(180deg,#f4f4f4,#cfcfcf 72%,#a9a9a9);
  }
}

/* horizontal-bar values sit clear of the bar end, not on top of it */
.chart .bar-labels text.outside{ text-anchor:start; }

/* ============================================================
   Layout rhythm — stop every section stacking hard left
   ============================================================ */
.section-head.center{
  align-items:center; text-align:center;
  margin-left:auto; margin-right:auto;
}
.section-head.center h2{ border-bottom-color:var(--lime); }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.wrap.split{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:center;
}
.wrap.split .section-head{ margin-bottom:0; }
@media (max-width:980px){
  .wrap.split{ grid-template-columns:1fr; gap:34px; }
}

/* a section that carries an image behind it */
.has-bg{ position:relative; }
.has-bg::before{
  content:'';
  position:absolute; inset:0;
  background-image:var(--scene-bg);
  background-size:cover;
  background-position:center;
  filter:grayscale(1) brightness(.22) blur(2px);
  opacity:.5;
  z-index:0;
}
.has-bg::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 10%, var(--black) 78%);
  z-index:0;
}
.has-bg > .wrap{ position:relative; z-index:1; }

/* ============================================================
   3D musical notes — one per reason, popping in on reveal
   ============================================================ */
.proof-panel{ perspective:900px; }
.note3d{
  position:relative;
  width:132px; height:150px;
  margin:0 0 26px;
  transform-style:preserve-3d;
  animation:note-float 7s ease-in-out infinite;
}
.proof-panel:nth-child(2) .note3d{ animation-delay:-2.3s; }
.proof-panel:nth-child(3) .note3d{ animation-delay:-4.6s; }
@keyframes note-float{
  0%,100%{ transform:rotateY(-16deg) rotateX(6deg) translateY(0); }
  50%    { transform:rotateY(16deg)  rotateX(-4deg) translateY(-12px); }
}
.note-svg{
  width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(204,255,0,.35));
}
.n-head{ fill:var(--lime); }
.n-head.hollow{ fill:none; stroke:var(--lime); stroke-width:7; }
.n-inner{ fill:var(--black); }
.n-stem{ stroke:var(--lime); stroke-width:7; stroke-linecap:round; }
.n-flag, .n-beam{ fill:var(--lime); }
.n-inf{
  fill:var(--lime); font-size:44px; font-family:var(--font-display);
  font-style:italic; text-anchor:middle; opacity:.75;
}
.note-shadow{
  position:absolute; left:50%; bottom:-14px;
  width:80px; height:12px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(204,255,0,.28), transparent 70%);
  filter:blur(4px);
}

/* the reason pops rather than slides */
.proof-panel.rise{ transform:translateY(26px) scale(.9); }
.proof-panel.rise.in{
  transform:none;
  transition:opacity .5s var(--ease), transform .7s cubic-bezier(.2,1.5,.4,1);
}

/* ============================================================
   WHY NOW — sticky column journey
   Techniques: sticky column journey · scrub-linked note morph ·
   bleed numeral (depth-0) · masked line draw on the rail.
   Deliberately card-free: borders and equal boxes are the
   template tell this section exists to avoid.
   ============================================================ */
.why-scene{ position:relative; }
.why-grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:70px;
  align-items:start;
}

/* ---- left: the pinned stage ---- */
.why-stage{
  position:sticky;
  top:calc(var(--nav-h, 76px) + 12vh);
  height:56vh;
  display:flex; align-items:center; justify-content:center;
}
.why-numeral{
  position:absolute; inset:auto;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-weight:900; font-style:italic;
  font-size:clamp(180px, 22vw, 340px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.07);
  user-select:none;
  transition:opacity .4s var(--ease);
}
.why-glow{
  position:absolute; left:50%; top:50%;
  width:min(38vw,420px); height:min(38vw,420px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(204,255,0,.16), transparent 66%);
  filter:blur(28px);
  pointer-events:none;
}
.why-notes{
  position:relative;
  width:min(24vw, 210px);
  aspect-ratio:120/150;
}
.why-note{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transform:scale(.7) rotateY(-40deg);
  transition:opacity .55s var(--ease), transform .65s var(--ease);
}
.why-note.is-on{
  opacity:1;
  transform:scale(1) rotateY(0deg);
  animation:note-float 7s ease-in-out infinite;
}

/* progress rail — draws as the journey advances */
.why-rail{
  position:absolute; right:-4px; top:12%;
  width:2px; height:76%;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}
.why-rail i{
  position:absolute; inset:0 0 auto 0;
  height:100%;
  background:linear-gradient(var(--lime), rgba(204,255,0,.25));
  transform-origin:top;
  transform:scaleY(var(--progress, 0));
  transition:transform .35s var(--ease);
}

/* ---- right: reasons travelling past ---- */
.why-steps{ padding:6vh 0 10vh; }
.why-step{
  min-height:62vh;
  display:flex; flex-direction:column; justify-content:center;
  max-width:38ch;
  opacity:.22;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.why-step.is-active{ opacity:1; transform:none; }
.why-kick{
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime);
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px;
}
.why-kick::before{
  content:''; width:34px; height:1px; background:var(--lime);
  transition:width .5s var(--ease);
}
.why-step.is-active .why-kick::before{ width:64px; }
.why-step h2{
  font-size:clamp(26px, 3.1vw, 42px);
  line-height:1.04;
  margin:0 0 20px;
  border:none; padding:0;
  text-transform:none;          /* sentence case reads as editorial, not a banner */
}
.why-step p{
  color:var(--grey);
  font-size:16.5px;
  margin:0;
  max-width:34ch;
}

@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; gap:0; }
  .why-stage{ position:relative; top:auto; height:230px; margin-bottom:10px; }
  .why-numeral{ font-size:150px; }
  .why-rail{ display:none; }
  .why-step{ min-height:auto; padding:34px 0; opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .why-note.is-on{ animation:none; }
  .why-step{ opacity:1; transform:none; }
}

/* pillars lose their card chrome too — same tell, same fix */
.pillar{
  border:none;
  border-top:1px solid var(--line);
  padding:24px 0 0;
  transition:border-color .3s var(--ease);
}
.pillar:hover{ border-color:var(--lime); }

/* ============================================================
   Gate atmosphere — vignette, grain, corner framing
   The starfield is drawn in WebGL; these are the flat layers
   that sit over it and stop the screen reading as plain black.
   ============================================================ */
.gate-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, transparent 22%, rgba(0,0,0,.55) 62%, #000 92%);
}
.gate-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.14; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.gate-frame{
  position:absolute; inset:26px; z-index:2; pointer-events:none;
  background:
    linear-gradient(var(--lime),var(--lime)) left top/26px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left top/1px 26px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right top/26px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right top/1px 26px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left bottom/26px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left bottom/1px 26px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom/26px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom/1px 26px no-repeat;
  opacity:.45;
}
.gate-meta{
  position:absolute; z-index:2; pointer-events:none;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}
.gate-meta.tl{ top:44px; left:46px; color:var(--lime); }
.gate-meta.bl{ bottom:44px; left:46px; }
.gate-meta.br{ bottom:44px; right:46px; }
.gate-meta .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--lime); margin-right:8px; vertical-align:1px;
  animation:hud-pulse 2s ease-in-out infinite;
}
@media (max-width:640px){
  .gate-meta.bl, .gate-meta.br{ display:none; }
  .gate-frame{ inset:16px; }
}
/* keep the entry controls above every atmosphere layer */
.gate-inner{ z-index:3; }

/* ============================================================
   TICKER — a moving band between movements
   ============================================================ */
.ticker{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  margin:40px 0 0;
  background:linear-gradient(180deg, rgba(204,255,0,.04), transparent);
}
.ticker-track{
  display:flex; align-items:center; gap:38px;
  width:max-content;
  animation:tick 34s linear infinite;
}
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-track span{
  font-family:var(--font-display); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(20px,2.4vw,34px);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.35);
  white-space:nowrap;
}
.ticker-track span.hot{
  color:var(--lime); -webkit-text-stroke:0;
}
.ticker-track b{ color:var(--lime); font-size:18px; }

/* ============================================================
   SCOREBOARD — no cards, no photos. Numbers doing the work.
   ============================================================ */
.score{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.score-cell{
  position:relative;
  padding:44px 34px 38px;
  display:flex; flex-direction:column; gap:12px;
}
.score-cell + .score-cell::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%;
  width:1px; background:var(--line);
}
.score-n{
  font-family:var(--font-display);
  font-weight:900; font-style:italic;
  font-size:clamp(48px, 6.4vw, 92px);
  line-height:.9;
  letter-spacing:-.035em;
  color:var(--white);
}
.score-cell:nth-child(2) .score-n{ color:var(--lime); }
.score-l{
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.score-eq{ display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:6px; }
.score-eq i{
  flex:1; height:100%;
  background:linear-gradient(to top, var(--lime), rgba(204,255,0,.25));
  transform-origin:bottom; transform:scaleY(.18);
  animation:sc-eq 1.6s ease-in-out infinite;
}
.score-cell:nth-child(2) .score-eq i{ animation-duration:1.15s; }
.score-cell:nth-child(3) .score-eq i{ animation-duration:2.1s; }
.score-eq i:nth-child(2n){ animation-delay:-.4s; }
.score-eq i:nth-child(3n){ animation-delay:-.85s; }
.score-eq i:nth-child(5n){ animation-delay:-1.2s; }
@keyframes sc-eq{ 0%,100%{ transform:scaleY(.18); } 50%{ transform:scaleY(1); } }
@media (max-width:820px){
  .score{ grid-template-columns:1fr; }
  .score-cell + .score-cell::before{ left:34px; right:34px; top:0; bottom:auto; width:auto; height:1px; }
}

/* ============================================================
   THE FAN — one sound branching into every surface it ships on
   ============================================================ */
.fan{ padding:8px 0 4px; }
.fan-svg{ width:100%; height:230px; display:block; overflow:visible; }
.fan-svg .seed{ stroke:var(--lime); stroke-width:5; stroke-linecap:round; }
.fan-svg .branch{
  fill:none; stroke:rgba(204,255,0,.42); stroke-width:1.6;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.4s var(--ease);
  transition-delay:var(--d,0ms);
}
.fan.in .fan-svg .branch{ stroke-dashoffset:0; }
.fan-svg .cap{
  fill:var(--lime);
  opacity:0; transition:opacity .5s var(--ease);
  transition-delay:calc(var(--d,0ms) + 900ms);
}
.fan.in .fan-svg .cap{ opacity:1; }
.fan-svg .pulse{
  fill:none; stroke:var(--lime); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:14 999;
  animation:fan-pulse 2.6s linear infinite;
  animation-delay:var(--d,0ms);
  opacity:.9;
}
@keyframes fan-pulse{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-1000; }
}
@media (max-width:760px){ .fan-svg{ height:150px; } }
@media (prefers-reduced-motion: reduce){
  .score-eq i{ animation:none; transform:scaleY(.5); }
  .fan-svg .branch{ stroke-dashoffset:0; transition:none; }
  .fan-svg .cap{ opacity:1; }
  .fan-svg .pulse{ animation:none; opacity:0; }
}

/* fan: labelled surfaces at the branch ends */
.fan-svg{ height:300px; }
.fan-svg .branch.key{ stroke:rgba(204,255,0,.75); stroke-width:2.2; }
.fan-svg .cap.key{ filter:drop-shadow(0 0 10px rgba(204,255,0,.7)); }
.fan-svg .fan-label{
  fill:var(--white);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  opacity:0; transition:opacity .5s var(--ease);
  transition-delay:calc(var(--d,0ms) + 900ms);
}
.fan.in .fan-svg .fan-label{ opacity:1; }
@media (max-width:760px){
  .fan-svg{ height:210px; }
  .fan-svg .fan-label{ font-size:11px; }
}
/* uniform scaling — a stretched viewBox skews the labels */
.fan-svg{ height:auto; }
@media (max-width:760px){ .fan-svg{ height:auto; } }

/* ============================================================
   POSTFIELD — the surfaces, at depth
   Real photography, six depth planes, parallax by plane.
   ============================================================ */
.postfield{
  position:relative;
  height:660px;
  margin-top:10px;
}
.post{
  position:absolute;
  border-radius:8px;
  overflow:hidden;
  background:#111 var(--bg) center/cover no-repeat;
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  filter:blur(var(--blur,0px)) grayscale(var(--gs,0)) brightness(var(--br,1));
  opacity:var(--op,1);
  will-change:transform;
  transition:filter .5s var(--ease);
}
.post::after{                       /* feed chrome, kept faint */
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 46%);
}
.post .p-play{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:11px; color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.post .p-views{
  position:absolute; left:11px; bottom:10px; z-index:2;
  font-family:var(--font-mono); font-size:10.5px;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 5px rgba(0,0,0,.9);
}
/* the nearest plane carries the brand edge */
.post.near{
  box-shadow:0 30px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(204,255,0,.35);
}
.post.near::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(204,255,0,.10), transparent 52%);
}
@media (max-width:900px){
  .postfield{ height:420px; }
  .post .p-views{ display:none; }
}

/* ============================================================
   SHIPS STAGE — posts drift behind, the signal reads on top
   ============================================================ */
.ships-stage{
  position:relative;
  min-height:620px;
  display:flex; align-items:center;
  overflow:hidden;
}
.ships-stage .postfield{
  position:absolute; inset:0;
  height:auto;
  margin:0;
  z-index:0;
}
/* holds the fan clear of the photography underneath it */
.ships-stage::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 62% 46% at 50% 50%, rgba(10,10,10,.9), rgba(10,10,10,.35) 62%, transparent 82%),
    linear-gradient(90deg, var(--black), transparent 14%, transparent 86%, var(--black));
}
.ships-stage .fan{
  position:relative; z-index:2;
  width:100%;
  padding:0;
}

/* the post itself only carries position + scroll parallax; the inner
   layer does the drifting, so the two transforms never fight */
.post{ background:none; box-shadow:none; filter:none; opacity:1; overflow:visible; }
.post::after, .post::before{ content:none; }
.post-in{
  position:absolute; inset:0;
  border-radius:8px;
  overflow:hidden;
  background:#111 var(--bg) center/cover no-repeat;
  box-shadow:0 26px 60px rgba(0,0,0,.75);
  filter:blur(var(--blur,0px)) grayscale(var(--gs,0)) brightness(var(--br,1));
  opacity:var(--op,1);
  animation:osc var(--od,13s) ease-in-out infinite alternate;
  animation-delay:var(--odd,0s);
  will-change:transform;
}
.post-in::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent 48%);
}
.post.near .post-in{
  box-shadow:0 30px 70px rgba(0,0,0,.8), 0 0 0 1px rgba(204,255,0,.28);
}
@keyframes osc{
  0%   { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  100% { transform:translate3d(var(--ox,14px), var(--oy,-20px), 0)
                   rotate(var(--or,1.2deg)) scale(var(--os,1.04)); }
}
@media (max-width:900px){
  .ships-stage{ min-height:420px; }
}
@media (prefers-reduced-motion: reduce){
  .post-in{ animation:none; }
}

/* ---------- intro: no frame, no corner boxes — just the field ---------- */
.gate-frame{ display:none; }
.gate-meta{ font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.32); }
.gate-meta.tl{ color:rgba(204,255,0,.75); }
/* deeper falloff so the wordmark sits in real space */
.gate-vignette{
  background:radial-gradient(ellipse at 50% 46%, transparent 16%, rgba(0,0,0,.62) 56%, #000 88%);
}
.gate-grain{ opacity:.10; }

/* ---------- ships: keep the signal readable over the photography ---------- */
.ships-stage .post-in{ filter:blur(var(--blur,0px)) grayscale(var(--gs,0)) brightness(calc(var(--br,1) * .72)); }
.fan-svg .fan-label{
  paint-order:stroke fill;
  stroke:rgba(10,10,10,.85);
  stroke-width:4px;
  stroke-linejoin:round;
}
.fan-svg .cap{ filter:drop-shadow(0 0 6px rgba(10,10,10,.9)); }

/* ships: the signal owns the section — no photography competing with it */
.ships-stage{ min-height:520px; }
.ships-stage::after{
  background:radial-gradient(ellipse 70% 55% at 50% 50%, transparent 40%, rgba(10,10,10,.6) 88%);
}
.ships-stage .fan-svg{ height:auto; }
.ships-stage .post-in{ display:none; }

/* ============================================================
   THE HELIX — one sound twisting through every channel
   Two strands out of phase, rungs between them, pulses running
   the length of it. The channels sit on the strand itself.
   ============================================================ */
.helix{ width:100%; padding:0; }
.helix-svg{ width:100%; height:auto; display:block; overflow:visible; }
.helix-rung{ stroke:rgba(204,255,0,.20); stroke-width:1.6; }
.helix-node{ fill:var(--lime); }
.helix-node.back{ fill:rgba(204,255,0,.34); }
.helix-spine{
  fill:none; stroke:rgba(204,255,0,.5); stroke-width:2;
}
.helix-seed{ stroke:var(--lime); stroke-width:5; stroke-linecap:round; fill:none; }

.chan{ cursor:default; }
.chan-line{ stroke:rgba(204,255,0,.55); stroke-width:1.4; }
.chan-dot{ fill:var(--lime); filter:drop-shadow(0 0 12px rgba(204,255,0,.9)); }
.chan-badge{
  fill:rgba(10,10,10,.92);
  stroke:rgba(204,255,0,.45);
  stroke-width:1.2;
}
.chan-glyph{ fill:none; stroke:var(--lime); stroke-width:2; stroke-linejoin:round; }
.chan-glyph.solid{ fill:var(--lime); stroke:none; }
.chan-label{
  fill:var(--white);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em;
  paint-order:stroke fill; stroke:rgba(10,10,10,.9); stroke-width:4px; stroke-linejoin:round;
}
.chan-sub{
  fill:var(--grey);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase;
}
.chan{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.helix.in .chan{ opacity:1; transform:none; transition-delay:var(--d,0ms); }
@media (max-width:820px){
  .chan-label{ font-size:11px; }
  .chan-sub{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .chan{ opacity:1; transform:none; }
}

/* the gate lets itself out — the button becomes a progress bar you
   can still click to skip ahead */
.gate.auto .gate-plain{
  position:relative;
  overflow:hidden;
  background:transparent;
  color:var(--lime);
  border:1px solid rgba(204,255,0,.45);
}
.gate.auto .gate-plain::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:100%;
  background:var(--lime);
  transform-origin:left;
  transform:scaleX(0);
  animation:gate-fill 3.2s linear forwards;
  z-index:-1;
}
@keyframes gate-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.gate.auto .gate-plain:hover{ color:var(--black); background:var(--lime); }
@media (prefers-reduced-motion: reduce){
  .gate.auto .gate-plain::after{ animation:none; }
}

/* ---------- ships: a scene behind the strand, slowly breathing ---------- */
.ships-stage{ min-height:600px; }
.ships-bg{
  position:absolute; inset:-8%;
  z-index:-1;
  background:url('assets/scene/ships.webp') center/cover no-repeat;
  filter:grayscale(1) brightness(.30) contrast(1.1);
  opacity:.55;
  animation:ships-drift 34s ease-in-out infinite alternate;
}
@keyframes ships-drift{
  from{ transform:scale(1.06) translate3d(-1.4%, 1%, 0); }
  to  { transform:scale(1.16) translate3d(1.6%, -1.4%, 0); }
}
/* lime haze sweeping across the scene, so the section is never still */
.ships-glow{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 42% 58% at 50% 50%, rgba(204,255,0,.16), transparent 70%);
  animation:ships-sweep 19s ease-in-out infinite alternate;
}
@keyframes ships-sweep{
  from{ transform:translateX(-24%) scale(.9); opacity:.55; }
  to  { transform:translateX(24%) scale(1.15); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ships-bg, .ships-glow{ animation:none; }
}
/* the gate's pre-WebGL state is the real mark, not a typeface stand-in */
img.gate-word{
  width:min(62vw, 780px); height:auto;
  display:block;
}

/* the countdown reads as a progress rule under the label, not a fill
   that swallows it */
.gate.auto .gate-plain{
  background:transparent;
  color:var(--lime);
  border:1px solid rgba(204,255,0,.45);
}
.gate.auto .gate-plain::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; top:auto;
  width:auto; height:2px;
  background:var(--lime);
  transform-origin:left;
  transform:scaleX(0);
  z-index:1;
}
/* the bar only runs once the hold actually begins, and for its length */
.gate.holding .gate-plain::after{
  animation:gate-fill var(--hold, 2800ms) linear forwards;
}
.gate.auto .gate-plain:hover{ background:var(--lime); color:var(--black); }
/* the mark needs room to breathe above the control */
.gate-inner{ gap:44px; }
img.gate-word{ width:min(56vw, 700px); }

/* the intro completes the lockup: mark, then the tagline in lime —
   letter-spacing matched to the supplied artwork */
.gate-tag{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(10px, 1.5vw, 15px);
  letter-spacing:.62em;
  text-indent:.62em;              /* keeps the tracked text optically centred */
  text-transform:uppercase;
  color:var(--lime);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:.7s;
}
.gate .gate-tag{ opacity:1; transform:none; transition-delay:.35s; }
.gate-inner{ gap:26px; }
.gate-actions{ margin-top:22px; }
/* particles spread past the image box — give the tagline clearance */
.gate-inner{ gap:56px; }
.gate-tag{ margin-top:-6px; }
.gate-actions{ margin-top:8px; }