/* ==========================================================================
   ANIMACIONES CSS: MATH ADVENTURE QUEST
   ========================================================================== */

/* Animación de celebración (Aciertos) */
@keyframes celebrate {
    0% { transform: scale(1); }
    25% { transform: scale(1.15) rotate(-5deg); }
    50% { transform: scale(1.05) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.animate-correct {
    animation: celebrate 0.5s ease-out;
    background-color: var(--color-success) !important;
    border-color: #55b261 !important;
    color: white !important;
}

/* Animación de sacudida suave (Errores no intimidantes) */
@keyframes gentle-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-wrong {
    animation: gentle-shake 0.4s ease-in-out;
    background-color: var(--color-primary) !important;
    border-color: #e54f4f !important;
    color: white !important;
}

/* Animación para hacer flotar globos y burbujas */
@keyframes floatUp {
    0% {
        transform: translateY(380px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(15deg);
        opacity: 0;
    }
}

.animate-float-up {
    animation: floatUp 8s linear infinite;
}

/* Animación para el rebote de estrellas y logros */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

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

/* Animación de latido para botones principales */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2); }
    50% { transform: scale(1.04); box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4); }
    100% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2); }
}

.btn-pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* Transiciones entre pantallas (Fade-in) */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.screen-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Confeti festivo (Mini-partículas que caen en pantalla) */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f0f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
}

/* Animación de succión magnética (Soplo digital) */
@keyframes suckIn {
    0% { transform: scale(1); opacity: 1; filter: blur(0); }
    100% { transform: scale(0.1) rotate(180deg); opacity: 0; filter: blur(3px); }
}

.animate-suck-in {
    animation: suckIn 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}