/* ===================================
   VIK-IT ANIMATIONS
=================================== */


/* ===============================
   GLOBAL FADE IN
================================ */


.fade-in {

    animation:
    fadeIn 1s ease forwards;

}



@keyframes fadeIn {


from {

    opacity:0;

    transform:
    translateY(40px);

}


to {

    opacity:1;

    transform:
    translateY(0);

}


}





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


.hero-text {


animation:

heroText 1.2s ease;


}



@keyframes heroText {


0% {

opacity:0;

transform:
translateX(-80px);


}


100% {


opacity:1;

transform:
translateX(0);


}


}






.hero-animation {


animation:

heroImage 1.5s ease;


}



@keyframes heroImage {


0% {


opacity:0;

transform:

scale(.7);


}


100% {


opacity:1;

transform:

scale(1);


}



}







/* ===============================
   TECH CIRCLE
================================ */


.tech-circle {


animation:

rotateCircle 20s linear infinite;


}



@keyframes rotateCircle {


from {


transform:

rotate(0deg);


}


to {


transform:

rotate(360deg);


}


}







.tech-circle div {


animation:

floating 4s ease-in-out infinite;


}



.tech-circle div:nth-child(2){

animation-delay:1s;

}



.tech-circle div:nth-child(3){

animation-delay:2s;

}



.tech-circle div:nth-child(4){

animation-delay:3s;

}





@keyframes floating {


0%,
100% {


transform:

translateY(0);


}


50% {


transform:

translateY(-20px);


}


}







/* ===============================
   GLOW EFFECT
================================ */


.logo span {


text-shadow:

0 0 20px rgba(0,168,255,.8);


}




.btn-primary {


animation:

buttonPulse 3s infinite;


}



@keyframes buttonPulse {


0% {


box-shadow:

0 0 0 0 rgba(0,168,255,.5);


}



70% {


box-shadow:

0 0 0 20px rgba(0,168,255,0);


}



100% {


box-shadow:

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


}



}







/* ===============================
   CARD ANIMATION
================================ */


.service-card,
.card {


animation:

cardAppear .8s ease;


}



@keyframes cardAppear {


from {


opacity:0;

transform:

translateY(50px);


}


to {


opacity:1;

transform:

translateY(0);


}


}







.service-card:hover {


box-shadow:


0 20px 60px rgba(0,168,255,.25);


}





/* ===============================
   BACKGROUND PARTICLES
================================ */


.hero-background::before {


content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;


background:

rgba(0,168,255,.15);


filter:

blur(80px);



animation:

moveGlow 10s infinite alternate;


}




@keyframes moveGlow {


from {


transform:

translate(0,0);


}


to {


transform:

translate(150px,80px);


}


}







/* ===============================
   SCROLL REVEAL
================================ */


.reveal {


opacity:0;

transform:

translateY(50px);

transition:

all .8s ease;


}



.reveal.active {


opacity:1;

transform:

translateY(0);


}







/* ===============================
   SHINE EFFECT
================================ */


.service-card::before {


content:"";

position:absolute;

top:0;

left:-100%;


width:60%;

height:100%;


background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.15),
transparent
);


transition:.5s;


}



.service-card {


position:relative;

overflow:hidden;


}




.service-card:hover::before {


left:150%;


}







/* ===============================
   SMOOTH HOVER
================================ */


a,
button,
.card,
.service-card {


transition:

all .3s ease;


}







/* ===============================
   ACCESSIBILITY
================================ */


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


* {


animation:none!important;

transition:none!important;


}


}