/* ==========================================================
   SISTEMA DE ANIMACIONES MEC
   Responsabilidad: Motores de movimiento y transiciones elásticas.
   Unidades: Exclusivamente rem, %, vh, vw y clamp.
   ========================================================== */

:root {
    /* --- 1. TIEMPOS Y CURVAS MAESTRAS --- */
    --trans-fast: 0.15s ease;
    --trans-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --trans-smooth: 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    --trans-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --trans-slow: 0.8s cubic-bezier(0.23, 1, 0.32, 1);

    /* --- 2. DURACIONES DE ANIMACIÓN --- */
    --dur-instant: 0.1s;
    --dur-normal: 0.4s;
    --dur-slow: 0.8s;
    --dur-infinite: 2.5s;

    /* --- 3. DESPLAZAMIENTOS LÍQUIDOS (TOKENS) --- */
    --offset-entrada: 2rem;
    --offset-rebote: 1.25rem;
    --offset-flote: 0.625rem;
}

/* ----------------------------------------------------------
   1. KEYFRAMES (MOTORES DE MOVIMIENTO)
   ---------------------------------------------------------- */

/* Entradas Suaves */
@keyframes mecAparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mecAparecerArriba {
    from { opacity: 0; transform: translateY(calc(var(--offset-entrada) * -1)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mecAparecerAbajo {
    from { opacity: 0; transform: translateY(var(--offset-entrada)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mecAparecerDerecha {
    from { opacity: 0; transform: translateX(var(--offset-entrada)); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mecAparecerIzquierda {
    from { opacity: 0; transform: translateX(calc(var(--offset-entrada) * -1)); }
    to { opacity: 1; transform: translateX(0); }
}

/* Escalas y Dinamismo */
@keyframes mecZoomEntrar {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mecZoomSalir {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }
    
}

/* Atención y Énfasis */
@keyframes mecRebotar {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(calc(var(--offset-rebote) * -1)); }
    60% { transform: translateY(calc(var(--offset-rebote) * -0.5)); }
}

@keyframes mecGelatina {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
}

@keyframes mecVibrar {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.3rem) rotate(-1deg); }
    75% { transform: translateX(0.3rem) rotate(1deg); }
}

/* Estados Continuos (Loops) */
@keyframes mecGirar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mecLatir {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110, 198, 198, 0.4); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 1rem rgba(110, 198, 198, 0); }
    100% { transform: scale(1); }
}

@keyframes mecLatirRojo {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(226, 27, 60, 0.5); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 1.2rem rgba(226, 27, 60, 0); }
    100% { transform: scale(1); }
}

@keyframes mecFlotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--offset-flote) * -1)); }
}

@keyframes mecFlotarHaciaArriba {
    0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; }
    20% { transform: translateY(-20dvh) scale(1.2) rotate(15deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-110dvh) scale(0.8) rotate(-15deg); opacity: 0; }
}

