/* CRT / VHS layer — disabled for prefers-reduced-motion */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}

.crt-flicker {
  animation: crt-flicker 7s steps(2, end) infinite;
}

@keyframes crt-flicker {
  0%,
  96% {
    opacity: 0.1;
  }
  97% {
    opacity: 0.16;
  }
  100% {
    opacity: 0.1;
  }
}

.vhs-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.4s steps(4) infinite;
}

@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2%, 1%);
  }
  50% {
    transform: translate(1%, -1%);
  }
  75% {
    transform: translate(-1%, 2%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.scanline-cursor {
  position: fixed;
  width: 100%;
  height: 1px;
  left: 0;
  pointer-events: none;
  z-index: 48;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(192, 132, 252, 0.35) 50%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.4);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.scanline-cursor.is-on {
  opacity: 1;
}

.chromatic-edge {
  text-shadow:
    -1px 0 rgba(232, 121, 160, 0.35),
    1px 0 rgba(96, 165, 250, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .crt-flicker,
  .vhs-grain,
  .glitch-title[data-text]::before,
  .glitch-title[data-text]::after {
    animation: none !important;
  }

  .vhs-grain {
    opacity: 0.03;
  }

  .crt-overlay {
    opacity: 0.06;
  }

  .corruption-block,
  .phosphor-ghost {
    display: none !important;
  }
}

.corruption-block {
  position: fixed;
  width: 42px;
  height: 18px;
  z-index: 46;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(192, 132, 252, 0.12),
    rgba(192, 132, 252, 0.12) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: screen;
  animation: corrupt-flicker 0.22s steps(2, end) infinite;
}

@keyframes corrupt-flicker {
  to {
    opacity: 0.35;
  }
}

.phosphor-ghost {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 47;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(192, 132, 252, 0.25),
    rgba(96, 165, 250, 0.2),
    transparent
  );
  opacity: 0.55;
  animation: phosphor-fade 0.42s ease forwards;
}

@keyframes phosphor-fade {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.dither-bg {
  background-image: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.02) 0deg 2deg,
    transparent 2deg 4deg
  );
  background-size: 8px 8px;
}