.chaos-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent var(--line-size, 2px),
    rgba(0, 255, 255, 0.03) var(--line-size, 2px),
    rgba(0, 255, 255, 0.03) calc(var(--line-size, 2px) * 2)
  );
  will-change: opacity;
}

.chaos-scanlines--slow {
  animation: scanline-scroll 8s linear infinite;
}

.chaos-scanlines--medium {
  animation: scanline-scroll 4s linear infinite;
}

.chaos-scanlines--fast {
  animation: scanline-scroll 2s linear infinite;
}

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