/* Old-monitor immersion layer: scanlines, vignette, subtle grain (no flicker
   -- tried it, too distracting). Pure CSS, one fixed full-screen overlay --
   no per-frame JS, cheap to run alongside everything else already animating
   on this page. */

/* Off during boot by default -- js/boot-sequence.js adds body.crt-active once
   the boot sequence finishes and the desktop is up. The scanline layer's
   multiply blend was darkening the boot-enter button's already-subtle border
   into invisibility, which is exactly the bug this gate fixes. */
#crt-overlay, #crt-grain {
  display: none;
}
body.crt-active #crt-overlay, body.crt-active #crt-grain {
  display: block;
}

#crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}

/* Scanlines */
#crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* Vignette -- darker, slightly warm-dark corners like an old tube */
#crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 4, 6, 0.25) 85%,
    rgba(0, 3, 5, 0.45) 100%
  );
}

/* #crt-flicker element is still in the DOM but intentionally left inert here
   (no animation) -- the old-monitor look should read from scanlines/vignette/
   grain alone, without an actual flicker. */
#crt-flicker {
  display: none;
}

#crt-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 9499;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: crtGrainShift 0.6s steps(4) infinite;
}

@keyframes crtGrainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #crt-grain { animation: none; opacity: 0; }
}