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

.reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .9s cubic-bezier(.22, .61, .36, 1),
        transform .9s cubic-bezier(.22, .61, .36, 1);

    will-change: opacity, transform;
}


/* ==========================================
   ACTIVE
========================================== */

.reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* ==========================================
   REDUCE MOTION
========================================== */

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

    .reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }

}