/* =====================
   Scroll Animations
===================== */

[class*="from-"],
[class*="fade-"] {
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--s, 1));
    transition:
        transform 2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 2s ease;
    will-change: transform, opacity;
}

/* Move directions */
.from-bottom {
    --y: 80px;
}

.from-top {
    --y: -80px;
}

.from-left {
    --x: -80px;
}

.from-right {
    --x: 80px;
}

/* Scale */
.from-scale {
    --s: 0.85;
}

/* Fade-in variations */
.fade-in {
    opacity: 0;
    transform: translate3d(0, 0, 0);
}

.fade-in-up {
    --y: 40px;
}

.fade-in-down {
    --y: -40px;
}

.fade-in-left {
    --x: -40px;
}

.fade-in-right {
    --x: 40px;
}

/* Visible state */
.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* =====================
   Scroll Animations
===================== */