/* 
 * CRT Scanline Effect
 * Inspired by mbrserver.com — full-screen overlay with multiple scanlines
 *
 * Layers (bottom to top):
 *   1. Content (z-index: auto)
 *   2. Static scanline pattern + RGB fringing (z-index: 9997)
 *   3. Moving scanline bar (z-index: 9998)
 *   4. Flicker overlay (z-index: 9999)
 */

/* ===== STATIC MULTIPLE SCANLINES + RGB FRINGING ===== */
.crt-scanlines {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;

  /* Layer 1: Horizontal scanlines — alternating bright/dim */
  /* Layer 2: Subtle RGB color fringing (like old CRT) */
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 1px,
      rgba(255, 255, 255, 0.04) 1px,
      rgba(255, 255, 255, 0.04) 2px
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.03),
      rgba(0, 255, 0, 0.01),
      rgba(0, 0, 255, 0.03)
    );

  background-size: 100% 2px, 3px 100%;
}

/* ===== MOVING SCANLINE BAR ===== */
.crt-scanline {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.75;
  animation: crt-scanline-move 7.77s linear infinite;
}

@keyframes crt-scanline-move {
  0%   { top: -2px; }
  100% { top: 100%; }
}

/* ===== SUBTLE FLICKER ===== */
.crt-flicker {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(9, 8, 8, 0.06);
  animation: crt-flicker-anim 0.33s infinite;
}

@keyframes crt-flicker-anim {
  0%   { opacity: 0.10; }
  20%  { opacity: 0.15; }
  40%  { opacity: 0.05; }
  60%  { opacity: 0.12; }
  80%  { opacity: 0.08; }
  100% { opacity: 0.10; }
}