/*==========================================================
    animations.css
    WaveAccent Technologies
    Premium Enterprise Animations
==========================================================*/

/*==========================================================
        KEYFRAMES
==========================================================*/

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.85);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes zoomOut{

0%{

opacity:0;

transform:scale(1.15);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes pulseGlow{

0%{

box-shadow:
0 0 0 rgba(0,200,255,.15);

}

50%{

box-shadow:
0 0 35px rgba(0,200,255,.45),
0 0 90px rgba(0,200,255,.20);

}

100%{

box-shadow:
0 0 0 rgba(0,200,255,.15);

}

}

@keyframes rotate{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes rotateReverse{

0%{

transform:rotate(360deg);

}

100%{

transform:rotate(0deg);

}

}

@keyframes shimmer{

0%{

background-position:-400px 0;

}

100%{

background-position:400px 0;

}

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes wave{

0%{

transform:translateX(-50px);

}

50%{

transform:translateX(50px);

}

100%{

transform:translateX(-50px);

}

}

@keyframes blink{

0%{

opacity:.2;

}

50%{

opacity:1;

}

100%{

opacity:.2;

}

}

@keyframes bounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes ripple{

0%{

transform:scale(.2);

opacity:1;

}

100%{

transform:scale(2);

opacity:0;

}

}

/*==========================================================
        UTILITY ANIMATION CLASSES
==========================================================*/

.fade-in{

animation:fadeIn .9s ease forwards;

}

.fade-up{

animation:fadeUp .9s ease forwards;

}

.fade-down{

animation:fadeDown .9s ease forwards;

}

.fade-left{

animation:fadeLeft .9s ease forwards;

}

.fade-right{

animation:fadeRight .9s ease forwards;

}

.zoom-in{

animation:zoomIn .8s ease forwards;

}

.zoom-out{

animation:zoomOut .8s ease forwards;

}

.float{

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

}

.pulse{

animation:pulse 3s infinite;

}

.rotate{

animation:rotate 30s linear infinite;

}

.rotate-reverse{

animation:rotateReverse 30s linear infinite;

}

.glow{

animation:pulseGlow 4s infinite;

}

.wave{

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

}

.bounce{

animation:bounce 2.5s infinite;

}

.blink{

animation:blink 2s infinite;

}

/*==========================================================
        HERO ANIMATIONS
==========================================================*/

.hero-label{

animation:

fadeDown 1s ease .2s both;

}

.hero h1{

animation:

fadeUp 1s ease .4s both;

}

.hero p{

animation:

fadeUp 1s ease .6s both;

}

.hero-buttons{

animation:

fadeUp 1s ease .8s both;

}

.hero-metrics{

animation:

fadeUp 1s ease 1s both;

}

.hero-visual{

animation:

zoomIn 1.2s ease .5s both;

}

/*==========================================================
        PART 2 STARTS BELOW
==========================================================*/

/*==========================================================
        NAVIGATION ANIMATIONS
==========================================================*/

.navbar{

transition:
background .35s ease,
padding .35s ease,
box-shadow .35s ease;

}

.nav-link{

position:relative;

overflow:hidden;

}

.nav-link::before{

content:"";

position:absolute;

left:0;

bottom:-2px;

width:100%;

height:2px;

background:linear-gradient(
90deg,
var(--secondary),
var(--primary));

transform:translateX(-110%);

transition:transform .4s ease;

}

.nav-link:hover::before,

.nav-link.active::before{

transform:translateX(0);

}

.logo{

transition:
transform .35s ease,
filter .35s ease;

}

.logo:hover{

transform:scale(1.05);

filter:drop-shadow(0 0 15px rgba(0,200,255,.45));

}

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

.capability-card,
.solution-card,
.industry-card,
.tech-column,
.insight-card{

transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease,
background .4s ease;

}

.capability-card:hover,
.solution-card:hover,
.industry-card:hover,
.tech-column:hover,
.insight-card:hover{

transform:translateY(-12px);

}

.capability-icon,
.solution-icon,
.feature-icon{

transition:
transform .4s ease,
background .4s ease,
color .4s ease;

}

.capability-card:hover .capability-icon,
.solution-card:hover .solution-icon,
.feature-mini:hover .feature-icon{

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

}

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

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.28),
transparent);

transition:left .7s ease;

}

.btn:hover::before{

left:120%;

}

.btn:hover{

transform:translateY(-3px);

}

/*==========================================================
        IMAGE EFFECTS
==========================================================*/

.about-image-wrapper img{

transition:
transform .6s ease,
filter .6s ease;

}

.about-image-wrapper:hover img{

transform:scale(1.04);

filter:brightness(1.08);

}

/*==========================================================
        TECHNOLOGY ITEMS
==========================================================*/

.tech-column li{

transition:
transform .3s ease,
color .3s ease;

}

.tech-column li:hover{

transform:translateX(8px);

color:#ffffff;

}

/*==========================================================
        TIMELINE EFFECTS
==========================================================*/

.timeline-number{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.timeline-item:hover .timeline-number{

transform:scale(1.1);

box-shadow:

0 0 30px rgba(0,200,255,.45);

}

.timeline-content{

transition:
transform .35s ease,
border-color .35s ease;

}

.timeline-item:hover .timeline-content{

transform:translateX(10px);

}

/*==========================================================
        METRIC COUNTERS
==========================================================*/

.metric{

transition:transform .35s ease;

}

.metric:hover{

transform:translateY(-8px);

}

.metric h3{

transition:color .35s ease;

}

.metric:hover h3{

color:#ffffff;

}

/*==========================================================
        CTA
==========================================================*/

.cta-box{

transition:
transform .4s ease,
box-shadow .4s ease;

}

.cta-box:hover{

transform:translateY(-8px);

box-shadow:

0 30px 80px rgba(0,0,0,.35);

}

/*==========================================================
        FOOTER
==========================================================*/

.social-links a{

transition:
transform .35s ease,
background .35s ease,
color .35s ease;

}

.social-links a:hover{

transform:translateY(-6px) rotate(8deg);

}

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

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*==========================================================
        STAGGER DELAYS
==========================================================*/

.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.delay-300{animation-delay:.3s;}
.delay-400{animation-delay:.4s;}
.delay-500{animation-delay:.5s;}
.delay-600{animation-delay:.6s;}
.delay-700{animation-delay:.7s;}
.delay-800{animation-delay:.8s;}

/*==========================================================
        END OF animations.css
==========================================================*/