[data-reveal] {
    opacity: 0;

    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}


/* Fade upward */

[data-reveal="up"] {
    transform: translateY(40px);
}


/* Fade downward */

[data-reveal="down"] {
    transform: translateY(-40px);
}


/* From left */

[data-reveal="left"] {
    transform: translateX(-45px);
}


/* From right */

[data-reveal="right"] {
    transform: translateX(45px);
}


/* Scale */

[data-reveal="scale"] {
    transform: scale(0.94);
}


/* Visible state */

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


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

[data-reveal-delay="100"] {
    transition-delay: 100ms;
}

[data-reveal-delay="200"] {
    transition-delay: 200ms;
}

[data-reveal-delay="300"] {
    transition-delay: 300ms;
}

[data-reveal-delay="400"] {
    transition-delay: 400ms;
}

[data-reveal-delay="500"] {
    transition-delay: 500ms;
}


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

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

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;

        transition: none !important;
    }

}