@keyframes mecParpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes mecLogroEntrada {
    0% { transform: translateX(120%) scale(0.9); opacity: 0; }
    70% { transform: translateX(-10%) scale(1.05); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes mecLogroSalida {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    100% { transform: translateX(120%) scale(0.9); opacity: 0; }
}

@keyframes mecCheckExito {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    80% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Animación de Vaciado (GPU First) */
@keyframes mecAparicionNotificacion {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Animación de Color (Semáforo) */
@keyframes mecCambioColorNotificacion {
    0%   { background-color: var(--color-verde); }
    50%  { background-color: var(--color-amarillo); }
    75%  { background-color: var(--color-naranjo); }
    100% { background-color: var(--color-rojo); }
}

/* Serpentinas (Podio) */
@keyframes mecConfetiCaida {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(calc((var(--mec-random, 0.5) - 0.5) * 15rem), 110vh, 0) rotate(720deg);
        opacity: 0.3;
    }
}

/* Animación y clase de ascenso para reacciones sociales en vivo */
@keyframes mecFlotarHaciaArriba {
    0% {
        transform: translate3d(0, 0, 0) scale(0.6);
        opacity: 0;
    }
    15% {
        transform: translate3d(0, -12dvh, 0) scale(1.25);
        opacity: 1;
    }
    75% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(0, -90dvh, 0) scale(0.85);
        opacity: 0;
    }
}

/* --- MOTORES DE CELEBRACIÓN DEL PODIO --- */
@keyframes mecElevarPedestal {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
    60% {
        transform: scaleY(1.08);
        opacity: 1;
    }
    85% {
        transform: scaleY(0.96);
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes mecCaerCampeon {
    0% {
        transform: translate3d(0, -6rem, 0) scale(0.3) rotate(-15deg);
        opacity: 0;
    }
    65% {
        transform: translate3d(0, 0.5rem, 0) scale(1.15) rotate(5deg);
        opacity: 1;
    }
    85% {
        transform: translate3d(0, -0.2rem, 0) scale(0.95) rotate(-2deg);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes mecResplandorOro {
    0%, 100% {
        box-shadow: 0 0.8rem 2rem rgba(255, 179, 0, 0.35), inset 0 0.15rem 0.4rem rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 0 1rem 3rem rgba(255, 179, 0, 0.65), 0 0 1.5rem rgba(255, 235, 59, 0.5), inset 0 0.25rem 0.6rem rgba(255, 255, 255, 0.9);
    }
}

@keyframes mecDestelloCorona {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-0.35rem) rotate(8deg) scale(1.15); }
}

@keyframes mecAnimCooldown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ----------------------------------------------------------
   2. CLASES DE UTILIDAD (MODIFICADORES ATÓMICOS)
   ---------------------------------------------------------- */

/* Básicas */
.mec-anim-aparecer { animation: mecAparecer var(--dur-normal) forwards; }
.mec-anim-aparecer-arriba { animation: mecAparecerArriba var(--dur-normal) var(--trans-smooth) forwards; }
.mec-anim-aparecer-abajo { animation: mecAparecerAbajo var(--dur-normal) var(--trans-smooth) forwards; }
.mec-anim-aparecer-derecha { animation: mecAparecerDerecha var(--dur-normal) var(--trans-smooth) forwards; }
.mec-anim-aparecer-izquierda { animation: mecAparecerIzquierda var(--dur-normal) var(--trans-smooth) forwards; }

/* Énfasis */
.mec-anim-zoom { animation: mecZoomEntrar var(--dur-normal) var(--trans-bounce) forwards; }
.mec-anim-rebotar { animation: mecRebotar 0.8s var(--trans-bounce); }
.mec-anim-gelatina { animation: mecGelatina 0.8s both; }
.mec-anim-vibrar { animation: mecVibrar 0.3s linear infinite; }
.mec-anim-flotar { animation: mecFlotar 3s ease-in-out infinite; }

/* Loops */
.mec-anim-girar { animation: mecGirar 2s linear infinite; }
.mec-anim-latir { animation: mecLatir var(--dur-infinite) infinite; }
.mec-anim-latir-rojo { animation: mecLatirRojo 1.5s infinite; }
.mec-anim-parpadeo { animation: mecParpadeo 1.5s ease-in-out infinite; }

/* Animaciones del juego */
.mec-anim-logro { animation: mecLogroEntrada 0.6s var(--mec-juego-curva-elastica) forwards; }
.mec-anim-logro-salir { animation: mecLogroSalida 0.5s ease-in forwards; }
.mec-anim-check { animation: mecCheckExito 0.5s var(--mec-juego-curva-elastica) forwards; }
.mec-anim-error {
    animation: mecVibrarSuave 0.2s ease-in-out 3;
    box-shadow: 0 0 clamp(1rem, 5vw, 3rem) var(--color-rojo-palido) !important;
    border-color: var(--color-rojo) !important;
    transition: box-shadow 0.3s ease;
}
.mec-confeti-particula {
    position: absolute;
    top: 0;
    border-radius: var(--radio-pequeno);
    opacity: 0.9;
    will-change: transform, opacity;
    animation: mecConfetiCaida ease-in infinite;
}
.mec-anim-flotar-arriba {
    animation: mecFlotarHaciaArriba 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    pointer-events: none !important;
    will-change: transform, opacity;
}
.mec-anim-pedestal-subir {
    transform-origin: bottom center;
    animation: mecElevarPedestal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform;
}

.mec-anim-campeon-aterrizar {
    animation: mecCaerCampeon 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

.mec-oro-radiante {
    animation: mecResplandorOro 2.2s ease-in-out infinite;
}

.mec-corona-animada {
    animation: mecDestelloCorona 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   5. ACCESIBILIDAD (SISTEMA DE DISEÑO RESPONSABLE)
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimización para Pantallas Pequeñas (Smartwatch/Mini-movil) */
@media (max-width: 20rem) {
    :root {
        --offset-entrada: 1rem;
        --offset-rebote: 0.75rem;
    }
}