/* ============================================================
   LALIGURANS — GLOBAL SCROLL REVEAL SYSTEM
   ------------------------------------------------------------
   Reusable across the whole storefront.

   Examples:
     data-reveal="up"
     data-reveal="left"
     data-reveal="right"
     data-reveal="scale"
     data-reveal="fade"

   Optional:
     data-reveal-delay="120"
     data-reveal-duration="700"

   Group stagger:
     data-reveal-group
     data-reveal-stagger="90"
============================================================ */


/* ------------------------------------------------------------
   Base hidden state
------------------------------------------------------------ */

[data-reveal] {
    --lg-reveal-x: 0px;
    --lg-reveal-y: 24px;
    --lg-reveal-scale: 1;
    --lg-reveal-delay: 0ms;
    --lg-reveal-duration: 700ms;

    opacity: 0;

    transform:
        translate3d(
            var(--lg-reveal-x),
            var(--lg-reveal-y),
            0
        )
        scale(
            var(--lg-reveal-scale)
        );

    transition:
        opacity
        var(--lg-reveal-duration)
        cubic-bezier(.22, 1, .36, 1)
        var(--lg-reveal-delay),

        transform
        var(--lg-reveal-duration)
        cubic-bezier(.22, 1, .36, 1)
        var(--lg-reveal-delay);

    will-change:
        opacity,
        transform;
}


/* ------------------------------------------------------------
   Variants
------------------------------------------------------------ */

[data-reveal="up"] {
    --lg-reveal-x: 0px;
    --lg-reveal-y: 26px;
}


[data-reveal="down"] {
    --lg-reveal-x: 0px;
    --lg-reveal-y: -24px;
}


[data-reveal="left"] {
    --lg-reveal-x: -32px;
    --lg-reveal-y: 0px;
}


[data-reveal="right"] {
    --lg-reveal-x: 32px;
    --lg-reveal-y: 0px;
}


[data-reveal="scale"] {
    --lg-reveal-x: 0px;
    --lg-reveal-y: 10px;
    --lg-reveal-scale: .955;
}


[data-reveal="fade"] {
    --lg-reveal-x: 0px;
    --lg-reveal-y: 0px;
    --lg-reveal-scale: 1;
}


/* ------------------------------------------------------------
   Revealed state
------------------------------------------------------------ */

[data-reveal].is-revealed {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    will-change: auto;
}


/* ------------------------------------------------------------
   Prevent flashes before JS initializes.
   JS adds .lg-reveal-ready to <html>.
------------------------------------------------------------ */

html:not(.lg-reveal-ready) [data-reveal] {
    opacity: 1;

    transform: none;
}


/* ------------------------------------------------------------
   Accessibility
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    [data-reveal] {
        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }   

}