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

KARTEL62 PC GAMING
ANIMATION CSS

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



.fade-in{

opacity:1;

animation:fadeIn 1s ease forwards;

}



@keyframes fadeIn{


from{

opacity:0;

transform:translateY(40px);

}


to{


opacity:1;

transform:translateY(0);


}


}



@keyframes fadeIn{


from{


opacity:0;

transform:

translateY(40px);


}



to{


opacity:1;

transform:

translateY(0);


}


}









.slide-left{


animation:

slideLeft 1s ease forwards;


opacity:0;


}




@keyframes slideLeft{


from{


opacity:0;

transform:

translateX(-60px);


}



to{


opacity:1;

transform:

translateX(0);


}


}









.slide-right{


opacity:1;

animation:

slideRight 1s ease forwards;


}



@keyframes slideRight{


from{


opacity:0;

transform:translateX(80px);


}


to{


opacity:1;

transform:translateX(0);


}


}




@keyframes slideRight{


from{


opacity:0;

transform:

translateX(60px);


}



to{


opacity:1;

transform:

translateX(0);


}


}









/* RGB GLOW */


.gaming-hero{


animation:

heroGlow 4s infinite alternate;


}




@keyframes heroGlow{


from{


filter:

drop-shadow(
0 0 10px #00ffff
);


}



to{


filter:

drop-shadow(
0 0 35px #8b5cf6
);


}


}









/* CARD FLOAT */


.card:hover,
.feature-box:hover{


animation:

floatCard .5s ease;


}



@keyframes floatCard{


0%{


transform:translateY(0);


}



50%{


transform:translateY(-8px);


}



100%{


transform:translateY(-10px);


}


}









/* BUTTON PULSE */


.btn-header{


animation:

pulseGlow 2s infinite;


}





@keyframes pulseGlow{


0%{


box-shadow:

0 0 0
rgba(0,255,255,0);


}



50%{


box-shadow:

0 0 25px
rgba(0,255,255,.6);


}



100%{


box-shadow:

0 0 0
rgba(0,255,255,0);


}



}









/* IMAGE FLOAT */


.hero-image img{


animation:

imageFloat 5s infinite ease-in-out;


}




@keyframes imageFloat{


0%,100%{


transform:

translateY(0);


}



50%{


transform:

translateY(-15px);


}


}