/* =====================================================
   Shadow WolvesLogistic.NET
   animations.css
   Version 1.0
===================================================== */


/* ==========================================
   Fade Up
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    animation:fadeUp .9s ease forwards;

}


/* ==========================================
   Fade Down
========================================== */

.fade-down{

    opacity:0;

    transform:translateY(-60px);

    animation:fadeDown .9s ease forwards;

}


/* ==========================================
   Fade Left
========================================== */

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    animation:fadeLeft .9s ease forwards;

}


/* ==========================================
   Fade Right
========================================== */

.fade-right{

    opacity:0;

    transform:translateX(60px);

    animation:fadeRight .9s ease forwards;

}


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

.zoom{

    opacity:0;

    transform:scale(.85);

    animation:zoom .8s ease forwards;

}


/* ==========================================
   Hero Logo
========================================== */

.hero-logo{

    animation:

        float 6s ease-in-out infinite,

        logoGlow 5s infinite;

}


/* ==========================================
   Hero Buttons
========================================== */

.hero-buttons a{

    animation:fadeUp 1s ease forwards;

}

.hero-buttons a:nth-child(2){

    animation-delay:.2s;

}


/* ==========================================
   Navigation Hover
========================================== */

nav a{

    transition:

        color .3s,

        transform .3s;

}

nav a:hover{

    transform:translateY(-2px);

}


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

.feature-card{

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

}

.feature-card:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}


/* ==========================================
   Fleet Cards
========================================== */

.fleet-card{

    transition:

        transform .4s,

        box-shadow .4s;

}

.fleet-card:hover{

    transform:

        translateY(-12px);

}


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

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    transition:

        transform .7s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}


/* ==========================================
   Partner Cards
========================================== */

.partner-card{

    transition:

        transform .35s,

        border-color .35s;

}

.partner-card:hover{

    transform:translateY(-8px);

}


/* ==========================================
   Scroll Button
========================================== */

#topButton{

    transition:

        transform .3s,

        background .3s;

}

#topButton:hover{

    transform:

        translateY(-6px)

        rotate(360deg);

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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes zoom{

    from{

        opacity:0;
        transform:scale(.85);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/* ==========================================
   FLOAT
========================================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   BOUNCE
========================================== */

@keyframes bounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   LOGO GLOW
========================================== */

@keyframes logoGlow{

    0%{

        filter:
        drop-shadow(0 0 0 rgba(255,255,255,0));

    }

    50%{

        filter:
        drop-shadow(0 0 25px rgba(255,255,255,.20));

    }

    100%{

        filter:
        drop-shadow(0 0 0 rgba(255,255,255,0));

    }

}

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

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#loader img{

    animation:

    loaderSpin 18s linear infinite,

    logoGlow 4s infinite;

}

/* ==========================================
   SCROLL INDICATOR
========================================== */

.scroll-indicator{

    animation:bounce 2.5s infinite;

}

/* ==========================================
   BUTTON SHINE
========================================== */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-primary:hover::before{

    left:140%;

}

/* ==========================================
   CARD SHINE
========================================== */

.feature-card,

.partner-card,

.fleet-card{

    position:relative;

    overflow:hidden;

}

.feature-card::after,

.partner-card::after,

.fleet-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:200%;

    height:200%;

    background:

    linear-gradient(

        45deg,

        transparent,

        rgba(255,255,255,.04),

        transparent

    );

    opacity:0;

    transition:.5s;

}

.feature-card:hover::after,

.partner-card:hover::after,

.fleet-card:hover::after{

    opacity:1;

}

/* ==========================================
   COOKIE
========================================== */

.cookie-banner{

    animation:fadeUp .8s ease;

}

/* ==========================================
   PROGRESS BAR
========================================== */

#progress-bar{

    transition:width .15s linear;

}

/* ==========================================
   FADE CLASSES
========================================== */

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

/* ==========================================
   HOVER GLOW
========================================== */

.glow:hover{

    animation:logoGlow 2s infinite;

}

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

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

    *{

        animation:none !important;

        transition:none !important;

    }

}

/* =====================================================
   END OF FILE
===================================================== */