/* WhatScares atmosphere layer — shared across index / threshold / film pages.
   Four fixed overlays (flashlight, vignette, flicker, grain), all pointer-events:none.
   Stack: content < nav(100) < flashlight(150) < vignette(155) < modal(200) < auth(300) < flicker(400) < grain(450) */

.atmo, .atmo > div { position: fixed; inset: 0; pointer-events: none; }
.atmo { z-index: 0; }

/* lights-out is a full dark mode: the palette flips, then the beam sits on top */
body.lights-out { --bg:#0c0a08;--surface:#161310;--surface-2:#1e1a15;--border:#2b251d;--text:#ece4d2;--text-2:#a79c86;--text-3:#6f6655;--accent:#b5372a;--accent-2:#e0573f;--gold:#d99a45;
  --chrome:rgba(10,10,10,0.92); --panel:rgba(22,19,16,0.86);
  --field:rgba(12,10,8,0.72); --hover:rgba(30,26,21,0.6);
  --ink:#ece4d2; --dim-jumps:#c99320; --dim-gore:#c4342b; --dim-dread:#8fa3a3; }
body.lights-out .vignette { opacity: 1; }

/* flashlight — lights-out mode, follows cursor */
.flashlight {
  z-index: 150; opacity: 0; transition: opacity 0.8s ease;
  background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 38%),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(6,4,3,0.72) 52%, rgba(6,4,3,0.97) 78%, rgba(6,4,3,0.995) 100%);
}
body.lights-out .flashlight { opacity: 1; }
/* dim the page so the beam has something to reveal */
body.lights-out main, body.lights-out header, body.lights-out section, body.lights-out footer {
  filter: brightness(0.62) saturate(0.8); transition: filter 0.8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .flashlight { transition: none; }
  body.lights-out main, body.lights-out header, body.lights-out section, body.lights-out footer { transition: none; }
}
@media (max-width: 768px) {
  .flashlight { background: radial-gradient(circle 180px at var(--lx, 50%) var(--ly, 38%),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 26%, rgba(6,4,3,0.72) 52%, rgba(6,4,3,0.97) 78%, rgba(6,4,3,0.995) 100%); }
}

/* vignette — permanent dark corners */
.vignette {
  z-index: 155; opacity: 0; transition: opacity 0.8s ease;
  background: radial-gradient(ellipse 92% 82% at 50% 44%, transparent 52%, rgba(5,4,3,0.52) 100%);
}

/* flicker — ambient light instability, driven by JS opacity pulses */
.flicker { z-index: 400; background: #000; opacity: 0; }

/* grain — 16mm stock, tile painted by JS, jittered in steps */
.grain {
  inset: -120px; z-index: 450; opacity: 0.07;
  background-repeat: repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grainJitter 0.9s steps(4) infinite; }
}
@keyframes grainJitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-34px, 22px); }
  50% { transform: translate(26px, -38px); }
  75% { transform: translate(-22px, -16px); }
  100% { transform: translate(32px, 26px); }
}

/* witching hour — 3am state set by JS */
@media (prefers-reduced-motion: no-preference) {
  body.witching .hero-title em,
  body.witching .th-vignette-text {
    animation: witchPulse 5s ease-in-out infinite;
  }
}
@keyframes witchPulse {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  94% { opacity: 0.35; }
  96% { opacity: 1; }
  97% { opacity: 0.6; }
  98% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flashlight { transition: none; }
}