/* ==========================================================
   SISTEMA DE ANIMAÇÕES
   ========================================================== */


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

[data-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            20px,
            0
        );

    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}


[data-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


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

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

    [data-reveal] {
        opacity: 1;

        transform: none;

        will-change: auto;
    }

}