/* === CRT / VHS Effects === */

/* Scanlines */
.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.15) 1px,
    rgba(0, 0, 0, 0.15) 2px
  );
  animation: scanline-flicker 0.05s linear infinite;
}

/* Vignette - dark edges like a CRT */
.vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Screen flicker */
#crt-overlay {
  animation: screen-flicker 8s linear infinite;
}

/* VHS tracking glitch (toggled by JS) */
.vhs-glitch {
  animation: vhs-track 0.15s steps(2) !important;
}

@keyframes scanline-flicker {
  0% { opacity: 0.95; }
  50% { opacity: 1; }
  100% { opacity: 0.95; }
}

@keyframes screen-flicker {
  0%, 100% { opacity: 0.97; }
  3% { opacity: 1; }
  6% { opacity: 0.96; }
  9% { opacity: 1; }
  42% { opacity: 0.98; }
  44% { opacity: 1; }
  78% { opacity: 0.97; }
  80% { opacity: 0.95; }
  82% { opacity: 1; }
}

@keyframes vhs-track {
  0% { transform: translateX(0) skewX(0); }
  25% { transform: translateX(-8px) skewX(-0.5deg); }
  50% { transform: translateX(5px) skewX(0.3deg); }
  75% { transform: translateX(-3px) skewX(-0.2deg); }
  100% { transform: translateX(0) skewX(0); }
}