/* CRT filter overlay — scanlines + vignette + soft green tint.
   Off by default. Activated via `body.crt`. Overlay stays in the DOM
   but is fully transparent when off so it has zero visual cost. */

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 99998; /* above content, below taskbar (99999) and start menu (999999) */
  transition: opacity 150ms linear;
  /* No will-change / mix-blend-mode — they create a stacking context that
     hides the blend from content beneath. Plain alpha compositing is enough
     and works reliably across browsers. */
}

body.crt .crt-overlay {
  opacity: 1;
  background-image:
    /* corner phosphor tint */
    radial-gradient(ellipse at 30% 30%, rgba(120, 255, 180, 0.08), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(120, 180, 255, 0.06), transparent 55%),
    /* vignette */
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%),
    /* scanlines — dark, 1 of every 3 px */
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0,
      rgba(0, 0, 0, 0.45) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* Secondary white bloom to give lines a faint phosphor glow */
body.crt .crt-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* Subtle flicker — disabled under prefers-reduced-motion */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.94; }
  50%      { opacity: 0.88; }
  55%      { opacity: 0.96; }
}

body.crt .crt-overlay {
  animation: crt-flicker 4s infinite steps(1, end);
}

@media (prefers-reduced-motion: reduce) {
  body.crt .crt-overlay {
    animation: none;
  }
}