@keyframes vhs-flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

.vhs-effect {
  position: relative;
  overflow: hidden;
}

.vhs-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.4) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  z-index: 10002;
  pointer-events: none;
  animation: vhs-flicker 2s infinite; /* Slower flicker for better performance (4x slower) */
  will-change: opacity; /* Optimize for animation */
}

.vhs-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 0, 0, 0.08), /* Increased from 0.05 */
    rgba(0, 255, 0, 0.08), /* Increased from 0.05 */
    rgba(0, 0, 255, 0.08)  /* Increased from 0.05 */
  );
  mix-blend-mode: screen;
  z-index: 10001;
  pointer-events: none;
  will-change: auto; /* Disable will-change for static elements */
}