/* ==========================================================
   SERGIO
   File: reveal.css
   Version: 1.2
   Purpose: Global Editorial Scroll Reveal System
========================================================== */


/* ==========================================================
   BASE REVEAL STATE
========================================================== */

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

    transition:
        opacity 1200ms cubic-bezier(.23, 1, .32, 1),
        transform 1200ms cubic-bezier(.23, 1, .32, 1);
}


/* ==========================================================
   ENTER STATE
========================================================== */

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


/* ==========================================================
   EXIT STATE
========================================================== */

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

    transition:
        opacity 900ms cubic-bezier(.23, 1, .32, 1),
        transform 900ms cubic-bezier(.23, 1, .32, 1);
}


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

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

    .reveal,
    .reveal.is-visible,
    .reveal.is-out {
        opacity: 1;
        transform: none;
        transition: none;
    }

}