@keyframes paddingLR-from-none {
    from {
        padding-left: 0;
        padding-right: 0;
    }
}
@keyframes scale-a-lot {
    from {
        scale: .75;
    }
}
@keyframes scale-a-lil {
    from {
        scale: .9;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

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

    .paddingScale.initial{
        animation: paddingLR-from-none linear both;
        animation-delay: 0.1s;
        animation-duration: 0.15s;
        animation-iteration-count: 1;
    }

    .fadeIn.initial {
        animation: fade-in linear both;
        animation-delay: 0.1s;
        animation-duration: 0.6s;
        animation-iteration-count: 1;
    }


    .scaleAnimation.initial {
        animation: scale-a-lot linear both;
        animation-delay: 0.1s;
        animation-duration: 0.4s;
        animation-iteration-count: 1;
    }

    .scaleAnimation {
        animation: scale-a-lil linear both;
        animation-timeline: view();
        animation-range: 0vh 30vh;
    }


    .fadeIn {
        animation: fade-in linear both;
        animation-timeline: view();
        animation-range: 0vh 50vh;
    }

}