/* =========================================
   PAGE LOAD
========================================= */

body {
    animation: pageFadeIn 0.7s ease forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

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

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

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


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

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);

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

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}


.reveal-right {
    opacity: 0;
    transform: translateX(40px);

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

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}