/**
 * Animations
 */

/* ===================== */
/* Keyframes */
/* ===================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

@keyframes slideInDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

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

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

@keyframes glow {
    0%, 100% { box-shadow: var(--glow-green); }
    50% { box-shadow: var(--glow-cyan); }
}

@keyframes neonPulse {
    0%, 100% { 
        text-shadow: var(--glow-green);
        filter: brightness(1);
    }
    50% { 
        text-shadow: var(--glow-cyan), var(--glow-magenta);
        filter: brightness(1.2);
    }
}

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

/* ===================== */
/* Animation Classes */
/* ===================== */

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease forwards;
}

.animate-slideUp {
    animation: slideInUp 0.4s ease forwards;
}

.animate-slideDown {
    animation: slideInDown 0.4s ease forwards;
}

.animate-slideLeft {
    animation: slideInLeft 0.4s ease forwards;
}

.animate-slideRight {
    animation: slideInRight 0.4s ease forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.3s ease forwards;
}

.animate-bounce {
    animation: bounce 1s ease infinite;
}

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

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

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

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-neon {
    animation: neonPulse 2s ease-in-out infinite;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Confetti particle */
.confetti-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    animation: confetti 3s ease-out forwards;
    pointer-events: none;
    z-index: var(--z-overlay);
}

/* Points popup */
.points-popup {
    position: fixed;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent-primary);
    text-shadow: var(--glow-green);
    pointer-events: none;
    animation: pointsFloat 1.5s ease-out forwards;
    z-index: var(--z-overlay);
}

@keyframes pointsFloat {
    0% { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

/* Correct/Wrong flash */
.flash-correct {
    animation: flashGreen 0.5s ease;
}

.flash-wrong {
    animation: flashRed 0.5s ease;
}

@keyframes flashGreen {
    0% { background-color: transparent; }
    50% { background-color: rgba(29, 185, 84, 0.3); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0% { background-color: transparent; }
    50% { background-color: rgba(255, 71, 87, 0.3); }
    100% { background-color: transparent; }
}

/* Disable animations */
.no-animations * {
    animation: none !important;
    transition: none !important;
}