/* Full-page scroll-scrubbed backdrop — old-tech film, blue-graded */
.bd-stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#050505;pointer-events:none}
.bd-layer{position:absolute;inset:-2%;opacity:0;will-change:opacity}
.bd-layer:first-child{opacity:1}
.bd-layer img,.bd-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.9)}
.bd-layer video{opacity:0;transition:opacity .4s}
.bd-layer video.ready{opacity:1}
.bd-tint{position:absolute;inset:0;background:#1d4ed8;mix-blend-mode:color;opacity:.6}
.bd-veil{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 110% 85% at 50% 45%,rgba(10,10,10,.25) 30%,rgba(5,5,5,.9) 100%),
    linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.55));
}
.bd-crt{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px);
  animation:bdFlicker 6s steps(60) infinite}
@keyframes bdFlicker{0%,100%{opacity:.6}48%{opacity:.52}50%{opacity:.68}52%{opacity:.55}}
.bd-flash{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:
    linear-gradient(90deg,transparent,rgba(59,130,246,.28),transparent),
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 2px,transparent 2px 6px)}

/* Everything readable sits above the film */
.has-backdrop main,.has-backdrop .site-footer{position:relative;z-index:1}
.has-backdrop .page-hero .bg{display:none}
.has-backdrop .page-hero::before{background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.55) 85%,rgba(10,10,10,.7))}
.has-backdrop main{text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* HUD */
.bd-hud{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;
  display:flex;justify-content:flex-end;align-items:flex-end;gap:12px;
  padding:0 clamp(12px,2.4vw,28px) calc(14px + env(safe-area-inset-bottom))}
.bd-timer{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:4px;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);box-shadow:inset 0 0 0 1px #3a3a3a,0 3px 0 #000}
.bd-timer small{font:400 .6rem/1 var(--f-mono);letter-spacing:.2em;color:var(--ink-3)}
.bd-timer b{font:400 1.7rem/1 var(--f-crt);color:#ff4a2e;letter-spacing:.06em;
  text-shadow:0 0 6px rgba(255,74,46,.9),0 0 18px rgba(255,74,46,.45)}
.bd-timer.done b{color:#fff;text-shadow:0 0 6px #fff,0 0 18px rgba(255,255,255,.4)}
.bd-progress{position:fixed;left:0;right:0;top:var(--header-h);height:3px;background:rgba(0,0,0,.4)}
.bd-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-4),var(--brass-2));box-shadow:0 0 8px rgba(229,9,20,.6)}

/* Chapter rail — indicator lamps */
.bd-rail{position:fixed;right:clamp(12px,1.8vw,26px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px}
.bd-rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.bd-rail button span{font:400 .66rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:transparent;transition:color .2s;text-shadow:0 1px 6px #000}
.bd-rail button:hover span,.bd-rail button:focus-visible span,.bd-rail button.on span{color:var(--ink-2)}
.bd-rail button::after{content:"";width:12px;height:12px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 35%,#3a3a3a,#1a1a1a);box-shadow:0 0 0 2px #8b0d12,inset 0 1px 2px #000}
.bd-rail button.on::after{background:radial-gradient(circle at 35% 35%,#ffd0d0,#e50914 45%,#5a0000);box-shadow:0 0 0 2px #c1121c,0 0 12px rgba(229,9,20,.8)}

@media (max-width:860px){
  .bd-rail{display:none}
  .bd-timer small{display:none}
  .bd-timer b{font-size:1.35rem}
  }
@media (prefers-reduced-motion:reduce){.bd-crt{animation:none}}

/* ---------- CLARITY PASS: cleaner, sharper film ---------- */
.bd-layer img,.bd-layer video{filter:grayscale(.35) contrast(1.06) brightness(1.02) saturate(.95)}
.bd-tint{opacity:.32}                                  /* bluish, but keeps detail */
.bd-veil{background:
  radial-gradient(ellipse 120% 95% at 50% 45%,transparent 45%,rgba(4,7,14,.7) 100%),
  linear-gradient(180deg,rgba(4,7,14,.15),rgba(4,7,14,.35))}
.bd-crt{display:none}                                  /* no scanlines over the picture */
.bd-flash{background:linear-gradient(90deg,transparent,rgba(59,130,246,.22),transparent)}
.has-backdrop main{text-shadow:none}
.has-backdrop .page-hero::before{background:none}
/* lighter vignette so more of the frame is visible */
.bd-veil{background:radial-gradient(ellipse 130% 100% at 50% 45%,transparent 55%,rgba(4,7,14,.55) 100%)}