/* Animaciones de la tienda (diseño Moderno). Cortas (0.2-0.5 s) y solo si el usuario no pidió reducir movimiento.
   La lógica está en js/motion.js; sin JavaScript todo se ve normal (las clases las agrega el script). */

/* Foto que vuela al carrito (se crea y se borra desde motion.js) */
.mo-fly { position: fixed; z-index: 3000; pointer-events: none; object-fit: contain; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); }

@media (prefers-reduced-motion: no-preference) {

    /* ===== Aparición al bajar por la página ===== */
    .mo-ready .mo-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--mo-delay, 0ms); will-change: opacity, transform; }
    .mo-ready .mo-reveal.mo-item { transform: translateY(14px) scale(.98); }
    .mo-ready .mo-reveal.mo-in { opacity: 1; transform: none; will-change: auto; }

    /* ===== Tarjetas de producto ===== */
    body.shop-modern .shop-card { transition: transform .25s ease, box-shadow .25s ease; }
    body.shop-modern .shop-card .dz-media { overflow: hidden; position: relative; }
    body.shop-modern .shop-card .dz-media img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
    @media (hover: hover) {
        body.shop-modern .shop-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, .10); }
        body.shop-modern .shop-card:hover .dz-media img:not(.is-fallback) { transform: scale(1.06); }
        /* "Ver detalle" sobre la foto */
        body.shop-modern .shop-card:not(.is-swiper):not(.style-3) .dz-media > a:not(.item-bookmark)::after {
            content: 'Ver detalle'; position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); opacity: 0;
            background: rgba(255, 255, 255, .95); color: var(--brand-primary); font-size: 12px; font-weight: 600; padding: 5px 14px;
            border-radius: 999px; box-shadow: 0 4px 14px rgba(16, 24, 40, .12); transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap;
        }
        body.shop-modern .shop-card:not(.is-swiper):not(.style-3):hover .dz-media > a:not(.item-bookmark)::after { opacity: 1; transform: translate(-50%, 0); }
        /* Lista "Recomendados para ti" */
        body.shop-modern .product-items-list .product-items { transition: background-color .2s ease, transform .2s ease; }
        body.shop-modern .product-items-list .product-items:hover { transform: translateX(3px); }
        body.shop-modern .product-items-list .product-items .media img { transition: transform .35s ease; }
        body.shop-modern .product-items-list .product-items:hover .media img { transform: scale(1.08); }
        /* Categorías: el círculo crece un poco */
        body.shop-modern .category-item .media { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s ease; }
        body.shop-modern .category-item a:hover .media { transform: translateY(-3px) scale(1.07); box-shadow: 0 10px 22px rgba(16, 24, 40, .12); }
        body.shop-modern .product-offer .shop-card.style-3 .dz-media img { transition: transform .4s ease; }
        body.shop-modern .product-offer a:hover .shop-card.style-3 .dz-media img { transform: scale(1.08) rotate(-2deg); }
        /* Barra de categorías y botones */
        .dsk-catnav a, .dsk-catnav .cat-more > button { transition: color .2s ease, border-color .2s ease; }
        body.shop-modern .sw-arrow:hover { transform: scale(1.08); }
    }
    /* Al tocar en el celular: leve hundimiento */
    body.shop-modern .shop-card:active, body.shop-modern .category-item a:active .media { transform: scale(.98); }

    /* ===== Botón "Agregar" ===== */
    body.shop-modern .btn-cart, body.shop-modern .btn-primary { transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
    body.shop-modern .btn-cart:active, body.shop-modern .btn-primary:active { transform: scale(.95); }
    body.shop-modern .is-added { opacity: 1 !important; animation: mo-added .45s cubic-bezier(.3, 1.5, .5, 1); background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
    @keyframes mo-added { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

    /* Contador del carrito: pequeño salto */
    .cart-badge.mo-bump { animation: mo-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
    @keyframes mo-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

    /* ===== Corazón de favoritos: latido ===== */
    .item-bookmark.mo-pop svg { animation: mo-heart .5s cubic-bezier(.3, 1.6, .5, 1); }
    @keyframes mo-heart { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }

    /* ===== Brillo mientras carga la foto (esqueleto) ===== */
    .mo-skel { position: relative; background: #f1f4f6; }
    .mo-skel img { opacity: 0; }
    .mo-skel::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 70%) #eef2f4;
        background-size: 220% 100%; animation: mo-shimmer 1.2s linear infinite; }
    @keyframes mo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
    .shop-card .dz-media img, .product-items .media img, .category-item .media img { transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }

    /* ===== Banner principal: el texto entra después de la imagen ===== */
    body.shop-modern .banner-swiper .swiper-slide-active .bs-txt > * { animation: mo-fade-up .6s cubic-bezier(.2, .7, .2, 1) both; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-txt > *:nth-child(2) { animation-delay: .08s; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-txt > *:nth-child(3) { animation-delay: .16s; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-txt > *:nth-child(4) { animation-delay: .24s; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-pic { animation: mo-pop-in .7s cubic-bezier(.3, 1.3, .5, 1) both; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-pic-1 { animation-delay: .12s; }
    body.shop-modern .banner-swiper .swiper-slide-active .bs-pic-2 { animation-delay: .24s; }
    body.shop-modern .m-brand-slide .bs-btn { transition: transform .2s ease, box-shadow .2s ease; }
    body.shop-modern .dz-banner a:hover .bs-btn { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
    @keyframes mo-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes mo-pop-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

    /* ===== "¡Últimas unidades!": pulso suave ===== */
    body.shop-modern .m-low-stock { animation: mo-pulse 2.2s ease-in-out infinite; }
    @keyframes mo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .28); } 50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); } }

    /* ===== Menú "Más categorías": las opciones entran en cascada ===== */
    @media (min-width: 992px) {
        .dsk-catnav .cat-more:hover .cat-more-menu a, .dsk-catnav .cat-more:focus-within .cat-more-menu a { animation: mo-fade-up .3s ease both; }
        .dsk-catnav .cat-more-menu a:nth-child(2) { animation-delay: .02s; } .dsk-catnav .cat-more-menu a:nth-child(3) { animation-delay: .04s; }
        .dsk-catnav .cat-more-menu a:nth-child(4) { animation-delay: .06s; } .dsk-catnav .cat-more-menu a:nth-child(n+5) { animation-delay: .08s; }
    }
}