/* ============================================================================
   Lane B overrides — v5 daylight footage on WHITE.
   Loaded after styles-white.css; mirrors styles-b.css but retuned for the
   bright grade + white content handoff. Night styles-b.css stays untouched.
   ==========================================================================*/

/* taller driver: 5 chapters × 170vh */
#film { height: 850vh; }
/* phones: touch momentum traverses ~3x faster than a wheel — one hard flick on
   an 850vh runway skipped two whole chapters. 240vh per chapter keeps one
   flick ≈ one chapter so the beats are actually readable. */
@media (max-width: 768px) {
  #film { height: 1200vh; }
}

/* scrubbed footage canvas — light pre-boot bg (bright daytime source) */
#filmcanvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  background: #eef2f7;
}

/* static first frame (pre-boot + reduced-motion) */
#static-frame {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* vignette — barely-there neutral edge framing (bright airy grade stays bright);
   JS fades it out with the seam. No heavy dark corners on white. */
#vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(128% 100% at 50% 44%, transparent 68%, rgba(12, 22, 44, 0.10) 100%);
}

/* film grain — DROPPED on white (grain over bright footage reads as dirt) */
#grain { display: none; }

/* ambient hero motes ride above the vignette */
#ambient { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ---- beat legibility over bright footage: soft WHITE scrims (not boxes) ---- */
.beat-inner, .beat-col--text {
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.8);
}
.beat--hero .beat-inner { position: relative; }
.beat--hero .beat-inner::before {
  content: ""; position: absolute; inset: -16% -24%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(74% 84% at 38% 50%, rgba(247, 249, 252, 0.94), rgba(247, 249, 252, 0.68) 46%, transparent 84%);
  filter: blur(7px);
}
.beat--split .beat-col--text { position: relative; }
.beat--split .beat-col--text::before {
  content: ""; position: absolute; inset: -14% -20%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(90% 88% at 42% 50%, rgba(247, 249, 252, 0.94), rgba(247, 249, 252, 0.66) 50%, transparent 86%);
  filter: blur(7px);
}
.beat--moment .beat-inner--center { position: relative; }
.beat--moment .beat-inner--center::before {
  content: ""; position: absolute; inset: -18% -26%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(64% 70% at 50% 52%, rgba(247, 249, 252, 0.95), rgba(247, 249, 252, 0.66) 48%, transparent 82%);
  filter: blur(8px);
}

/* ---- frame loader: non-blocking progress line near the bottom edge.
   NEVER a full-screen curtain — the old opaque inset:0 background held the
   entire site white until 24 frames (~10MB on desktop) had downloaded, which
   read as a broken blank page on any real-world connection. The hero + static
   first frame render immediately; this line just narrates the frame stream. ---- */
#loader {
  position: fixed; inset: 0; z-index: 120;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s;
}
#loader::before {
  content: ""; position: absolute;
  left: calc(50% - 110px); bottom: 7.5%;
  width: 220px; height: 2px; border-radius: 2px;
  background: rgba(10, 17, 32, 0.1);
}
#loader-bar {
  position: absolute; left: calc(50% - 110px); bottom: 7.5%;
  display: block; width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--chart-line));
  transition: width 0.2s linear;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- adaptive header: default DARK ink (over bright sky); flip to LIGHT ink
   only when the film's top strip goes dark (a glass tower fills the top) ---- */
.chrome.on-dark { color: #f6f9ff; text-shadow: 0 1px 14px rgba(6, 12, 26, 0.5); }
.chrome.on-dark .brand-here { color: #6ea8ff; }
.chrome.on-dark.is-scrolled { color: var(--fg); text-shadow: none; }
.chrome.on-dark.is-scrolled .brand-here { color: var(--brand-here); }

/* ---- reduced-motion: static first frame + readable stacked beats ---- */
.reduced #filmcanvas, .reduced #vignette, .reduced #loader, .reduced .odds-layer { display: none; }
.reduced #static-frame {
  position: relative; display: block;
  width: 100%; height: 46vh; object-fit: cover;
  border-bottom: 1px solid var(--border);
}