/* ==========================================================================
   CINEMATIC FX, SVG NOISE & SCANLINES
   Transforms standard web elements into a bespoke studio-grade interface
   ========================================================================== */

/* Filmic Noise Grain Texture (Pure SVG Data URI - Lightweight, Zero Request) */
.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Subtle CRT Micro-Scanlines */
.scanline-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: linear-gradient(
    rgba(18, 16, 26, 0) 50%, 
    rgba(0, 0, 0, 0.28) 50%
  );
  background-size: 100% 4px;
  opacity: 0.14;
}

/* Glitch Burst (Triggered on Easter Egg click) */
.glitch-active {
  animation: chromaticAberration 0.35s steps(2, end);
}

@keyframes chromaticAberration {
  0% {
    transform: translate(0);
    text-shadow: -2px 0 var(--cyan-neon), 2px 0 var(--purple-neon);
  }
  25% {
    transform: translate(-2px, 1px);
    text-shadow: 2px -1px var(--gold-primary), -2px 1px var(--cyan-neon);
  }
  50% {
    transform: translate(2px, -1px);
    text-shadow: -3px 0 var(--purple-neon), 3px 0 var(--gold-primary);
  }
  75% {
    transform: translate(-1px, -1px);
    text-shadow: 1px 2px var(--cyan-neon), -1px -2px var(--purple-neon);
  }
  100% {
    transform: translate(0);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.3);
  }
}

/* Magnetic Cursor Aura (Violet glow) */
.cursor-aura {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s, border-color 0.2s;
  mix-blend-mode: screen;
}

.cursor-aura.active {
  width: 54px;
  height: 54px;
  background: rgba(168, 85, 247, 0.18);
  border-color: var(--purple-neon);
}

@media (hover: none) or (max-width: 768px) {
  .cursor-aura {
    display: none;
  }
}