/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


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

.reveal--left {
    transform: translateX(-60px);
}

.reveal--right {
    transform: translateX(60px);
}

.reveal--up {
    transform: translateY(60px);
}

.reveal--scale {
    transform: scale(0.92);
}

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--up.is-visible {
    transform: translate(0);
}

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


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

.reveal-group > .reveal:nth-child(1) {
    --reveal-delay: 0ms;
}

.reveal-group > .reveal:nth-child(2) {
    --reveal-delay: 100ms;
}

.reveal-group > .reveal:nth-child(3) {
    --reveal-delay: 200ms;
}

.reveal-group > .reveal:nth-child(4) {
    --reveal-delay: 300ms;
}

.reveal-group > .reveal:nth-child(5) {
    --reveal-delay: 400ms;
}

.reveal-group > .reveal:nth-child(6) {
    --reveal-delay: 500ms;
}

.reveal-group > .reveal:nth-child(7) {
    --reveal-delay: 600ms;
}

.reveal-group > .reveal:nth-child(8) {
    --reveal-delay: 700ms;
}


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

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

    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--up,
    .reveal--scale {
        opacity: 1;

        transform: none;

        transition: none;
    }

}