/* Nightjar ambient video background — production add-on.
   Layered behind the player: two crossfading <video class="bg-video"> + a
   theme-tinted <div class="bg-scrim">. Same-origin files, so the existing CSP
   (media-src 'self', img-src 'self') needs no change. The feature is OPT-IN:
   bg.js sets body[data-video="on"] only when allowed (desktop, not
   reduced-motion/-data, user hasn't opted out); otherwise the player shows its
   normal gradient background. bg.js drives everything and never touches the
   audio engine. Default is ON everywhere (off only under reduced-motion /
   Save-Data). Tunables live as CSS vars so they're easy to adjust. */

:root {
  --bg-scrim: 55;    /* theme-tint strength over the footage (0-100) */
  --bg-xfade: 2.2;   /* slow, dreamy crossfade between clips */
  --bg-sat: .92;     /* live grade nudge on the footage (re-themes for free) */
  --bg-con: 1.04;
  --bg-bri: 1;
}

.bg-video {
  position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none; opacity: 0;
  transition: opacity calc(var(--bg-xfade) * 1s) ease;
  filter: saturate(var(--bg-sat)) contrast(var(--bg-con)) brightness(var(--bg-bri));
}
.bg-video.show { opacity: 1; }

.bg-scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transition: background-color .4s ease;
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 28%, color-mix(in srgb, var(--bg) 58%, transparent) 100%),
    color-mix(in srgb, var(--bg) calc(var(--bg-scrim) * 1%), transparent);
}

/* Hidden by default; bg.js opts in by setting body[data-video="on"]. With no JS,
   data-video is never set, so video stays off — a safe baseline. bg.js owns the
   reduced-motion / reduced-data / touch defaults (and lets an explicit user opt-in
   override reduced-motion), so no hard CSS media-hide is needed here. */
.bg-video, .bg-scrim { display: none; }
body[data-video="on"] .bg-video,
body[data-video="on"] .bg-scrim { display: block; }

/* Ambient-video toggle — sits just left of the theme toggle, same visual language. */
.video-toggle { right: calc(1rem + 48px); }
.video-toggle[aria-pressed="false"] { opacity: .5; }