/*
  Animaciones. Principios:
  - Solo transform y opacity.
  - El contenido es visible por defecto; solo se oculta cuando JS está activo (.js) y el movimiento está permitido (.motion-ok).
  - Una animación de página protagonista (el hero); el resto responde a acciones o aparece una sola vez.
*/

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(0.5rem); } }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes filter-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Revelado de elementos (IntersectionObserver añade .is-in una sola vez) */
.js.motion-ok [data-reveal],
.js.motion-ok [data-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.js.motion-ok [data-reveal].is-in,
.js.motion-ok [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
}

/* Hero: palabras del título */
.hero-slide__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-slide__title .w > span { display: inline-block; }
.js.motion-ok .hero-slide__title .w > span { transform: translateY(105%); }
.js.motion-ok .hero-slide.is-active .hero-slide__title .w > span {
    transform: none;
    transition: transform 0.8s var(--ease) calc(var(--i, 0) * 55ms + 200ms);
}

.js.motion-ok .hero-slide__text,
.js.motion-ok .hero-slide__cta { opacity: 0; transform: translateY(14px); }
.js.motion-ok .hero-slide.is-active .hero-slide__text { opacity: 1; transform: none; transition: opacity 0.7s var(--ease) 0.55s, transform 0.7s var(--ease) 0.55s; }
.js.motion-ok .hero-slide.is-active .hero-slide__cta { opacity: 1; transform: none; transition: opacity 0.7s var(--ease) 0.7s, transform 0.7s var(--ease) 0.7s; }

.js.motion-ok .hero-slide__art img { opacity: 0; transform: translateX(28px) scale(0.97); }
.js.motion-ok .hero-slide.is-active .hero-slide__art img { opacity: 1; transform: none; transition: opacity 0.9s var(--ease) 0.15s, transform 1s var(--ease) 0.15s; }
.js.motion-ok .hero-slide--2 .hero-slide__art img { transform: translateX(-28px) scale(0.97); }
.js.motion-ok .hero-slide--2.is-active .hero-slide__art img { transform: none; }

/* Hero: preparación inicial (JS oculta los hijos sin transición y luego los deja entrar) */
.js.motion-ok .hero:not([data-init]) .hero-slide__inner { opacity: 0; }
.js.motion-ok .hero.is-prep .hero-slide.is-active .hero-slide__title .w > span { transform: translateY(105%); transition: none; }
.js.motion-ok .hero.is-prep .hero-slide.is-active .hero-slide__text,
.js.motion-ok .hero.is-prep .hero-slide.is-active .hero-slide__cta { opacity: 0; transform: translateY(14px); transition: none; }
.js.motion-ok .hero.is-prep .hero-slide.is-active .hero-slide__art img { opacity: 0; transform: translateX(28px) scale(0.97); transition: none; }
.js.motion-ok .hero.is-prep .hero-slide--2.is-active .hero-slide__art img { transform: translateX(-28px) scale(0.97); }

/* Filtros: entrada de resultados */
.product-card.is-entering { animation: filter-in 0.35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* Parallax: lo mueve JS con transform; aquí solo se prepara */
[data-parallax] { will-change: transform; }

/* Movimiento reducido: sin transiciones decorativas, todo visible al instante */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .product-card:hover, .product-card:focus-within { transform: none; }
}