/* =========================================================
   GDS — PREMIUM SCROLL REVEAL
   Smooth • Subtle • Layout Safe
========================================================= */


/* =========================================================
   BASE REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform:
        translate3d(0, 55px, 0)
        scale(.985);

    filter: blur(4px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform .95s cubic-bezier(.22, 1, .36, 1),
        filter .85s cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform,
        filter;
}


/* =========================================================
   VISIBLE STATE
========================================================= */

.reveal.is-visible {
    opacity: 1;

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

    filter: blur(0);
}


/* =========================================================
   OPTIONAL DIRECTIONS
========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translate3d(-55px, 0, 0)
        scale(.985);

    filter: blur(4px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform .95s cubic-bezier(.22, 1, .36, 1),
        filter .85s cubic-bezier(.22, 1, .36, 1);
}


.reveal-right {
    opacity: 0;

    transform:
        translate3d(55px, 0, 0)
        scale(.985);

    filter: blur(4px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform .95s cubic-bezier(.22, 1, .36, 1),
        filter .85s cubic-bezier(.22, 1, .36, 1);
}


.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;

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

    filter: blur(0);
}


/* =========================================================
   STAGGER
========================================================= */

.reveal-stagger > * {
    opacity: 0;

    transform:
        translate3d(0, 30px, 0);

    filter: blur(3px);

    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .8s cubic-bezier(.22, 1, .36, 1),
        filter .7s cubic-bezier(.22, 1, .36, 1);
}


.reveal-stagger.is-visible > * {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    filter: blur(0);
}


/* =========================================================
   STAGGER DELAYS
========================================================= */

.reveal-stagger.is-visible > *:nth-child(1) {
    transition-delay: .05s;
}

.reveal-stagger.is-visible > *:nth-child(2) {
    transition-delay: .12s;
}

.reveal-stagger.is-visible > *:nth-child(3) {
    transition-delay: .19s;
}

.reveal-stagger.is-visible > *:nth-child(4) {
    transition-delay: .26s;
}

.reveal-stagger.is-visible > *:nth-child(5) {
    transition-delay: .33s;
}

.reveal-stagger.is-visible > *:nth-child(6) {
    transition-delay: .40s;
}


/* =========================================================
   FAST REVEAL
========================================================= */

.reveal-fast {
    transition-duration: .65s;
}


/* =========================================================
   SLOW / HERO-LIKE REVEAL
========================================================= */

.reveal-slow {
    transition-duration: 1.05s;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .reveal {
        transform:
            translate3d(0, 35px, 0)
            scale(.99);

        filter: blur(3px);

        transition:
            opacity .7s cubic-bezier(.22, 1, .36, 1),
            transform .8s cubic-bezier(.22, 1, .36, 1),
            filter .7s cubic-bezier(.22, 1, .36, 1);
    }


    .reveal.is-visible {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }


    .reveal-left {
        transform:
            translate3d(-35px, 0, 0)
            scale(.99);
    }


    .reveal-right {
        transform:
            translate3d(35px, 0, 0)
            scale(.99);
    }


    .reveal-stagger > * {
        transform:
            translate3d(0, 22px, 0);

        filter: blur(2px);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-stagger > * {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        transition: none !important;
    }

}