/* ============================================================
   Cinematic scrub hero — "The living network"
   Engineering per 10K scrub-pipeline standard.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');

html, body { overflow-x: hidden; overflow-x: clip; }

.scrub-hero {
  position: relative;
  height: 280vh; /* 1 combined beat + settle, generous plateau on the 180vh scroll range */
  background: var(--bg); /* light gutter around the rounded stage, echoing the footer's floating-card treatment */
}
.scrub-stage {
  position: sticky;
  top: 95px; /* clears the sticky site header (75px) + a 20px gap */
  height: calc(100vh - 115px); /* 95px top gap + 20px bottom gap */
  margin: 0 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
}

/* Layers */
.scrub-stage .poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
#heroVideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: transform;
  transform: translateZ(0);
}
.scrub-stage.video-ready #heroVideo { opacity: 1; }
.scrub-stage.video-failed #heroVideo { display: none; }

/* Global base scrim */
.scrub-stage .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,12,24,0) 35%, rgba(10,12,24,.62) 100%);
}

/* Loading ring */
.scrub-stage .ring {
  position: absolute;
  right: 28px; bottom: 28px;
  width: 34px; height: 34px;
  color: rgba(255,255,255,.65);
  transform: rotate(-90deg);
  pointer-events: none;
}
.scrub-stage.video-ready .ring { display: none; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.75);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: calc(1 - var(--cue-fade, 0));
}
.scroll-cue svg { width: 18px; height: 18px; animation: cue-bob 2.2s ease-in-out -1.2s infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Journey bands ---------- */
.band {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}
.band-inner {
  position: relative;
  max-width: 420px;
  padding: 0 clamp(24px, 6vw, 84px);
  text-shadow: var(--tshadow, 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8));
}
.band--left  { justify-content: flex-start; }
.band--right { justify-content: flex-end; }
.band--right .band-inner { text-align: right; }

/* Per-band scrim: an ellipse anchored on the band's own column */
.band::before {
  content: "";
  position: absolute;
  top: 14%; bottom: 14%;
  width: 56%;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 0));
  background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5,6,14,.62) 0%, rgba(5,6,14,.4) 46%, rgba(5,6,14,0) 76%);
}
.band--left::before  { left: -6%; }
.band--right::before { right: -6%; }

.band-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-block;
  margin-bottom: 14px;
}
.band-line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

/* Entrances: band-level, transform+opacity only, driven by --k */
.band--drift .band-inner {
  transform: translateY(calc((1 - var(--k, 0)) * -26px));
}
.band--sweep .band-inner {
  transform: translateX(calc((1 - var(--k, 0)) * -34px));
}
.band--sweep.band--right .band-inner {
  transform: translateX(calc((1 - var(--k, 0)) * 34px));
}
.band--bloom .band-inner {
  transform: scale(calc(.92 + .08 * var(--k, 0)));
}
.band--bloom .band-kicker { text-shadow: 0 0 calc(18px * var(--k, 0)) rgba(255,122,0,.8); }

/* The kicker's thread: a line that draws with --k */
.band-kicker::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(0,168,120,.7));
  transform-origin: left center;
  transform: scaleX(var(--k, 0));
}
.band--right .band-kicker::after { transform-origin: right center; }

/* ---------- Settle band ---------- */
.band--settle { justify-content: center; text-align: center; }
.band--settle::before {
  left: 50%; top: 4%; bottom: auto; height: 66%;
  width: 78%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(5,6,14,.66) 0%, rgba(5,6,14,.42) 48%, rgba(5,6,14,0) 76%);
}
.band--settle .band-inner { max-width: 860px; }
.settle-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 18px;
  opacity: var(--k, 0);
}
.settle-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -.01em;
  opacity: var(--k, 0);
  transform: translateY(calc((1 - var(--k, 0)) * 22px));
}
.settle-title .accent { color: var(--orange); }
.settle-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: #E4E9F5;
  font-weight: 600;
  font-size: .98rem;
  margin-bottom: 30px;
  opacity: var(--ks, 0);
  transform: translateY(calc((1 - var(--ks, 0)) * 16px));
}
.settle-meta span { display: inline-flex; align-items: center; gap: 8px; }
.settle-meta svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.settle-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  pointer-events: auto;
  opacity: var(--kb, 0);
  transform: translateY(calc((1 - var(--kb, 0)) * 14px));
}
.settle-ctas .btn { text-shadow: none; }

/* ---------- Static hero (phones, portrait, reduced motion) ---------- */
.static-hero {
  display: none;
  position: relative;
  min-height: 88vh;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 90px 24px;
  margin: 20px;
  border-radius: var(--radius-lg);
}
.static-hero .poster-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .85;
}
.static-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 80% at 50% 55%, rgba(8,10,22,.28) 0%, rgba(8,10,22,.78) 100%);
}
.static-hero .static-inner { position: relative; z-index: 1; max-width: 720px; }
.static-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  margin-bottom: 14px;
}
.static-hero h1 .accent { color: var(--orange); }
.static-hero p { color: #C7CFE2; font-size: 1.05rem; }
.static-hero .hero-ctas { justify-content: center; margin-top: 26px; }

/* The five static-hero gates (must match the JS GATES verbatim) */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .scrub-hero { display: none; }
  .static-hero { display: flex; }
}

/* Short-but-capable screens: keep the scrub, hide the small overlays */
@media (max-height: 560px) {
  .scroll-cue, .scrub-stage .ring { display: none; }
}

/* ---------- The signature thread below the hero ---------- */
.thread-svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 140px;
  width: 2px;
  overflow: visible;
  pointer-events: none;
}
.thread-svg line {
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset 1.1s ease;
}
.stats-band { position: relative; }
.stats-band.in .thread-svg line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
  .thread-svg line { stroke-dashoffset: 0; transition: none; }
}