/*======================================================

The IdeaGen Technologies

File :
animations.css

Version :
1.0

======================================================*/


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

.fade-in{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s cubic-bezier(.215,.61,.355,1);

}

.fade-in.active{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:all .9s cubic-bezier(.215,.61,.355,1);

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:all .9s cubic-bezier(.215,.61,.355,1);

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}


/*======================================================
                SCALE
======================================================*/

.scale-up{

    opacity:0;

    transform:scale(.92);

    transition:.7s;

}

.scale-up.active{

    opacity:1;

    transform:scale(1);

}


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

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.float{

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

}


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

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.pulse{

    animation:pulse 3s infinite;

}


/*======================================================
            SPIN
======================================================*/

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.spin{

    animation:spin 16s linear infinite;

}


/*======================================================
            SCROLL ARROW
======================================================*/

@keyframes scroll{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(14px);

opacity:0;

}

}

.scroll-dot{

    animation:scroll 1.6s infinite;

}


/*======================================================
            HERO IMAGE
======================================================*/

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

.hero-image img{

    animation:heroZoom 18s linear infinite alternate;

}


/*======================================================
            LOGO MARQUEE
======================================================*/

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.logo-track{

    display:flex;

    gap:70px;

    width:max-content;

    animation:marquee 40s linear infinite;

}

.logo-track:hover{

    animation-play-state:paused;

}


/*======================================================
            SHIMMER
======================================================*/

@keyframes shimmer{

100%{

left:150%;

}

}

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

animation:shimmer 3s infinite;

}


/*======================================================
            ROTATE BORDER
======================================================*/

@keyframes rotateBorder{

100%{

transform:rotate(360deg);

}

}

.rotate-border{

position:relative;

}

.rotate-border::before{

content:"";

position:absolute;

inset:-2px;

border-radius:inherit;

background:conic-gradient(

#2563EB,

transparent,

#2563EB

);

animation:rotateBorder 6s linear infinite;

z-index:-1;

}


/*======================================================
            BLUR ORBS
======================================================*/

@keyframes blob{

0%{

transform:translate(0,0) scale(1);

}

33%{

transform:translate(40px,-30px) scale(1.08);

}

66%{

transform:translate(-20px,20px) scale(.95);

}

100%{

transform:translate(0,0) scale(1);

}

}

.blur-orb{

animation:blob 14s ease-in-out infinite;

}


/*======================================================
            CARD HOVER
======================================================*/

.lift{

transition:.4s;

}

.lift:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(15,23,42,.12);

}


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

.zoom{

overflow:hidden;

}

.zoom img{

transition:1s;

}

.zoom:hover img{

transform:scale(1.08);

}


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

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-4px);

}