/* ============================================================
   Facility spine (SPEC_V2 §5) — the hero as one continuous flight.
   Two modes:
     .spine          static: intro over the RTX poster, cells as a list
     .spine.is-live  JS + WebGL + motion OK: sticky canvas, scroll = camera
   ============================================================ */

.hero.spine {
  display:block; min-height:0; padding:0;
  overflow:visible;                 /* overflow:hidden would break position:sticky */
}

/* ---- stage: poster / canvas / clip stacked ---- */
.spine-stage {
  position:relative; height:100vh; height:100svh; overflow:hidden;
  background:var(--bg);
}
.spine-poster, .spine-canvas, .spine-clip {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.spine-canvas { opacity:0; transition:opacity .6s ease; background:var(--bg); }
.spine-clip   { opacity:0; transition:opacity .45s ease; pointer-events:none; }
.spine-poster { transition:opacity .8s ease; }
.spine-scrim {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,13,16,.78) 0%, rgba(11,13,16,.35) 38%, rgba(11,13,16,0) 62%),
    linear-gradient(180deg, rgba(11,13,16,.35) 0%, rgba(11,13,16,0) 22%, rgba(11,13,16,0) 78%, rgba(11,13,16,.6) 100%);
}
.spine-hud { display:none; }

/* ---- static mode (default) ---- */
.spine-track { position:relative; z-index:1; }
.seg-intro {
  margin-top:-100vh; margin-top:-100svh;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; padding-top:var(--nav-h); padding-bottom:80px;
}
.spine-hint {
  margin-top:28px; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.spine-hint::before { content:"↓"; color:var(--accent); display:inline-block; margin-right:.7em; }
.spine-hint { display:none; }                 /* only where the flight can run */
.spine.is-live .spine-hint, .spine.is-prelive .spine-hint {
  display:inline-flex; align-items:center; padding:7px 12px;
  background:rgba(11,13,16,.62); border:1px solid var(--border); border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#C3C8CF;
}
.spine-hint[data-state="off"] { display:none !important; }

/* prelive: the twin is loading, the page is still the list. The intro sits
   exactly where the live layout puts it, so switching modes moves nothing. */
.spine.is-prelive .seg-intro { align-items:flex-start; padding-top:calc(var(--nav-h) + 16vh); }

/* hint = the twin's progress while it loads, then the scroll cue */
.spine-hint-text { display:inline-block; }
.spine-load { display:none; align-items:center; gap:12px; }
.spine-hint[data-state="loading"]::before { content:none; }
.spine-hint[data-state="loading"] .spine-hint-text { display:none; }
.spine-hint[data-state="loading"] .spine-load { display:inline-flex; }
.spine-load-bar { position:relative; width:112px; height:2px; background:rgba(255,255,255,.16);
  border-radius:1px; overflow:hidden; }
.spine-load-bar i { position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s linear; }
.spine-load-mb { color:var(--muted); font-variant-numeric:tabular-nums; min-width:14ch; text-align:right; }
.spine-hint[data-state="ready"] .spine-hint-text { animation:hint-in .6s ease both; }
.spine-hint[data-state="ready"]::before { animation:hint-bob 1.8s ease-in-out .6s infinite; }
@keyframes hint-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes hint-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(3px); } }
.seg-travel { display:none; }
.seg-dock, .seg-outro {
  max-width:var(--maxw); margin:0 auto; padding:56px 24px;
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px; align-items:center;
  border-top:1px solid var(--border);
}
.seg-outro { display:block; }
.st-media { margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-2);
  border:1px solid var(--border); aspect-ratio:16/9; }
.st-media video { width:100%; height:100%; object-fit:cover; display:block; }

.st-index {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.st-num { color:var(--accent); margin-right:8px; }
.st-title { font-size:clamp(1.35rem, 2.4vw, 1.9rem); line-height:1.2; letter-spacing:-.01em;
  margin-bottom:10px; font-weight:750; }
.st-tagline { color:var(--muted); margin-bottom:18px; max-width:52ch; line-height:1.55; }
.st-stats {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px;
  margin:0 0 18px; font-family:var(--font-mono);
}
.st-stats:empty { display:none; }
.st-stats div { border-left:1px solid var(--border-2); padding-left:10px; }
.st-stats dt { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.st-stats dd { margin:2px 0 0; font-size:.95rem; color:var(--fg); }
.st-credit { font-size:.72rem; color:var(--muted-2); line-height:1.5; margin-bottom:14px; max-width:52ch; }
.st-credit a { color:var(--muted); }
.st-link { font-size:.9rem; color:var(--accent); text-decoration:none; }
.st-link::after { content:" →"; }
.st-link:hover { text-decoration:underline; }
.spine-film { margin:24px 0 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.spine-film video { width:100%; display:block; background:#000; }
.spine-outro { max-width:760px; }

@media (max-width: 860px) {
  .spine-scrim { background:linear-gradient(180deg, rgba(11,13,16,.5) 0%, rgba(11,13,16,.84) 55%, var(--bg) 100%); }
  .spine-poster { object-position:30% 50%; }
  .seg-dock { grid-template-columns:1fr; gap:22px; padding:44px 20px; }
  .seg-dock .st-media { order:-1; }
}

/* ============================================================
   LIVE mode
   ============================================================ */
.spine.is-live .spine-stage { position:sticky; top:0; }
.spine.is-live .spine-track { margin-top:-100vh; margin-top:-100svh; }
.spine.is-live .seg-intro { margin-top:0; min-height:115vh; align-items:flex-start;
  padding-top:calc(var(--nav-h) + 16vh); }
.spine.is-live .seg-travel { display:block; height:85vh; }
.spine.is-live .seg-dock {
  display:block; max-width:none; border:0; margin:0;
  height:190vh; padding:0 0 0 max(24px, calc((100% - var(--maxw)) / 2 + 24px));
}
.spine.is-live .seg-outro {
  display:block; max-width:none; border:0; margin:0; height:150vh;
  padding:0 max(24px, calc((100% - var(--maxw)) / 2 + 24px));
}
.spine.is-live .st-media { display:none; }
.spine.is-live .st-panel, .spine.is-live .spine-outro {
  position:sticky; top:calc(var(--nav-h) + 12vh);
  max-width:430px; padding:24px 24px 20px;
  background:rgba(11,13,16,.74); border:1px solid var(--border);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:.001; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
}
.spine.is-live .spine-outro { max-width:560px; }
.spine.is-live .st.is-active .st-panel,
.spine.is-live .seg-outro.is-active .spine-outro { opacity:1; transform:none; }

/* HUD: cell rail + frame readout */
.spine.is-live .spine-hud {
  display:block; position:absolute; right:max(18px, calc((100% - var(--maxw)) / 2));
  top:50%; transform:translateY(-50%); z-index:2;
  font-family:var(--font-mono); pointer-events:none;
}
.spine-rail { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:14px; }
.spine-rail li {
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
  transition:color .3s ease;
}
.spine-rail li::after {
  content:""; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--muted-2); transition:all .3s ease;
}
.spine-rail li.is-past { color:var(--muted); }
.spine-rail li.is-past::after { background:var(--muted-2); }
.spine-rail li.is-active { color:var(--accent); }
.spine-rail li.is-active::after { background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim); }
.spine-read { margin:0; text-align:right; font-size:.64rem; letter-spacing:.1em; color:var(--muted-2); }
.spine-mode { color:var(--accent); text-transform:uppercase; }

@media (max-width: 1100px) {
  .spine-rail li span { display:none; }
}