/* ==========================================================================
   ToonP.com - Animation Engine
   High-energy, Disney/Pixar-inspired comic keyframes & micro-interactions
   ========================================================================== */

/* Gentle Floating */
@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

/* Bouncy Cartoon Character Float */
@keyframes float-bounce {
  0%, 100% {
    transform: translateY(0px) scale(1, 1);
  }
  30% {
    transform: translateY(-18px) scale(0.98, 1.02);
  }
  60% {
    transform: translateY(2px) scale(1.02, 0.98);
  }
}

/* Playful Wiggle */
@keyframes cartoon-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-4deg);
  }
  40% {
    transform: rotate(4deg);
  }
  60% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(2deg);
  }
}

/* Magical Star Twinkle */
@keyframes star-twinkle {
  0%, 100% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2) rotate(45deg);
    opacity: 1;
  }
}

/* Pulse Glow for Magic Elements */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.4), 0 0 30px rgba(124, 58, 237, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.8), 0 0 50px rgba(124, 58, 237, 0.5);
  }
}

/* Cartoon Pop-In Modal / Card Entry */
@keyframes pop-in {
  0% {
    transform: scale(0.7) translateY(40px);
    opacity: 0;
  }
  65% {
    transform: scale(1.05) translateY(-6px);
    opacity: 1;
  }
  85% {
    transform: scale(0.98) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Marquee infinite scroll */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Continuous Subtle Rotate */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sound Wave Bars */
@keyframes sound-wave-1 {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

@keyframes sound-wave-2 {
  0%, 100% { height: 14px; }
  50% { height: 6px; }
}

@keyframes sound-wave-3 {
  0%, 100% { height: 8px; }
  50% { height: 18px; }
}

/* Utility Animation Classes */
.anim-float {
  animation: float-slow 4s ease-in-out infinite;
}

.anim-bounce {
  animation: float-bounce 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.anim-wiggle:hover {
  animation: cartoon-wiggle 0.6s ease-in-out;
}

.anim-twinkle {
  animation: star-twinkle 2s ease-in-out infinite;
}

.anim-spin {
  animation: spin-slow 20s linear infinite;
}

.anim-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.anim-pop-in {
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}