/* ============================================================
   bg-fx.css — the interaction-activated ambient background canvas.
   Fixed behind all content; fades in when bg-fx starts. Never captures
   pointer events. White-mode: it only tints, never darkens.
   ============================================================ */

.bg-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.bg-fx.is-on { opacity: 1; }

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