/* doc-project | projet/assets/css/scroll-reveal.css | styles dedies aux entrees animees gauche droite et au lazy-loading progressif des medias catalogue, avec amplitudes mobile reduites et containment pour eviter le debordement horizontal pendant les reveals */
.js .reveal-on-scroll {
    opacity: 0;
    transform: translate3d(var(--reveal-translate-x, 0), var(--reveal-translate-y, 0), 0);
    transition:
        opacity 680ms ease,
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js .reveal-on-scroll[data-reveal-direction="left"] {
    --reveal-translate-x: -56px;
    --reveal-translate-y: 0px;
}

.js .reveal-on-scroll[data-reveal-direction="right"] {
    --reveal-translate-x: 56px;
    --reveal-translate-y: 0px;
}

.js .reveal-on-scroll[data-reveal-direction="up"] {
    --reveal-translate-x: 0px;
    --reveal-translate-y: 42px;
}

.js .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.product-card__media {
    position: relative;
}

.js .product-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 82%);
    transform: translateX(-120%);
    animation: sabatier-media-shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.js .product-card__media.is-media-loaded::before {
    display: none;
}

.product-card__media noscript img {
    position: relative;
    z-index: 1;
}

.sabatier-lazy {
    display: none;
}

.js .sabatier-lazy {
    display: block;
    position: relative;
    z-index: 1;
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    transition:
        opacity 420ms ease,
        filter 520ms ease,
        transform 520ms ease;
}

.js .sabatier-lazy.is-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

@keyframes sabatier-media-shimmer {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal-on-scroll,
    .js .sabatier-lazy {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .js .product-card__media::before {
        animation: none;
        display: none;
    }
}

@media (max-width: 720px) {
    .js .reveal-on-scroll[data-reveal-direction="left"] {
        --reveal-translate-x: -24px;
    }

    .js .reveal-on-scroll[data-reveal-direction="right"] {
        --reveal-translate-x: 24px;
    }

    .js .reveal-on-scroll[data-reveal-direction="up"] {
        --reveal-translate-y: 24px;
    }
}