/* $BELIEVE — Doubt system static overlay (Task 8).
   DOM: a single <canvas id="doubt-fx"> declared in index.html, between
   #gate and #hud -- deliberately relying on plain DOM order (no explicit
   z-index) to paint above #scene and below #hud, matching how base.css's
   own #gate/#hud stack. #gate's explicit z-index:100 (gate.css) still wins
   over all of this while the gate is up, which never overlaps with the
   doubt system in practice -- doubt only starts after 'gate:passed', by
   which point #gate is hidden.

   All actual drawing (noise, opacity, the pulse class) is js/world/fx.js's
   job; this file only owns positioning/scaling and the one-shot pulse
   keyframe. */

#doubt-fx {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* vh fallback + dvh override -- same iOS dynamic-viewport pair as
     base.css's #scene. */
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  pointer-events: none;
  /* The whole point of the 160x90 backing store (set in fx.js) is a cheap,
     chunky upscale -- image-rendering keeps that scale blocky/pixelated
     instead of the browser's default smoothing turning it into soft,
     blurred grain. */
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox's pre-pixelated-support alias */
}

/* Green pulse on a snap-back poke (js/doubt.js emits 'doubt:pulse' while
   level>0.3; js/world/fx.js toggles this class). Animates the canvas
   element's own opacity/background for one shot -- while it runs it takes
   over from fx.js's per-frame inline `style.opacity` (an authored CSS
   animation outranks an inline style for the duration it runs), handing
   control back the instant it ends. In practice the static has usually
   already faded to inline opacity:0 by the time this fires (the same poke
   that triggers the pulse also resets doubt level to 0), so this reads as
   a clean flash over nothing, not a fight over the same property. */
#doubt-fx.is-pulsing {
  animation: doubtPulse 300ms ease-out;
}

@keyframes doubtPulse {
  0% {
    opacity: 1;
    background: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.9),
      var(--believe-bright, #d4f24b) 40%,
      transparent 75%);
  }
  100% {
    opacity: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  #doubt-fx.is-pulsing {
    animation: none !important;
  }
}