/* ===========================================
   GSAP Animation Keyframes & CSS Animations
   =========================================== */

/* Feedback bounce */
@keyframes bounce-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bounce-out {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* Shake (incorrect answer) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Pulse glow (correct answer) */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 204, 2, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(88, 204, 2, 0); }
}

/* Confetti burst */
@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Star spin */
@keyframes star-spin {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Streak flame */
@keyframes flame-flicker {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    25% { transform: scaleY(1.1) scaleX(0.95); }
    50% { transform: scaleY(0.95) scaleX(1.05); }
    75% { transform: scaleY(1.05) scaleX(0.98); }
}

/* Slide transitions */
@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

/* Pop in (for achievements, badges) */
@keyframes pop-in {
    0% { transform: scale(0); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Shimmer (gold effect) */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Float animation (for decorative elements) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* XP counter increment */
@keyframes xp-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #FFC800; }
    100% { transform: scale(1); }
}

/* ===========================================
   Utility Classes
   =========================================== */

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

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-pulse-green {
    animation: pulse-green 1s ease-in-out 2;
}

.animate-star-spin {
    animation: star-spin 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-flame {
    animation: flame-flicker 0.4s ease-in-out infinite;
}

.animate-slide-in {
    animation: slide-in-right 0.3s ease-out forwards;
}

.animate-slide-out {
    animation: slide-out-left 0.3s ease-in forwards;
}

.animate-pop-in {
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 200, 0, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

.animate-xp-pop {
    animation: xp-pop 0.3s ease-out;
}

/* Confetti container */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confetti-fall 2.5s ease-in forwards;
}

/* Stagger delays for star animations */
.star-1 { animation-delay: 0s; }
.star-2 { animation-delay: 0.15s; }
.star-3 { animation-delay: 0.3s; }

/* Feedback overlay */
.feedback-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    pointer-events: none;
}

.feedback-text {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feedback-correct {
    color: #58CC02;
}

.feedback-incorrect {
    color: #FF9600;
}

/* Progress ring animation */
.progress-ring-animated .progress-ring__circle {
    animation: progress-fill 1s ease-out forwards;
}