/* ANIMATIONS */

.blur-focus {
    opacity: 0;
    transform: translateY(10%);
    will-change: transform;
    filter: blur(20px);
}

.in-view .blur-focus,
.blur-focus.in-view {
    opacity: 1;
    transform: translateY(0%);
    filter: blur(0px);
    transition: all 1.8s var(--alias-easeOut);
}

.scale-out {
    transform: scale(1.2);
    will-change: transform;
}

.in-view .scale-out,
.scale-out.in-view {
    transform: scale(1);
    transition: all 2.3s var(--alias-easeOut);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    will-change: transform;
}

.in-view .scale-in,
.scale-in.in-view {
    opacity: 1;
    transform: scale(1);
    transition: all 2.3s var(--alias-easeOut);
}

.fade-in {
    opacity: 0;
}

.in-view .fade-in,
.scale-in.in-view {
    opacity: 1;
    transition: all 1.6s var(--alias-easeOut);
}

.fade-in-and-scale-down {
    opacity: 0;
    transform: scale(1.2);
    will-change: transform;
}

.in-view .fade-in-and-scale-down,
.fade-in-and-scale-down.in-view {
    opacity: 1;
    transform: scale(1);
    transition: all 2.3s var(--alias-easeOut);
}

.scale-out-and-slide-up {
    opacity: 0;
    transform: translateY(50%) scale(1.2);
    will-change: transform;
}

.in-view .scale-out-and-slide-up,
.scale-out-and-slide-up.in-view {
    opacity: 1;
    transform: translateY(0%) scale(1);
    transition: all 2.3s var(--alias-easeOutSlow);
}

.slide-up-slow {
    opacity: 0;
    transform: translateY(25%) scale(1.2);
    will-change: transform;
}

.in-view .slide-up-slow,
.slide-up-slow.in-view {
    opacity: 1;
    transform: translateY(0%) scale(1);
    transition: all 2.3s var(--alias-easeOutSlow);
}

.slide-up {
    opacity: 0;
    transform: translateY(10vh);
    will-change: transform;
}

.in-view .slide-up,
.slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.3s var(--alias-easeOut), transform 1.3s var(--alias-easeOut);
}