/*=========================================================
100X LEADERSHIP TRANSFORMATION
animations.css
Version 1.0
=========================================================*/


/*=========================================================
GLOBAL TRANSITIONS
=========================================================*/

*{
    transition:
        color .30s ease,
        background-color .30s ease,
        border-color .30s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

a,
button,
.btn-primary,
.btn-secondary,
.module-card,
.about-card,
.feature,
.city-card,
.learning-card,
.benefit-card,
.timeline-card,
.audience-card{

    transition:all .35s cubic-bezier(.4,0,.2,1);

}


/*=========================================================
FADE UP
=========================================================*/

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-up{

    opacity:0;

}

.fade-up.active{

    animation:fadeUp .9s ease forwards;

}


/*=========================================================
FADE DOWN
=========================================================*/

@keyframes fadeDown{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-down.active{

    animation:fadeDown .9s ease forwards;

}


/*=========================================================
FADE LEFT
=========================================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left.active{

    animation:fadeLeft .8s ease forwards;

}


/*=========================================================
FADE RIGHT
=========================================================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right.active{

    animation:fadeRight .8s ease forwards;

}



/*=========================================================
ZOOM IN
=========================================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in.active{

    animation:zoomIn .7s ease forwards;

}



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

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

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

}



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

@keyframes slowFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.float-slow{

    animation:slowFloat 8s ease-in-out infinite;

}



/*=========================================================
PULSE
=========================================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2.5s infinite;

}



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

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.btn-primary:hover::before{

    left:150%;

    transition:1.1s;

}



/*=========================================================
CARD LIFT
=========================================================*/

.about-card:hover,
.module-card:hover,
.feature:hover,
.learning-card:hover,
.timeline-card:hover,
.city-card:hover,
.benefit-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

}



/*=========================================================
ICON ROTATE
=========================================================*/

.about-card:hover i,
.feature:hover i,
.city-card:hover i,
.learning-card:hover i,
.benefit-card:hover i{

    transform:rotate(-8deg) scale(1.12);

}



/*=========================================================
IMAGE HOVER
=========================================================*/

.hero-image img,
.founder-image img{

    transition:all .5s ease;

}

.hero-image:hover img,
.founder-image:hover img{

    transform:scale(1.03);

}



/*=========================================================
UNDERLINE ANIMATION
=========================================================*/

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--secondary);

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}



/*=========================================================
TEXT GRADIENT
=========================================================*/

.gradient-text{

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/*=========================================================
ROTATING GRADIENT
=========================================================*/

@keyframes rotateGradient{

    0%{

        background-position:0 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0 50%;

    }

}

.animated-gradient{

    background:

    linear-gradient(

        270deg,

        #0F3D91,

        #3578FF,

        #FF9800,

        #0F3D91

    );

    background-size:500% 500%;

    animation:rotateGradient 10s ease infinite;

}



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

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-15px);

    }

    60%{

        transform:translateY(-8px);

    }

}

.bounce{

    animation:bounce 2.8s infinite;

}