/* ============================================================
   fog.css — interactive volumetric haze layer (fog.js)
   Sits above the page content but below the mini-player video + UI, so the
   smoke frames the scene without hurting readability. Additive (screen) blend
   = glowing colored haze on the neon palette, not flat gray occlusion.
   ============================================================ */
#sv-fog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;              /* above hero/laser(-1), below mini-player(50+) + nav */
  pointer-events: none;    /* never blocks clicks; mouse is tracked via window */
  display: block;
  mix-blend-mode: screen;
  will-change: contents;
  transform: translateZ(0);
}

/* No fog for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  #sv-fog { display: none; }
}