/* ===================================
   03 - Animaciones
   Todos los @keyframes del sitio + las clases utilitarias
   que los aplican. Si un keyframe no aparece aqui, no existe.
   =================================== */

/* ===== Entrada / fade ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out;
}

/* ===== Hero =====
   Todas se desactivan en prefers-reduced-motion (ver 09-sections.css). */

/* Entrada escalonada de los bloques del hero */
@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Zoom lento sobre la foto de la tienda.
   Arranca en scale(1): el primer fotograma, que es el que ve el visitante
   al cargar (y el que mide el LCP), sale a resolucion real y nitido. */
@keyframes heroKenBurns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-2%, -1.2%, 0); }
}

/* Entrada de las tarjetas de producto al aparecer en pantalla.
   Es un adorno: la tarjeta ya es visible antes de que se aplique. */
@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Spinner de carga ===== */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Skeleton loader ===== */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* NOTA: @keyframes badge-pulse y float estan en 99-sin-uso.css
   porque las clases que los usan no aparecen en el proyecto. */