/* Movimiento sobre el diseño actual; el fondo de burbujas sigue siendo el mismo. */
@media (prefers-reduced-motion: no-preference) {
    html[data-bety-motion] [data-bety-reveal="pending"] {
        opacity: 0;
    }

    html[data-bety-motion] [data-bety-reveal="pending"]:focus-within {
        opacity: 1;
    }
    html[data-bety-motion] #hero .hero-left {
        translate: 0 var(--bety-copy-y, 0px);
    }

    html[data-bety-motion] #hero .hero-showcase-image {
        /* Mantener el transform original que coloca la imagen en cada breakpoint. */
        translate: var(--bety-scene-x, 0px) var(--bety-scene-y, 0px);
        scale: var(--bety-scene-scale, 1);
        transition: translate 450ms cubic-bezier(.16, 1, .3, 1),
                    scale 450ms cubic-bezier(.16, 1, .3, 1);
    }

    html[data-bety-motion] #hero .hero-btn-arrow {
        transition: translate 250ms ease;
    }

    html[data-bety-motion] #hero .hero-btn:is(:hover, :focus-visible) .hero-btn-arrow {
        translate: 4px 0;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    html[data-bety-motion] #categorias .category-card {
        transform: perspective(850px)
                   rotateX(var(--bety-card-rx, 0deg))
                   rotateY(var(--bety-card-ry, 0deg))
                   translateY(var(--bety-card-lift, 0px));
        transition: transform 450ms cubic-bezier(.16, 1, .3, 1),
                    border-color 250ms ease, box-shadow 250ms ease;
    }

    html[data-bety-motion] #categorias .category-card:is(:hover, :focus-visible) {
        --bety-card-lift: -5px;
    }

    html[data-bety-motion] #categorias .category-image-product {
        scale: 1;
        transition: scale 600ms cubic-bezier(.16, 1, .3, 1);
    }

    html[data-bety-motion] #categorias .category-card:is(:hover, :focus-visible) .category-image-product {
        scale: 1.045;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-bety-motion] #hero .hero-btn,
    html[data-bety-motion] #categorias .category-card,
    html[data-bety-motion] #categorias .category-arrow {
        transition: none;
    }
}