/**
 * Scanlines Effect
 * Adds horizontal scanlines for authentic CRT monitor look
 */

.retro-scanlines::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  animation: scanline-flicker 0.1s infinite alternate;
}

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

/* Subtle animated scanline effect */
.retro-scanlines::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.05) 50%
  );
  background-size: 100% 4px;
  animation: scanline-move 8s linear infinite;
}

@keyframes scanline-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .retro-scanlines::before,
  .retro-scanlines::after {
    animation: none;
  }
}