/* ========================================
   EcoSmartPlay - Animations
   All keyframe animations and transitions
   ======================================== */

/* Glow Pulse */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(20, 184, 166, 0.15);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5), 0 0 60px rgba(20, 184, 166, 0.25);
  }
}

/* Eco Gradient Background Animation */
@keyframes eco-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* Scan Pulse */
@keyframes scan-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
}

/* Count Up */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

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

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

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

/* Slide In Right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Slide In Left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Loading Dots */
@keyframes loading-dot {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.6); opacity: 1; }
}

/* Scan Line */
@keyframes scan-line {
  0% { top: 0; }
  100% { top: 100%; }
}

/* Scale Press */
@keyframes scalePress {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Particle Float */
@keyframes particle-float {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(-30px); opacity: 0.8; }
}

/* Leaf Sway */
@keyframes leaf-sway {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.1; }
  25% { transform: translateY(-10px) translateX(5px) rotate(7deg); opacity: 0.2; }
  50% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0.25; }
  75% { transform: translateY(-10px) translateX(-5px) rotate(-7deg); opacity: 0.2; }
  100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.1; }
}

/* Glow Ring */
@keyframes glow-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Icon Entrance */
@keyframes icon-entrance {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Title Entrance */
@keyframes title-entrance {
  0% { opacity: 0; transform: translateY(25px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

/* Slogan Entrance */
@keyframes slogan-entrance {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Badge Entrance */
@keyframes badge-entrance {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Line Expand */
@keyframes line-expand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Flip Card */
@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}

/* Progress Fill */
@keyframes progress-fill {
  from { width: 0; }
}

/* Card Stagger In */
@keyframes card-stagger-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Utility Animation Classes */
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-eco-gradient {
  background-size: 200% 200%;
  animation: eco-gradient 4s ease infinite;
}
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-scan-pulse { animation: scan-pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 10s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }
.animate-fadeInUp { animation: fadeInUp 0.4s ease-out forwards; }
.animate-scaleIn { animation: scaleIn 0.3s ease-out forwards; }

/* Easing */
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Transition Defaults */
.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-colors {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}