/* Site-wide entrance motion. Elements get .ml-reveal from assets/js/motion.js;
   without JS nothing is hidden. */

.ml-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--ml-reveal-delay, 0ms);
}

.ml-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Catalog/product cards animate whenever they are (re)rendered, incl. filtering.
   fill-mode "backwards" leaves :hover transforms working after the animation. */
.mg-product-card {
    animation: ml-card-in .45s cubic-bezier(.2, .8, .2, 1) backwards;
}

.mg-product-card:nth-child(2) { animation-delay: 40ms; }
.mg-product-card:nth-child(3) { animation-delay: 80ms; }
.mg-product-card:nth-child(4) { animation-delay: 120ms; }
.mg-product-card:nth-child(5) { animation-delay: 160ms; }
.mg-product-card:nth-child(6) { animation-delay: 200ms; }
.mg-product-card:nth-child(7) { animation-delay: 240ms; }
.mg-product-card:nth-child(8) { animation-delay: 280ms; }
.mg-product-card:nth-child(n+9) { animation-delay: 320ms; }

@keyframes ml-card-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
}

/* Product tabs: panel content fades in when switched. */
.mg-product-tab-panel.is-active {
    animation: ml-fade-in .3s ease both;
}

@keyframes ml-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Product gallery main image swaps softly. */
.mg-product-gallery img {
    transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ml-reveal,
    .ml-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mg-product-card,
    .mg-product-tab-panel.is-active {
        animation: none;
    }
}