/* Animation variables */
.animate {
    --animation-delay: 200ms;
    --transition-timing: cubic-bezier(0.21, 0.32, 0.18, 0.92);
}

/* Fade Up Animation */
.animate--fade-up {
    transition: transform 1.6s var(--transition-timing), opacity 1s;
    transform: translate(0, 4rem);
    opacity: 0;
}

    .animate--fade-up.active {
        transform: translate(0, 0);
        opacity: 1;
    }

.loading .animate--fade-up {
    transform: translate(0, 4rem);
    opacity: 0;
}

/* Fade Down Animation */
.animate--fade-down {
    transition: transform 1.6s var(--transition-timing), opacity 1s;
    transform: translate(0, -4rem);
    opacity: 0;
}

    .animate--fade-down.active {
        transform: translate(0, 0);
        opacity: 1;
    }

.loading .animate--fade-down {
    transform: translate(0, -4rem);
    opacity: 0;
}

/* Fade In Animation */
.animate--fade-in {
    transition: opacity 1s;
    opacity: 0;
}

    .animate--fade-in.active {
        opacity: 1;
    }

.loading .animate--fade-in {
    opacity: 0;
}

/* Animation Delays */
.animate--delay-1 {
    transition-delay: calc(var(--animation-delay) * 1) !important;
}

.animate--delay-2 {
    transition-delay: calc(var(--animation-delay) * 2) !important;
}

.animate--delay-3 {
    transition-delay: calc(var(--animation-delay) * 3) !important;
}

.animate--delay-4 {
    transition-delay: calc(var(--animation-delay) * 4) !important;
}

.animate--delay-5 {
    transition-delay: calc(var(--animation-delay) * 5) !important;
}

.animate--delay-6 {
    transition-delay: calc(var(--animation-delay) * 6) !important;
}

.animate--delay-7 {
    transition-delay: calc(var(--animation-delay) * 7) !important;
}

/* Keyframe Animations */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}