/* =======================================================
   SHADOW WOLVES RACING TEAM
   ANIMATIONS.CSS
======================================================= */

/* =======================================================
   DEFAULT STATES
======================================================= */

.fade,
.fade-up,
.fade-left,
.fade-right,
.zoom-in{

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up{

    transform:translateY(40px);

}

.fade-left{

    transform:translateX(-40px);

}

.fade-right{

    transform:translateX(40px);

}

.zoom-in{

    transform:scale(.9);

}

/* =======================================================
   SHOW
======================================================= */

.show{

    opacity:1;

    transform:none;

}

/* =======================================================
   HERO ANIMATIONS
======================================================= */

.hero-logo{

    animation:heroLogo 1s ease forwards;

}

.hero-tag{

    animation:fadeIn 1s .2s both;

}

.hero h1{

    animation:heroTitle 1s .4s both;

}

.hero h2{

    animation:fadeIn 1s .6s both;

}

.hero p{

    animation:fadeIn 1s .8s both;

}

.hero-buttons{

    animation:heroButtons 1s 1s both;

}

.scroll-indicator{

    animation:scrollIndicator 2s infinite;

}

/* =======================================================
   LOADER
======================================================= */

#loader{

    animation:loaderFade .6s ease;

}

#loader.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* =======================================================
   BUTTON CLICK
======================================================= */

.btn-primary:active,
.btn-secondary:active{

    transform:scale(.97);

}

/* =======================================================
   SCROLL BUTTON
======================================================= */

#topButton{

    opacity:0;

    transform:translateY(15px);

}

#topButton.show{

    opacity:1;

    transform:translateY(0);

}

/* =======================================================
   KEYFRAMES
======================================================= */

@keyframes heroLogo{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroButtons{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes loaderFade{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes scrollIndicator{

    0%{

        transform:translate(-50%,0);

        opacity:1;

    }

    50%{

        transform:translate(-50%,10px);

        opacity:.5;

    }

    100%{

        transform:translate(-50%,0);

        opacity:1;

    }

}

/* =======================================================
   STAGGER DELAYS
======================================================= */

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

.delay-5{

    transition-delay:.5s;

}

/* =======================================================
   REDUCED MOTION
======================================================= */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}