/* Conversation Radar - Animation Library */
/* All motion graphics and keyframe animations */

/* ========================================
   CORE ANIMATIONS
   ======================================== */

/* Radar Sweep Animation */
@keyframes radarSweep {
  0% { 
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% { 
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Radar Pulse */
@keyframes radarPulse {
  0%, 100% { 
    opacity: 0;
    transform: scale(0.8);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Neon Flicker Effect */
@keyframes neonFlicker {
  0%, 100% { 
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(0, 255, 65, 0.8),
      0 0 20px rgba(0, 255, 65, 0.6),
      0 0 30px rgba(0, 255, 65, 0.4);
  }
  92% { opacity: 1; }
  93% { 
    opacity: 0.8;
    text-shadow: 
      0 0 5px rgba(0, 255, 65, 0.8),
      0 0 10px rgba(0, 255, 65, 0.6);
  }
  94% { opacity: 1; }
  95% { opacity: 0.9; }
  96% { opacity: 1; }
}

/* Gradient Animation */
@keyframes gradientShift {
  0% { 
    background-position: 0% 50%;
  }
  50% { 
    background-position: 100% 50%;
  }
  100% { 
    background-position: 0% 50%;
  }
}

/* Glow Pulse */
@keyframes glowPulse {
  0%, 100% { 
    box-shadow: 
      0 0 5px rgba(0, 255, 65, 0.5),
      0 0 10px rgba(0, 255, 65, 0.3),
      0 0 15px rgba(0, 255, 65, 0.2),
      inset 0 0 5px rgba(0, 255, 65, 0.1);
  }
  50% { 
    box-shadow: 
      0 0 10px rgba(0, 255, 65, 0.8),
      0 0 20px rgba(0, 255, 65, 0.6),
      0 0 30px rgba(0, 255, 65, 0.4),
      inset 0 0 10px rgba(0, 255, 65, 0.2);
  }
}

/* Data Stream Effect */
@keyframes dataStream {
  0% { 
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Scan Line */
@keyframes scanLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* ========================================
   ENTRANCE ANIMATIONS
   ======================================== */

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   RADAR-SPECIFIC ANIMATIONS
   ======================================== */

/* Radar Blip */
@keyframes radarBlip {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Signal Detection */
@keyframes signalDetect {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(0, 255, 65, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

/* Radar Grid Pulse */
@keyframes gridPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* Target Lock */
@keyframes targetLock {
  0% {
    transform: scale(1) rotate(0deg);
    border-color: rgba(0, 255, 65, 0.3);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    border-color: rgba(0, 255, 65, 1);
  }
  100% {
    transform: scale(1) rotate(360deg);
    border-color: rgba(0, 255, 65, 0.3);
  }
}

/* Wave Ripple */
@keyframes waveRipple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ========================================
   BUTTON & CTA ANIMATIONS
   ======================================== */

/* Button Pulse */
@keyframes buttonPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Button Glow */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(0, 255, 65, 0.5),
      inset 0 0 10px rgba(0, 255, 65, 0.1);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(0, 255, 65, 0.8),
      inset 0 0 20px rgba(0, 255, 65, 0.2);
  }
}

/* Flash */
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Shake */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* ========================================
   TEXT ANIMATIONS
   ======================================== */

/* Type Writer */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Text Glow Pulse */
@keyframes textGlowPulse {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(0, 255, 65, 0.5),
      0 0 10px rgba(0, 255, 65, 0.3);
  }
  50% {
    text-shadow: 
      0 0 10px rgba(0, 255, 65, 0.8),
      0 0 20px rgba(0, 255, 65, 0.6),
      0 0 30px rgba(0, 255, 65, 0.4);
  }
}

/* Matrix Text Fall */
@keyframes matrixFall {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* ========================================
   BACKGROUND ANIMATIONS
   ======================================== */

/* Grid Move */
@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* Gradient Wave */
@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Static Noise */
@keyframes staticNoise {
  0%, 100% {
    opacity: 0.02;
  }
  50% {
    opacity: 0.05;
  }
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/* Radar Loading */
@keyframes radarLoading {
  0% {
    transform: rotate(0deg);
    border-top-color: var(--neon-green);
  }
  25% {
    border-right-color: var(--neon-green);
  }
  50% {
    border-bottom-color: var(--neon-green);
  }
  75% {
    border-left-color: var(--neon-green);
  }
  100% {
    transform: rotate(360deg);
    border-top-color: var(--neon-green);
  }
}

/* Dots Loading */
@keyframes dotsLoading {
  0%, 80%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   INTERACTION FEEDBACK
   ======================================== */

/* Click Ripple */
@keyframes clickRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Hover Lift */
@keyframes hoverLift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Focus Ring */
@keyframes focusRing {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0);
  }
}

/* ========================================
   COMPLEX SEQUENCES
   ======================================== */

/* Radar Boot Sequence */
@keyframes radarBoot {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  20% {
    opacity: 0.2;
    filter: blur(8px);
  }
  40% {
    opacity: 0.4;
    filter: blur(5px);
  }
  60% {
    opacity: 0.6;
    filter: blur(3px);
  }
  80% {
    opacity: 0.8;
    filter: blur(1px);
  }
  90% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* Signal Transmission */
@keyframes signalTransmit {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  40% {
    opacity: 1;
    transform: scaleX(1);
  }
  60% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right center;
  }
}

/* ========================================
   UTILITY ANIMATIONS
   ======================================== */

/* Slow Pulse */
@keyframes pulseSlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

/* Rotate */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ========================================
   ANIMATION CLASSES
   ======================================== */

.animate-radar-sweep { animation: radarSweep 3s linear infinite; }
.animate-pulse { animation: radarPulse 2s ease-in-out infinite; }
.animate-flicker { animation: neonFlicker 5s infinite; }
.animate-glow { animation: glowPulse 2s ease-in-out infinite; }
.animate-data-stream { animation: dataStream 3s linear infinite; }
.animate-scan { animation: scanLine 4s linear infinite; }
.animate-fade-in { animation: fadeIn 1s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 1s ease forwards; }
.animate-scale-in { animation: scaleIn 0.5s ease forwards; }
.animate-boot { animation: radarBoot 2s ease forwards; }

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-1000 { animation-delay: 1s; }

/* Animation Speeds */
.animate-slow { animation-duration: 3s; }
.animate-normal { animation-duration: 1.5s; }
.animate-fast { animation-duration: 0.5s; }