/* ===============================
   EVA STUDIOS GLOW INTRO
================================ */

.preloader-text{
animation: glowIntro 2s ease-in-out forwards;
}

@keyframes glowIntro{

0%{
opacity:0;
transform:scale(0.8);
text-shadow:0 0 0 rgba(0,230,195,0);
}

50%{
opacity:1;
transform:scale(1.05);
text-shadow:
0 0 10px #00e6c3,
0 0 25px #00e6c3,
0 0 40px #00e6c3;
}

100%{
opacity:1;
transform:scale(1);
text-shadow:
0 0 5px #00e6c3,
0 0 15px #00e6c3,
0 0 25px #00e6c3;
}

}



/* ===============================
   HERO TEXT ANIMATION
================================ */

.hero-title{
animation: heroSlide 1.2s ease forwards;
}

.hero-tagline{
animation: heroFade 1.8s ease forwards;
}

@keyframes heroSlide{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes heroFade{

0%{
opacity:0;
}

100%{
opacity:1;
}

}



/* ===============================
   BUTTON PULSE EFFECT
================================ */

.primary-btn{
animation:pulseGlow 3s infinite;
}

@keyframes pulseGlow{

0%{
box-shadow:0 0 0 rgba(0,230,195,0);
}

50%{
box-shadow:0 0 20px rgba(0,230,195,0.7);
}

100%{
box-shadow:0 0 0 rgba(0,230,195,0);
}

}



/* ===============================
   SERVICE CARDS ENTRANCE
================================ */

.service-card{
opacity:0;
transform:translateY(40px);
animation:cardReveal 1s ease forwards;
}

.service-card:nth-child(1){animation-delay:0.2s;}
.service-card:nth-child(2){animation-delay:0.4s;}
.service-card:nth-child(3){animation-delay:0.6s;}
.service-card:nth-child(4){animation-delay:0.8s;}
.service-card:nth-child(5){animation-delay:1s;}
.service-card:nth-child(6){animation-delay:1.2s;}

@keyframes cardReveal{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}



/* ===============================
   SERVICE CARD HOVER GLOW
================================ */

.service-card:hover{

box-shadow:
0 10px 30px rgba(0,230,195,0.25),
0 0 15px rgba(0,230,195,0.4);

}



/* ===============================
   BUTTON HOVER SLIDE
================================ */

.btn{
position:relative;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.15);
transition:0.4s;
}

.btn:hover::before{
left:100%;
}



/* ===============================
   FOOTER FADE IN
================================ */

footer{
animation:footerFade 1.5s ease;
}

@keyframes footerFade{

0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}

}