/* ==========================================================================
   MOTIONGRAPHIC.APP - KEYFRAME ANIMATIONS & GLOW UTILITIES
   ========================================================================== */

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

@keyframes gridFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-40px);
  }
}

@keyframes borderRotate {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes floatElement {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

@keyframes badgeBeacon {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 68, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 68, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 0, 0);
  }
}

@keyframes scanline {
  0% {
    top: -20%;
  }
  100% {
    top: 120%;
  }
}

/* Reusable animation utility classes */
.anim-pulse {
  animation: pulseGlow 4s ease-in-out infinite;
}

.anim-float {
  animation: floatElement 6s ease-in-out infinite;
}

.beacon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF4400;
  display: inline-block;
  animation: badgeBeacon 2s infinite;
}

.beacon-green {
  background: #10B981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

/* Gradient text utility */
.gradient-text-orange {
  background: linear-gradient(135deg, #FFFFFF 20%, #FF6B35 70%, #FF4400 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-fire {
  background: linear-gradient(135deg, #FF7A30 0%, #FF4400 50%, #FF1E00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glassmorphism & Cyber card effects */
.glass-panel {
  background: rgba(18, 20, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-glow {
  background: radial-gradient(circle at top left, rgba(255, 68, 0, 0.08), transparent 70%), rgba(16, 18, 24, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 68, 0, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Shimmer reflection */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-20deg) translateX(-150%);
  animation: shimmer 6s infinite;
  pointer-events: none;
}

/* Radar & Cyber HUD Rotations */
@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radarSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.anim-radar {
  animation: radarSpin 12s linear infinite;
  transform-origin: center center;
}

.anim-radar-fast {
  animation: radarSpin 4s linear infinite;
  transform-origin: center center;
}

.anim-radar-rev {
  animation: radarSpinRev 16s linear infinite;
  transform-origin: center center;
}

/* Marquee Ticker for Editorial Style */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.anim-marquee {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll 18s linear infinite;
}

/* Neon Glow Pulses */
@keyframes cyanGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.85)); }
}

.glow-cyan {
  animation: cyanGlow 3s ease-in-out infinite;
}

@keyframes emeraldGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); }
  50% { filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)); }
}

.glow-emerald {
  animation: emeraldGlow 3s ease-in-out infinite;
}