/* ==========================================================================
   SPIDER-VERSE ANIMATIONS & KEYFRAMES
   GSAP and CSS Keyframe Choreography
   ========================================================================== */

/* Equalizer Bars */
@keyframes eqBounce {
  0% {
    height: 3px;
  }
  50% {
    height: 12px;
  }
  100% {
    height: 6px;
  }
}

/* Status Indicator Pulse */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 10px var(--spider-red);
  }
  50% {
    transform: scale(1.4);
    opacity: 0.7;
    box-shadow: 0 0 20px var(--spider-red);
  }
}

/* Portal Rotating Stamp */
@keyframes rotateStamp {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Spider-Sense Radiation Rays Rotation */
@keyframes rotateRays {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pendulum Web Swinging for upside down Spidey */
@keyframes webSwing {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

/* Floating Atmosphere Drift */
@keyframes floatLayer {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

/* Subtle Comic Glitch Shift */
@keyframes comicGlitch {
  0%, 92%, 100% {
    transform: translate(0, 0);
    filter: drop-shadow(0 0 0 transparent);
  }
  93% {
    transform: translate(-3px, 1px);
    filter: drop-shadow(2px 0 0 #0A4DFF) drop-shadow(-2px 0 0 #E11D2E);
  }
  95% {
    transform: translate(2px, -2px);
    filter: drop-shadow(-2px 0 0 #0A4DFF) drop-shadow(2px 0 0 #E11D2E);
  }
  97% {
    transform: translate(0, 0);
    filter: drop-shadow(0 0 0 transparent);
  }
}

.glitch-hover:hover {
  animation: comicGlitch 3s infinite ease-in-out;
}

/* Dimensional Portal Ring Shimmer */
@keyframes portalPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

.hero-glow-layer {
  animation: portalPulse 6s ease-in-out infinite alternate;
}

/* Scanline Overlay for Villain Dossiers */
.scanline-effect {
  position: relative;
  overflow: hidden;
}

.scanline-effect::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 4;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.4;
}

/* High-Contrast Comic Halftone Dots */
.halftone-accent {
  background-image: radial-gradient(rgba(225, 29, 46, 0.15) 15%, transparent 16%);
  background-size: 12px 12px;
}

/* Infinite Ticker Belt Horizontal Marquee */
@keyframes tickerMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes tickerMarqueeReverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Respect Accessibility Preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}