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

.reveal {
    opacity: 0;
    transform: translateY(10px);

    transition:
            opacity 0.4s ease,
            transform 0.4s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


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

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

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}