/* ==========================================================================
   CSS ANIMATIONS & MICRO-INTERACTIONS
   Focused, lightweight, non-gimmick animations for Fantastic English Course
   ========================================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(13, 148, 136, 0);
  }
}

@keyframes mascotWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

.fade-in {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-pop {
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.float-element {
  animation: floatSubtle 4s infinite ease-in-out;
}

.pulse-element {
  animation: pulseGlow 2.5s infinite;
}

.mascot-friendly {
  animation: mascotWiggle 3s infinite ease-in-out;
}

@keyframes questionTransition {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-fade-in {
  animation: questionTransition 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Payment Processing & Success Micro-Animations --- */
@keyframes spinContinuous {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes radarExpand {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes drawCircle {
  0% {
    stroke-dashoffset: 160;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheckmark {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes bounceInPop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes progressBarMove {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.bounce-in {
  animation: bounceInPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}