.expandHorizontal {
    transform: scaleX(1);
}

.fadeIn,
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight {
    opacity: 1;
    transform: none;
}


#cursor {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 5px;
    font-size: 28px;
    font-weight: bold;
    opacity: 0;
    color: white;
}


/* #scroll-down svg {
    width: 100%;
    min-width: 28px;
    height: 100%;
    max-height: 100px;
    animation: 4s infinite entrance-arrow-bounce
} */


@media (prefers-reduced-motion:reduce) {
    :root {
        scroll-behavior: auto
    }

    .scroll-down {
        animation: none
    }
}



@media (prefers-reduced-motion: no-preference) {

    #cursor {
        opacity: 0;
        animation: blink 0.75s step-start infinite 0.5s;
    }

    .scroll-down {
        animation: bounce 5s infinite;
    }

    @keyframes bounce {

        0%,
        50%,
        100% {
            transform: translateY(0);
        }

        25%,
        75% {
            transform: translateY(-30px);
        }
    }


    @keyframes blink {
        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .expandHorizontal {
        transform: scaleX(0);
    }

    .animateExpandHorizontal {
        animation: animateExpandHorizontal 0.2s ease-in forwards 5s;
    }

    @keyframes animateExpandHorizontal {
        to {
            transform: scaleX(1);
        }
    }

    .fadeIn {
        opacity: 0;
    }

    .animateFadeIn {
        animation: animateFadeIn 0.75s ease-in-out forwards 0.5s;
    }

    @keyframes animateFadeIn {
        to {
            opacity: 1;
        }
    }

    .fadeInUp {
        opacity: 0;
        transform: translateY(60px);
    }

    .animateFadeInUp {
        animation: animateFadeInUp 1.25s ease-in-out forwards;
    }

    @keyframes animateFadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fadeInDown {
        opacity: 0;
        transform: translateY(-80px);
    }

    .animateFadeInDown {
        animation: animateFadeInDown 1s ease-in-out forwards;
    }

    @keyframes animateFadeInDown {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fadeInRight {
        opacity: 0;
        transform: translateX(-80px);
    }

    .animateFadeInRight {
        animation: animateFadeInRight 1s ease-in-out forwards 0.5s;
    }

    @keyframes animateFadeInRight {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .fadeInLeft {
        opacity: 0;
        transform: translateX(80px);
    }

    .animateFadeInLeft {
        animation: animateFadeInLeft 1s ease-in-out forwards 0.75s;
    }

    @keyframes animateFadeInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

}