/* CSS Animation Library - Meadow Math */

/* ========== KEYFRAME ANIMATIONS ========== */

/* Pop - Scale up for emphasis */
@keyframes pop {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Celebrate - Success animation with rotation and sparkle */
@keyframes celebrate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(5deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.15) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Wiggle - Gentle shake for "try again" */
@keyframes wiggle {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-5px) rotate(-2deg);
  }
  75% {
    transform: translateX(5px) rotate(2deg);
  }
}

/* Bounce - Object landing/counting feedback */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Bounce In - Entry animation */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Glow - Highlight for hints */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(123, 198, 126, 0.4);
  }
  50% {
    box-shadow: 0 0 24px rgba(123, 198, 126, 0.8);
  }
}

/* Pulse Glow - Continuous attention getter */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: var(--glow-sm);
    transform: scale(1);
  }
  50% {
    box-shadow: var(--glow-md);
    transform: scale(1.02);
  }
}

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

/* Fade In Up - Slide and fade from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down - Slide and fade from above */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spin - Loading or success spinner */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sparkle - Quick shimmer effect */
@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(180deg);
  }
}

/* Float - Gentle up and down motion */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.animate-pop {
  animation: pop var(--duration-slow) var(--ease-out);
}

.animate-celebrate {
  animation: celebrate 1s var(--ease-out);
}

.animate-wiggle {
  animation: wiggle 0.5s var(--ease-in-out);
}

.animate-bounce {
  animation: bounce 0.6s var(--ease-in-out);
}

.animate-bounce-in {
  animation: bounceIn 0.6s var(--ease-bounce);
}

.animate-glow {
  animation: glow 1.5s var(--ease-in-out) infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s var(--ease-in-out) infinite;
}

.animate-fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-out);
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-out);
}

.animate-fade-in-down {
  animation: fadeInDown var(--duration-slow) var(--ease-out);
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-sparkle {
  animation: sparkle 0.8s var(--ease-in-out);
}

.animate-float {
  animation: float 3s var(--ease-in-out) infinite;
}

/* ========== SPECIAL EFFECTS ========== */

/* Confetti burst (used with JS to position) */
@keyframes confettiBurst {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.5) rotate(360deg);
  }
}

.confetti {
  animation: confettiBurst 1.5s var(--ease-out) forwards;
}

/* Star twinkle */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.twinkle {
  animation: twinkle 1.5s var(--ease-in-out) infinite;
}

/* Heart beat */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
}

.heartbeat {
  animation: heartbeat 1.2s var(--ease-in-out) infinite;
}

/* ========== ACCESSIBILITY - REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-pop,
  .animate-celebrate,
  .animate-wiggle,
  .animate-bounce,
  .animate-bounce-in,
  .animate-glow,
  .animate-pulse-glow,
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-fade-in-down,
  .animate-spin,
  .animate-sparkle,
  .animate-float,
  .confetti,
  .twinkle,
  .heartbeat {
    animation: none !important;
  }
}