/* Recode Audio — scroll-film styles. Film-first hero; seam hands off at #080b0f. */

#filmScroll { height: 850vh; position: relative; }
#filmStage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #0b0906;
}
#filmCanvas { position: absolute; inset: 0; display: block; }

/* grain + vignette sell the one-shot feel; faded out by the seam ramp */
#filmGrain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
#filmStage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
#filmFade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent 30%, #080b0f 96%);
}

/* loader */
#filmLoader {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: #0b0906; transition: opacity .45s ease;
}
#filmLoader.fading { opacity: 0; }
#filmLoader.done { display: none; }
#filmLoader .mark { width: 74px; opacity: .9; margin-bottom: 22px; }
#filmLoaderTrack { width: min(320px, 60vw); height: 2px; background: rgba(243,168,52,.18); }
#filmLoaderBar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #f3a834; transition: transform .2s ease; }
#filmLoader .hint {
  margin-top: 14px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .22em; color: rgba(236,233,228,.5);
}

/* chapter readout (lives in the fixed header row) */
#filmMeta {
  position: fixed; right: 20px; top: 18px; z-index: 40; text-align: right;
  font-family: var(--font-mono, ui-monospace, monospace);
  pointer-events: none; mix-blend-mode: difference;
}
#filmChapter { font-size: 10px; letter-spacing: .32em; color: #eae6df; }
#filmChapterTrack { width: 120px; height: 1px; background: rgba(234,230,223,.25); margin-top: 6px; margin-left: auto; }
#filmChapterBar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #f3a834; }

/* beats */
.beat {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; opacity: 0; pointer-events: none; padding: 0 6vw;
}
.beat--left  { place-items: center start; text-align: left;  padding-left: 8vw; }
.beat h1, .beat h2 {
  font-family: 'Michroma', var(--font-display, sans-serif);
  color: #f2ede6; text-wrap: balance; margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.65);
}
.beat h1 { font-size: clamp(34px, 6.4vw, 92px); letter-spacing: .06em; line-height: 1.04; }
.beat h2 { font-size: clamp(20px, 3.2vw, 44px); letter-spacing: .1em; }
.beat p  {
  margin: 18px auto 0; max-width: 46ch; color: rgba(236,233,228,.82);
  font-size: clamp(13px, 1.25vw, 17px); line-height: 1.6;
}
.beat--left p { margin-left: 0; }
.beat .kicker {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .34em; color: #f3a834;
}
.beat .cta {
  display: inline-block; margin-top: 26px; padding: 13px 30px;
  border: 1px solid #f3a834; color: #f3a834; text-decoration: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; letter-spacing: .26em; transition: background .2s, color .2s;
}
.beat .cta:hover { background: #f3a834; color: #14100b; }

/* seam landing zone: melts the film's #080b0f into the page background */
#seamZone {
  height: 34vh;
  background: linear-gradient(to bottom, #080b0f 0%, var(--bg, #111013) 88%);
}

/* adaptive header over the film */
#siteHeader { position: relative; z-index: 50; }
#siteHeader.on-light a, #siteHeader.on-light .logo, #siteHeader.on-light .nav__mark { color: #14100b; }

@media (prefers-reduced-motion: reduce) {
  #filmScroll { height: 100vh; }
  .beat { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .beat:not(.beat--finale) { display: none; }
  #filmMeta, #filmGrain { display: none; }
}

/* autoplay hint */
#filmHint {
  margin-top: 26px !important; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px !important; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,168,52,.55) !important; transition: opacity .6s ease;
}
#filmHint.gone { opacity: 0; }

/* header: fixed adaptive chrome; solid backdrop once the film has ended */
#siteHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s ease, backdrop-filter .4s ease; }
#siteHeader.past-film { background: rgba(17,16,19,.86); backdrop-filter: blur(10px); }

/* hero loader — D lockup (mark over wordmark) */
.loaderLockup { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 26px; }
.loaderLockup .mark { width: 90px; height: auto; color: #f2ede6; display: block; }
.loaderWord { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display, 'Michroma', sans-serif); line-height: 1.15; }
.loaderWord span { font-size: 15px; letter-spacing: .42em; color: #f2ede6; }
.loaderWord span:last-child { color: #f3a834; }