/*───────────────────────────────────────────────────────────────
  vellichor woods — night mode & grading
  depends on: body.night class (toggled by js/nightmode.js)
───────────────────────────────────────────────────────────────*/

/* Z-index assumptions:
   fog ≤ 1, rays = 2, content = 3, fireflies = 5.
   If your base CSS sets different values, mirror them here.
*/

/* —— Background grading layers (day→night) —— */
/* Both are invisible by default; we just fade their opacity when body.night is present */
body::before,
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  z-index:0;                    /* above page bg, below fog/rays/content */
  opacity:0; transition:opacity .45s ease;
}

/* Darken with a cool multiply tint */
body::before{
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(10,16,40,.55), rgba(3,6,14,.82));
  mix-blend-mode:multiply;
}

/* Subtle colour cool-down */
body::after{
  background:#0c1530;
  mix-blend-mode:color;
}

/* Night mode on */
body.night::before{ opacity:.62; }
body.night::after { opacity:.28; }

/* Fog slightly dimmer at night (optional) */
body.night #fog-canvas{ opacity:.14; }

/* Godrays fade out in night mode */
.godrays, .godrays-overlay{ transition:opacity .45s ease; }
body.night .godrays,
body.night .godrays-overlay{ opacity:0; pointer-events:none; }

/* Fireflies glow more at night */
.firefly{
  transition:box-shadow .35s ease, opacity .35s ease, transform .35s ease;
}
body.night .firefly{
  background:rgba(246,241,231,.95);
  box-shadow:
    0 0 10px rgba(246,241,231,.90),
    0 0 22px rgba(246,241,231,.55),
    0 0 36px rgba(224,201,122,.35);
  opacity:1;
  transform:scale(1.08);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ transition:none; }
  .godrays, .godrays-overlay, .firefly{ transition:none; }
}