/* =========================================================
   GLOBAL SCROLL REVEAL ANIMATION
========================================================= */

/* ---------- COMMON ---------- */

.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}


/* =========================================================
   FROM BOTTOM
========================================================= */

.reveal-up {
    transform: translateY(60px);
}

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


/* =========================================================
   FROM TOP
========================================================= */

.reveal-down {
    transform: translateY(-60px);
}

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


/* =========================================================
   FROM LEFT
========================================================= */

.reveal-left {
    transform: translateX(-80px);
}

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


/* =========================================================
   FROM RIGHT
========================================================= */

.reveal-right {
    transform: translateX(80px);
}

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


/* =========================================================
   SCALE / ZOOM
========================================================= */

.reveal-scale {
    transform: scale(0.85);
}

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


/* =========================================================
   DELAYS - OPTIONAL
========================================================= */

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

.reveal-delay-5 {
    transition-delay: 0.5s;
}


/* =========================================================
   MOBILE
========================================================= */




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