/* --- THE BUREAU: ANOMALY & FX ENGINE --- */

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; }
}

@keyframes crtWaver {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 0.3; transform: scaleY(1.02); }
}

@keyframes glitchWord {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  20% { transform: translate(-2px, 1px) skewX(-2deg); }
  40% { transform: translate(2px, -1px) skewY(1deg); }
  80% { transform: translate(-1px, 0); opacity: 0.8; }
}

@keyframes pulseGlow {
  0% { box-shadow: inset 0 0 10px var(--neon-cyan), 0 0 10px rgba(51, 255, 255, 0.5); }
  100% { box-shadow: inset 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-pink); }
}

/* --- Global FX Classes --- */
/* NOTE: .flicker runs at a calm ~2.4s cycle (not a sub-second strobe) to
   stay clear of the WCAG 2.3.1 three-flashes-per-second threshold. */
.flicker { animation: flicker 2.4s infinite; }
.glitch-text { animation: glitchWord 1.5s infinite alternate; }
.pulse { animation: pulseGlow 2s infinite alternate; }

/* Respect users who ask for less motion: drop the decorative FX entirely. */
@media (prefers-reduced-motion: reduce) {
  .flicker, .glitch-text, .pulse { animation: none !important; }
}

.crt-overlay::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(255, 0, 255, 0.03) 0px, transparent 1px, transparent 2px);
  background-size: 100% 3px;
  z-index: 9998;
}