.scanlines {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background: transparent;
  overflow: hidden;
}

/* BASE SCANLINES PATTERN */
.scanlinesInner {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    var(--scanline-color, rgba(0, 0, 0, 0.5)) 50%
  );
  background-size: 100% calc(var(--scanline-thickness, 2px) * 2);
  opacity: var(--scanline-opacity, 0.1);
}

/* ANIMATED SCANLINES */
.animated .scanlinesInner {
  animation: scanlines-scroll 8s linear infinite;
}

@keyframes scanlines-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 calc(var(--scanline-thickness, 2px) * 2);
  }
}

/* SPEED VARIATIONS */
.slow .scanlinesInner {
  animation-duration: 12s;
}

.normal .scanlinesInner {
  animation-duration: 8s;
}

.fast .scanlinesInner {
  animation-duration: 4s;
}

/* FLICKER EFFECT */
.flicker .scanlinesInner {
  animation: scanlines-scroll 8s linear infinite, flicker 0.15s infinite;
}

@keyframes flicker {
  0% { opacity: var(--scanline-opacity, 0.1); }
  5% { opacity: calc(var(--scanline-opacity, 0.1) * 1.5); }
  10% { opacity: var(--scanline-opacity, 0.1); }
  15% { opacity: calc(var(--scanline-opacity, 0.1) * 0.5); }
  20% { opacity: var(--scanline-opacity, 0.1); }
  30% { opacity: calc(var(--scanline-opacity, 0.1) * 1.3); }
  40% { opacity: var(--scanline-opacity, 0.1); }
  50% { opacity: calc(var(--scanline-opacity, 0.1) * 0.8); }
  60% { opacity: var(--scanline-opacity, 0.1); }
  70% { opacity: calc(var(--scanline-opacity, 0.1) * 1.2); }
  80% { opacity: var(--scanline-opacity, 0.1); }
  90% { opacity: calc(var(--scanline-opacity, 0.1) * 0.9); }
  100% { opacity: var(--scanline-opacity, 0.1); }
}

/* CRT CURVATURE EFFECT */
.curvature {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

.ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 16, 0) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(18, 16, 16, 0) 100%
  );
  opacity: 0.6;
  pointer-events: none;
  animation: ambient-glow 3s ease-in-out infinite alternate;
}

@keyframes ambient-glow {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.7;
  }
}

/* RGB SHIFT VARIANT */
.scanlines.rgb {
  background: none;
}

.scanlines.rgb::before,
.scanlines.rgb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.scanlines.rgb::before {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(255, 0, 0, 0.1) 50%
  );
  background-size: 100% calc(var(--scanline-thickness, 2px) * 2);
  transform: translateX(-1px);
}

.scanlines.rgb::after {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 255, 255, 0.1) 50%
  );
  background-size: 100% calc(var(--scanline-thickness, 2px) * 2);
  transform: translateX(1px);
}

/* SUBTLE VARIANT */
.scanlines.subtle .scanlinesInner {
  background-size: 100% 4px;
  opacity: 0.05;
}

/* HEAVY VARIANT */
.scanlines.heavy .scanlinesInner {
  background-size: 100% 2px;
  opacity: 0.2;
}