/* ==========================================
   MeaghanLingo - Organic Micro-Animations
   Gentle, tactile, comforting animations for a 5-year-old
   ========================================== */

/* Breathing Halo while Listening */
@keyframes breatheGlow {
  0% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 8px rgba(14, 165, 233, 0.15);
  }
  50% {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 0 0 20px rgba(14, 165, 233, 0.28);
  }
  100% {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 8px rgba(14, 165, 233, 0.15);
  }
}

/* Expanding Radar Wave */
@keyframes ringPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Smooth Card Transitions */
.card-slide-out {
  transform: translateX(-40px) scale(0.92) !important;
  opacity: 0 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 1, 1) !important;
}

.card-slide-in {
  animation: cardEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardEnter {
  0% {
    transform: translateX(40px) scale(0.94);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Card Celebration Wobble */
.card-celebrate {
  animation: gentleCelebrate 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes gentleCelebrate {
  0% { transform: scale(1); }
  25% { transform: scale(1.05) rotate(2deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Sparkle Particle Bursts */
@keyframes popSparkle1 {
  0% { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(-80px, -110px) scale(1.3); opacity: 0; }
}

@keyframes popSparkle2 {
  0% { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(85px, -120px) scale(1.4); opacity: 0; }
}

@keyframes popSparkle3 {
  0% { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(-110px, 40px) scale(1.2); opacity: 0; }
}

@keyframes popSparkle4 {
  0% { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(110px, 50px) scale(1.3); opacity: 0; }
}

@keyframes popSparkle5 {
  0% { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(0px, -140px) scale(1.5); opacity: 0; }
}

/* Recording Pulse Indicator */
@keyframes pulseRecording {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}