/* NPC Studio — Bodycam layer: police night, siren lights, tape-recorder scanlines. Loaded after site.css.
   To switch theme: swap this file (and bodycam.js) for another layer in the pages' <head> (halloween.css is kept for next year). */

/* ---------- Palette: night shift ---------- */
:root {
  --ink: #060A13; --night: #0E1526; --night-2: #152036; --page: #080D19;
  --line: rgba(79,163,255,.08); --line-2: rgba(79,163,255,.2); --line-3: rgba(79,163,255,.38);
  --lilac: #4FA3FF; --lilac-deep: #1C3C8C; --cream: #EEF2F8; --haze: #A6B2C8; --dim: #6A7690;
  --red: #FF3B4E; --yellow: #FFD84A; --green: #5BE49B; --blue: #4FA3FF;
  --siren-r: rgba(255,40,64,.30); --siren-b: rgba(40,120,255,.30);
}
body {
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(28,60,140,.35), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--page);
  background-attachment: fixed;
}
::selection { background: var(--red); color: var(--cream); }

/* Titles: white with a police-blue drop */
.mega { text-shadow: 0 clamp(4px, .7vmin, 8px) 0 var(--lilac-deep), 0 0 40px rgba(79,163,255,.25); }
.mega em { color: var(--red); }
.marquee { background: var(--yellow); }
.marquee span::after { content: "●"; color: var(--red); font-size: .55em; }
.btn { box-shadow: 0 5px 0 var(--ink), 0 5px 0 2px var(--lilac-deep); }
.btn:active { box-shadow: 0 2px 0 var(--ink), 0 2px 0 2px var(--lilac-deep); }

/* ---------- Siren lights: red left, blue right, alternating like a light bar ---------- */
.bc-siren { position: fixed; top: -30vh; width: 70vw; height: 70vh; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(40px); opacity: 0; mix-blend-mode: screen; }
.bc-siren--r { left: -25vw; background: radial-gradient(closest-side, var(--siren-r), transparent); animation: bc-siren 1.6s steps(1) infinite; }
.bc-siren--b { right: -25vw; background: radial-gradient(closest-side, var(--siren-b), transparent); animation: bc-siren 1.6s steps(1) infinite -.8s; }
@keyframes bc-siren { 0% { opacity: .9; } 12% { opacity: .2; } 20% { opacity: .9; } 32%, 100% { opacity: 0; } }

/* ---------- Video feel: scanlines + vignette (very light, above everything, never clickable) ---------- */
.bc-scan { position: fixed; inset: 0; z-index: 90; pointer-events: none;
           background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.10) 2px 3px), radial-gradient(ellipse 90% 80% at 50% 45%, transparent 60%, rgba(0,0,0,.35) 100%); }

main, footer, #footer, #topbar { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .bc-siren { animation: none; opacity: .35; }
}