/* Global interactive background — runs on every public + dashboard page.
 *
 * Render strategy: full-viewport fixed canvas at high z-index with
 * mix-blend-mode:multiply. This composites the effect OVER every page
 * surface (incl. solid dashboard panels), so the effect is visible app-wide
 * — not just on landing whitespace. pointer-events:none + low alphas keep
 * text legibility intact and clicks flowing through.
 */

.site-fx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;              /* above page chrome, below modals/toasts (which use 9999+) */
  pointer-events: none;       /* never block clicks / text-select / inputs */
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: opacity;
  contain: strict;
  mix-blend-mode: multiply;   /* green pixels tint underlying color; text legibility preserved */
}

.site-fx[data-ready="true"] { opacity: 1; }

/* Dark mode: switch to `screen` so green pixels lighten rather than
   darken already-dark backgrounds. */
html[data-theme="dark"] .site-fx,
html.dark .site-fx,
body.dark .site-fx {
  mix-blend-mode: screen;
}

/* Reduced motion → JS bails. CSS hide is defensive. */
@media (prefers-reduced-motion: reduce) {
  .site-fx { display: none !important; }
}

/* Touch-only / coarse pointers → disabled (no hover, save battery). */
@media (hover: none), (pointer: coarse) {
  .site-fx { display: none !important; }
}

/* Phones / tablets in portrait → disabled. */
@media (max-width: 820px) {
  .site-fx { display: none !important; }
}