:root {
    --animation-duration: 1.2s;
}

.move-right-to-left-scroll {
    position: relative;
    animation-name: move-right-to-left;
    animation-duration: var(--animation-duration);
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes move-right-to-left {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.move-left-to-right-scroll {
    position: relative;
    animation-name: move-left-to-right;
    animation-duration: var(--animation-duration);
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes move-left-to-right {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.move-top-to-bottom-scroll {
    position: relative;
    animation-name: move-top-to-bottom;
    animation-duration: var(--animation-duration);
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes move-top-to-bottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.move-bottom-to-top-scroll {
    position: relative;
    animation-name: move-bottom-to-top;
    animation-duration: var(--animation-duration);
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes move-bottom-to-top {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.move-fade-in {
    opacity: 0;
}

.move-fade-in-scroll {
    position: relative;
    animation-name: move-fade-in;
    animation-duration: var(--animation-duration);
    animation-fill-mode: forwards;
}

@keyframes move-fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}