/* This style sheet is for animations only */
@media (prefers-reduced-motion: no-preference){
    @keyframes fade-in {
        from {scale: 0.8; opacity: 0;}
        to {scale: 1; opacity: 1;}
        
    }

    @keyframes slide-from-left {
        0% {
        opacity: 0;
        transform: translateX(-100%);
        }
        100% {
        opacity: 1;
        transform: translateX(0%);
        }
        /*animation: slide-in 1000ms;*/
    }

    @keyframes slide-from-right {
        0% {
        opacity: 0;
        transform: translateX(+100%);
        }
        100% {
        opacity: 1;
        transform: translateX(0%);
        }
        /*animation: slide-in 1000ms;*/
    }
    @keyframes slide-from-top {
        0% {
        opacity: 0;
        transform: translateY(-10%);
        }
        100% {
        opacity: 1;
        transform: translateY(0%);
        }
        /*animation: slide-in 1000ms;*/
    }

    @keyframes slide-up {
        0% {
        opacity: 0.2;
        transform: translateY(+10%);
        }
        100% {
        opacity: 1;
        transform: translateY(0%);
        }
        /*animation: slide-in 1000ms;*/
    }

    @keyframes jump {
        0% {
            background-position: bottom;
        }
        30% { 
            background-position:center;
        }
        60% { 
            background-position:top;
        }
        100% { 
            background-position: bottom;
        }
        /*animation: night-effect 5s 750ms linear infinite;*/
    }


    .animate{
        scale: .8; opacity: 0;
        animation: fade-in linear forwards;
        animation-timeline: view();
        animation-range: entry-crossing;
    }
    .hero-caption-1{
        -moz-animation: slide-from-left 1s .5s;
        -webkit-animation: slide-from-left 1s .5s;
        animation: slide-from-left 1s .5s;
        animation-fill-mode: backwards;
    }
    .hero-caption-2{
        -moz-animation: slide-from-right 1s .5s;
        -webkit-animation: slide-from-right 1s .5s;
        animation: slide-from-right 1s .5s;
        animation-fill-mode: backwards;
    }
    .bg-video{
        -moz-animation: slide-from-top 1s 1.5s;
        -webkit-animation: slide-from-top 1s 1.5s;
        animation: slide-from-top 1s 1.5s;
        animation-fill-mode: backwards;
    }
    .hero-intro-container{
        -moz-animation: slide-from-right 1s 1s;
        -webkit-animation: slide-from-right 1s 1s;
        animation: slide-from-right 1s 1s;
        animation-fill-mode: forwards;
    }
    .token-indicators, .utility-container-mobile{
        scale: 1;
        -moz-animation: slide-up 1s 1.5s;
        -webkit-animation: slide-up 1s 1.5s;
        animation: slide-up 1s 1.5s;
        animation-fill-mode: forwards;
    }
    .ellipse-bg-mobile{
        -moz-animation: jump 5s 750ms linear infinite;
        -webkit-animation: jump 5s 750ms linear infinite;
        animation: jump 5s 750ms linear infinite;
        animation-fill-mode: forwards;
    }
}