/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes wordIn {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes wordOut {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(-22px);
        filter: blur(6px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .85;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: 1;
    }
}

@keyframes shimmer {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -220% 0;
    }
}

@keyframes badgeBump {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.55);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(16px) scale(.96);
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================================
   ANIMACIONES APLICADAS
============================================================ */

/* Entrada escalonada de tarjetas */
.card {
    animation: cardIn .55s var(--ease) both;
    animation-delay: var(--delay, 0s);
}

/* ============================================================
   ACCESIBILIDAD — respeta "reduce motion"
============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .hero-phrase .word {
        opacity: 1;
        transform: none;
        filter: none;
    }
}