/* --- DEFINICIÓN DE ANIMACIONES (KEYFRAMES) --- */

/* Entrada suave con escalado */
@keyframes fadeInScale {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

/* Pulso sutil para elementos destacados */
@keyframes softPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Desplazamiento hacia arriba para el dropdown */
@keyframes slideDown {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- APLICACIÓN A TUS ELEMENTOS --- */

/* Aplicar a las pantallas de menú y victoria */
.overlay, #pause-overlay, #victory-screen {
    animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Aplicar pulso al récord en el menú */
#menu-record {
    display: inline-block;
    animation: softPulse 2s infinite ease-in-out;
}

/* Aplicar al menú de idiomas cuando se muestra */
.lang-dropdown.show {
    animation: slideDown 0.3s ease-out forwards;
}

/* Mejora de transiciones globales para botones */
.main-btn, .sec-btn, .lang-btn-main, #pause-trigger, .lang-option {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}