/* ==========================================================================
   SHABBY MAX — CRT overlay (scanlines, grain, chromatic aberration, vignette)
   Effect should stay almost imperceptible per spec.
   ========================================================================== */

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-crt);
  pointer-events: none;
  mix-blend-mode: normal;
}

/* Scanlines */
.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
}

/* Film grain — animated SVG turbulence noise, tiled */
.crt-grain {
  position: absolute;
  inset: -50px;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 800ms steps(4) infinite;
}

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

/* Chromatic aberration — faint RGB fringe at the extreme edges only */
.crt-aberration {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 3px 0 6px -3px rgba(255, 0, 80, 0.25),
    inset -3px 0 6px -3px rgba(0, 200, 255, 0.25);
}

/* Vignette */
.crt-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Very slight overall flicker */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.985; }
}

.crt-overlay {
  animation: crt-flicker 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .crt-grain {
    animation: none;
  }
}
