/*****************************************/
/************ SCROLL REVEALS *************/
/*****************************************/

/*
 * Elements remain visible if JavaScript fails.
 * JavaScript adds .reveal-enabled before applying
 * the hidden starting states.
 */
@media only screen and (min-width: 0rem) {
    .reveal-enabled [data-reveal] {
        opacity: 0;
        transition:
            opacity 0.7s ease,
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .reveal-enabled [data-reveal="up"] {
        transform: translateY(1.25rem);
    }

    .reveal-enabled [data-reveal="left"] {
        transform: translateX(-1.5rem);
    }

    .reveal-enabled [data-reveal="right"] {
        transform: translateX(1.5rem);
    }

    .reveal-enabled [data-reveal="scale"] {
        transform: scale(0.96);
    }

    .reveal-enabled [data-reveal="fade"] {
        transform: none;
    }

    .reveal-enabled [data-reveal].revealed {
        opacity: 1;
        transform: none;
    }
}

/*
 * Horizontal motion is converted to vertical motion
 * on phones so content doesn't slide toward the edge
 * of the viewport.
 */
@media only screen and (max-width: 47.9375rem) {
    .reveal-enabled [data-reveal="left"],
    .reveal-enabled [data-reveal="right"] {
        transform: translateY(1.25rem);
    }

    .reveal-enabled [data-reveal="left"].revealed,
    .reveal-enabled [data-reveal="right"].revealed {
        transform: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .reveal-enabled [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}