/*==========================================
    SPEED EV+
    ANIMATIONS.CSS
===========================================*/


/*==================================
Logo Glow
==================================*/

.logo{

    animation:logoGlow 3s ease-in-out infinite;

}

@keyframes logoGlow{

    0%{

        transform:scale(1);

        filter:drop-shadow(0 0 0 rgba(181,202,28,.2));

    }

    50%{

        transform:scale(1.04);

        filter:drop-shadow(0 0 30px rgba(181,202,28,.8));

    }

    100%{

        transform:scale(1);

        filter:drop-shadow(0 0 0 rgba(181,202,28,.2));

    }

}


/*==================================
Hero Fade
==================================*/

.hero{

    animation:heroFade 1.5s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(80px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================
Heading Glow
==================================*/

.hero h1{

    animation:textGlow 4s infinite;

}

@keyframes textGlow{

    0%{

        text-shadow:0 0 5px rgba(181,202,28,.2);

    }

    50%{

        text-shadow:

        0 0 15px rgba(181,202,28,.5),

        0 0 40px rgba(181,202,28,.25);

    }

    100%{

        text-shadow:0 0 5px rgba(181,202,28,.2);

    }

}


/*==================================
Countdown Pop
==================================*/

.countdown .box{

    animation:countBounce 2.5s infinite;

}

.countdown .box:nth-child(2){

    animation-delay:.2s;

}

.countdown .box:nth-child(3){

    animation-delay:.4s;

}

.countdown .box:nth-child(4){

    animation-delay:.6s;

}

@keyframes countBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/*==================================
Button Pulse
==================================*/

.notify-btn{

    animation:buttonPulse 2.5s infinite;

}

@keyframes buttonPulse{

    0%{

        box-shadow:0 0 0 rgba(181,202,28,.2);

    }

    50%{

        box-shadow:

        0 0 20px rgba(181,202,28,.5),

        0 0 40px rgba(181,202,28,.2);

    }

    100%{

        box-shadow:0 0 0 rgba(181,202,28,.2);

    }

}


/*==================================
Floating Car
==================================*/

.car{

    animation:carFloat 4s ease-in-out infinite;

}

@keyframes carFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================
Wheel Rotation
==================================*/

@keyframes wheelRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================
Battery Charging
==================================*/

@keyframes batteryCharge{

    0%{

        width:5%;

    }

    20%{

        width:25%;

    }

    40%{

        width:50%;

    }

    60%{

        width:75%;

    }

    80%{

        width:90%;

    }

    100%{

        width:100%;

    }

}


/*==================================
Charging Wire
==================================*/

@keyframes wireGlow{

    0%{

        opacity:.5;

        box-shadow:0 0 10px #B5CA1C;

    }

    50%{

        opacity:1;

        box-shadow:

        0 0 20px #B5CA1C,

        0 0 35px #B5CA1C;

    }

    100%{

        opacity:.5;

        box-shadow:0 0 10px #B5CA1C;

    }

}


/*==================================
Headlight
==================================*/

@keyframes headlight{

    0%{

        opacity:.3;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.3;

    }

}


/*==================================
Moving Road
==================================*/

@keyframes roadMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:-180px 0;

    }

}


/*==================================
Gallery Zoom
==================================*/

.gallery-grid img{

    animation:galleryFloat 5s ease-in-out infinite;

}

.gallery-grid img:nth-child(2){

    animation-delay:.5s;

}

.gallery-grid img:nth-child(3){

    animation-delay:1s;

}

.gallery-grid img:nth-child(4){

    animation-delay:1.5s;

}

@keyframes galleryFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================
Feature Cards
==================================*/

.feature-card{

    animation:featureUp 1s ease forwards;

}

.feature-card:nth-child(2){

    animation-delay:.2s;

}

.feature-card:nth-child(3){

    animation-delay:.4s;

}

.feature-card:nth-child(4){

    animation-delay:.6s;

}

@keyframes featureUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================
CM Group Image
==================================*/

.cm-group img{

    animation:cmFloat 6s ease-in-out infinite;

}

@keyframes cmFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================
Video Glow
==================================*/

.video-section video{

    animation:videoGlow 4s infinite;

}

@keyframes videoGlow{

    0%{

        box-shadow:

        0 0 15px rgba(181,202,28,.15);

    }

    50%{

        box-shadow:

        0 0 40px rgba(181,202,28,.35);

    }

    100%{

        box-shadow:

        0 0 15px rgba(181,202,28,.15);

    }

}


/*==================================
Background Grid
==================================*/

.grid-bg{

    animation:gridMove 20s linear infinite;

}

@keyframes gridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:60px 60px;

    }

}


/*==================================
Section Fade
==================================*/

.video-section,
.gallery,
.features,
.about,
.cm-group{

    animation:fadeSection 1.5s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}