/*==================================================
ANIMATION.CSS
PART 1
GLOBAL VARIABLES
BASE ANIMATIONS
FADE • SLIDE • ZOOM • ROTATE
Optimized for AVATT Website
==================================================*/


/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --ease:cubic-bezier(.22,.61,.36,1);

    --fast:.35s;
    --normal:.65s;
    --slow:1s;

    --delay-1:.1s;
    --delay-2:.2s;
    --delay-3:.3s;
    --delay-4:.4s;
    --delay-5:.5s;
    --delay-6:.6s;
    --delay-7:.7s;
    --delay-8:.8s;

}



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

*{

    transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

}



/*==================================================
BASE ANIMATION CLASS
==================================================*/

.animate{

    opacity:0;

    visibility:hidden;

    transform:translateY(40px);

    transition:

    opacity .8s var(--ease),

    transform .8s var(--ease),

    filter .8s var(--ease);

    will-change:

    transform,

    opacity,

    filter;

}

.animate.active{

    opacity:1;

    visibility:visible;

    transform:none;

    filter:none;

}



/*==================================================
FADE
==================================================*/

.fade{

    opacity:0;

}

.fade.active{

    opacity:1;

    animation:fadeIn .8s forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==================================================
FADE UP
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

.fade-up.active{

    opacity:1;

    animation:fadeUp .9s forwards;

}

@keyframes fadeUp{

    0%{

        opacity:0;

        transform:translateY(60px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}



/*==================================================
FADE DOWN
==================================================*/

.fade-down{

    opacity:0;

    transform:translateY(-60px);

}

.fade-down.active{

    opacity:1;

    animation:fadeDown .9s forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==================================================
FADE LEFT
==================================================*/

.fade-left{

    opacity:0;

    transform:translateX(-70px);

}

.fade-left.active{

    opacity:1;

    animation:fadeLeft .9s forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/*==================================================
FADE RIGHT
==================================================*/

.fade-right{

    opacity:0;

    transform:translateX(70px);

}

.fade-right.active{

    opacity:1;

    animation:fadeRight .9s forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/*==================================================
ZOOM IN
==================================================*/

.zoom-in{

    opacity:0;

    transform:scale(.75);

}

.zoom-in.active{

    opacity:1;

    animation:zoomIn .8s forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.75);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*==================================================
ZOOM OUT
==================================================*/

.zoom-out{

    opacity:0;

    transform:scale(1.25);

}

.zoom-out.active{

    opacity:1;

    animation:zoomOut .8s forwards;

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.25);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*==================================================
ROTATE IN
==================================================*/

.rotate-in{

    opacity:0;

    transform:rotate(-12deg) scale(.9);

}

.rotate-in.active{

    opacity:1;

    animation:rotateIn .8s forwards;

}

@keyframes rotateIn{

    from{

        opacity:0;

        transform:rotate(-12deg) scale(.9);

    }

    to{

        opacity:1;

        transform:rotate(0deg) scale(1);

    }

}



/*==================================================
FLIP UP
==================================================*/

.flip-up{

    opacity:0;

    transform:perspective(1000px) rotateX(18deg);

    transform-origin:bottom;

}

.flip-up.active{

    opacity:1;

    animation:flipUp .9s forwards;

}

@keyframes flipUp{

    from{

        opacity:0;

        transform:perspective(1000px) rotateX(18deg);

    }

    to{

        opacity:1;

        transform:perspective(1000px) rotateX(0deg);

    }

}



/*==================================================
BLUR REVEAL
==================================================*/

.blur{

    opacity:0;

    filter:blur(12px);

}

.blur.active{

    opacity:1;

    animation:blurReveal .9s forwards;

}

@keyframes blurReveal{

    from{

        opacity:0;

        filter:blur(12px);

    }

    to{

        opacity:1;

        filter:blur(0);

    }

}



/*==================================================
FLOATING UTILITY
==================================================*/

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



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

.pulse{

    animation:pulse 2.2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}



/*==================================================
HOVER LIFT
==================================================*/

.hover-lift{

    transition:

    transform .35s ease,

    box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

}



/*==================================================
HOVER GROW
==================================================*/

.hover-grow{

    transition:transform .35s ease;

}

.hover-grow:hover{

    transform:scale(1.05);

}



/*==================================================
HOVER ROTATE
==================================================*/

.hover-rotate{

    transition:transform .35s ease;

}

.hover-rotate:hover{

    transform:rotate(3deg);

}



/*==================================================
DELAY UTILITIES
==================================================*/

.delay-1{animation-delay:var(--delay-1);}
.delay-2{animation-delay:var(--delay-2);}
.delay-3{animation-delay:var(--delay-3);}
.delay-4{animation-delay:var(--delay-4);}
.delay-5{animation-delay:var(--delay-5);}
.delay-6{animation-delay:var(--delay-6);}
.delay-7{animation-delay:var(--delay-7);}
.delay-8{animation-delay:var(--delay-8);}



/*==================================================
DURATION UTILITIES
==================================================*/

.fast{

    animation-duration:.45s !important;

}

.normal{

    animation-duration:.8s !important;

}

.slow{

    animation-duration:1.3s !important;

}



/*==================================================
GPU ACCELERATION
==================================================*/

.fade,

.fade-up,

.fade-down,

.fade-left,

.fade-right,

.zoom-in,

.zoom-out,

.rotate-in,

.flip-up,

.blur{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}



/*==================================================
REDUCED MOTION SUPPORT
==================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

.animate,

.fade,

.fade-up,

.fade-down,

.fade-left,

.fade-right,

.zoom-in,

.zoom-out,

.rotate-in,

.flip-up,

.blur{

opacity:1 !important;

visibility:visible !important;

transform:none !important;

filter:none !important;

}

}
/*==================================================
ANIMATION.CSS
PART 2
HERO • BUTTONS • PRELOADER
BACKGROUND EFFECTS • SCROLL INDICATOR
==================================================*/


/*==================================================
HERO CONTENT
==================================================*/

.hero-content{

    animation:heroContent 1s var(--ease) forwards;

}

@keyframes heroContent{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
HERO TEXT STAGGER
==================================================*/

.hero-content h5{

    opacity:0;

    animation:fadeDown .8s forwards;

    animation-delay:.2s;

}

.hero-content h1{

    opacity:0;

    animation:fadeUp .9s forwards;

    animation-delay:.45s;

}

.hero-content p{

    opacity:0;

    animation:fadeUp .9s forwards;

    animation-delay:.65s;

}

.hero-buttons{

    opacity:0;

    animation:fadeUp .9s forwards;

    animation-delay:.85s;

}

.hero-features{

    opacity:0;

    animation:fadeUp .9s forwards;

    animation-delay:1.05s;

}


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

.hero-image{

    opacity:0;

    animation:imageReveal 1.1s forwards;

}

@keyframes imageReveal{

    from{

        opacity:0;

        transform:translateX(80px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateX(0) scale(1);

    }

}

.hero-image img{

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

    transition:transform .45s ease;

}

.hero-image:hover img{

    transform:scale(1.03);

}


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

@keyframes heroFloat{

0%{

transform:translateY(0);

}

25%{

transform:translateY(-8px);

}

50%{

transform:translateY(-18px);

}

75%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==================================================
BACKGROUND SHAPES
==================================================*/

.hero-shape-1{

animation:shapeOne 12s linear infinite;

}

.hero-shape-2{

animation:shapeTwo 15s linear infinite;

}

.hero-shape-3{

animation:shapeThree 18s linear infinite;

}

@keyframes shapeOne{

0%{

transform:translateY(0) rotate(0);

}

50%{

transform:translateY(-25px) rotate(180deg);

}

100%{

transform:translateY(0) rotate(360deg);

}

}

@keyframes shapeTwo{

0%{

transform:translateX(0);

}

50%{

transform:translateX(30px);

}

100%{

transform:translateX(0);

}

}

@keyframes shapeThree{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}


/*==================================================
HERO STATS
==================================================*/

.hero-stat{

opacity:0;

animation:badgePop .8s forwards;

}

.hero-stat:nth-child(1){

animation-delay:.9s;

}

.hero-stat:nth-child(2){

animation-delay:1.1s;

}

.hero-stat:nth-child(3){

animation-delay:1.3s;

}

@keyframes badgePop{

0%{

opacity:0;

transform:scale(.6);

}

70%{

transform:scale(1.08);

}

100%{

opacity:1;

transform:scale(1);

}

}


/*==================================================
BUTTONS
==================================================*/

.btn{

position:relative;

overflow:hidden;

transition:

transform .35s ease,

box-shadow .35s ease,

background .35s ease;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(0,0,0,.18);

}

.btn:active{

transform:translateY(-2px) scale(.98);

}


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

.btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:rgba(255,255,255,.25);

transform:skewX(-25deg);

transition:.8s;

}

.btn:hover::before{

left:150%;

}


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

.btn i{

transition:transform .35s ease;

}

.btn:hover i{

transform:translateX(6px);

}


/*==================================================
RIPPLE EFFECT
==================================================*/

.btn-ripple{

position:relative;

overflow:hidden;

}

.btn-ripple::after{

content:"";

position:absolute;

width:20px;

height:20px;

background:rgba(255,255,255,.45);

border-radius:50%;

opacity:0;

transform:scale(0);

pointer-events:none;

}

.btn-ripple:active::after{

animation:ripple .6s ease;

}

@keyframes ripple{

0%{

opacity:.6;

transform:scale(0);

}

100%{

opacity:0;

transform:scale(18);

}

}


/*==================================================
SCROLL INDICATOR
==================================================*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

animation:indicatorFloat 2s infinite;

}

@keyframes indicatorFloat{

0%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

100%{

transform:translate(-50%,0);

}

}

.scroll-indicator span{

display:block;

width:4px;

height:12px;

margin:auto;

border-radius:30px;

background:#ffffff;

animation:scrollWheel 1.5s infinite;

}

@keyframes scrollWheel{

0%{

opacity:0;

transform:translateY(0);

}

40%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(12px);

}

}


/*==================================================
BACKGROUND GRADIENT
==================================================*/

.hero::before{

content:"";

position:absolute;

inset:0;

background-size:300% 300%;

animation:gradientShift 12s ease infinite;

}

@keyframes gradientShift{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*==================================================
PARALLAX
==================================================*/

.parallax{

transition:transform .15s linear;

will-change:transform;

}


/*==================================================
SCROLL PROGRESS BAR
==================================================*/

#scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(

90deg,

var(--primary-color),

var(--secondary-color)

);

z-index:99999;

transition:width .15s linear;

}


/*==================================================
PRELOADER
==================================================*/

#preloader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:#ffffff;

z-index:999999;

transition:

opacity .5s ease,

visibility .5s ease;

}

#preloader.loaded{

opacity:0;

visibility:hidden;

}


/*==================================================
LOADER
==================================================*/

.loader{

width:70px;

height:70px;

border-radius:50%;

border:5px solid rgba(0,0,0,.08);

border-top:5px solid var(--primary-color);

animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}


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

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

.hero-content,

.hero-image,

.hero-image img,

.hero-shape-1,

.hero-shape-2,

.hero-shape-3,

.hero-stat,

.scroll-indicator,

.hero::before,

.loader,

.btn::before{

animation:none !important;

transition:none !important;

transform:none !important;

}

}
/*==================================================
ANIMATION.CSS
PART 3
CARDS • PRODUCTS • COUNTERS • CONTACT
SECTION REVEALS
==================================================*/


/*==================================================
COMPANY CARDS
==================================================*/

.company-card{

position:relative;

overflow:hidden;

transition:
transform .45s ease,
box-shadow .45s ease,
background .45s ease;

}

.company-card::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transition:.8s;

pointer-events:none;

}

.company-card:hover::before{

left:120%;

}

.company-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.company-card i{

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

}

.company-card:hover i{

transform:rotate(12deg) scale(1.15);

color:var(--primary-color);

}

.company-card h3{

transition:.35s;

}

.company-card:hover h3{

color:var(--primary-color);

}



/*==================================================
WHY AVATT CARDS
==================================================*/

.why-box{

position:relative;

overflow:hidden;

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

}

.why-box::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:4px;

background:var(--primary-color);

transition:.45s ease;

}

.why-box:hover::after{

width:100%;

}

.why-box:hover{

transform:translateY(-10px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.why-box i{

transition:.4s ease;

}

.why-box:hover i{

transform:scale(1.15);

}



/*==================================================
PRODUCT CARDS
==================================================*/

.product-card{

position:relative;

overflow:hidden;

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

}

.product-card:hover{

transform:translateY(-15px);

box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.product-image{

overflow:hidden;

}

.product-card img{

display:block;

width:100%;

transition:
transform .8s ease,
filter .5s ease;

}

.product-card:hover img{

transform:scale(1.08);

filter:brightness(1.08);

}

.product-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.45s ease;

}

.product-card:hover .product-overlay{

opacity:1;

}

.product-overlay .btn{

transform:translateY(20px);

transition:.35s ease;

}

.product-card:hover .product-overlay .btn{

transform:translateY(0);

}



/*==================================================
PRODUCT STAGGER
==================================================*/

.product-card:nth-child(1){animation-delay:.1s;}
.product-card:nth-child(2){animation-delay:.2s;}
.product-card:nth-child(3){animation-delay:.3s;}
.product-card:nth-child(4){animation-delay:.4s;}
.product-card:nth-child(5){animation-delay:.5s;}
.product-card:nth-child(6){animation-delay:.6s;}
.product-card:nth-child(7){animation-delay:.7s;}
.product-card:nth-child(8){animation-delay:.8s;}



/*==================================================
EXPERTISE CARDS
==================================================*/

.expertise-card{

position:relative;

overflow:hidden;

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

}

.expertise-card::before{

content:"";

position:absolute;

left:0;

top:0;

height:100%;

width:4px;

background:var(--primary-color);

transform:scaleY(0);

transform-origin:top;

transition:.4s ease;

}

.expertise-card:hover::before{

transform:scaleY(1);

}

.expertise-card:hover{

transform:translateY(-12px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.expertise-card i{

transition:.45s ease;

}

.expertise-card:hover i{

transform:rotate(-10deg) scale(1.2);

color:var(--primary-color);

}



/*==================================================
STATISTICS CARDS
==================================================*/

.stat-card{

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

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.stat-card i{

animation:counterPulse 2.5s infinite;

}

@keyframes counterPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

.stat-card h2{

display:inline-block;

animation:numberGlow 3s infinite;

}

@keyframes numberGlow{

0%{

text-shadow:none;

}

50%{

text-shadow:0 0 18px rgba(0,120,255,.28);

}

100%{

text-shadow:none;

}

}



/*==================================================
CONTACT CARDS
==================================================*/

.contact-card{

position:relative;

overflow:hidden;

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

}

.contact-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:var(--primary-color);

transform:scaleX(0);

transform-origin:left;

transition:.45s ease;

}

.contact-card:hover::before{

transform:scaleX(1);

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.contact-card i{

transition:.45s ease;

}

.contact-card:hover i{

transform:rotate(12deg) scale(1.15);

color:var(--primary-color);

}



/*==================================================
SECTION REVEAL
==================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .8s ease,

transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}



/*==================================================
STAGGER UTILITIES
==================================================*/

.stagger-1{transition-delay:.1s;}
.stagger-2{transition-delay:.2s;}
.stagger-3{transition-delay:.3s;}
.stagger-4{transition-delay:.4s;}
.stagger-5{transition-delay:.5s;}
.stagger-6{transition-delay:.6s;}
.stagger-7{transition-delay:.7s;}
.stagger-8{transition-delay:.8s;}



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

img{

transition:

transform .45s ease,

filter .45s ease,

opacity .35s ease;

}

img:hover{

filter:brightness(1.05);

}



/*==================================================
SECTION DIVIDERS
==================================================*/

.section-divider{

position:relative;

overflow:hidden;

}

.section-divider::after{

content:"";

position:absolute;

bottom:0;

left:50%;

width:80px;

height:4px;

background:var(--primary-color);

transform:translateX(-50%);

border-radius:20px;

}



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

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

.company-card,
.why-box,
.product-card,
.product-card img,
.product-overlay,
.expertise-card,
.stat-card,
.contact-card,
.reveal{

animation:none !important;

transition:none !important;

transform:none !important;

}

}
/*==================================================
ANIMATION.CSS
PART 4
CTA • FOOTER • LOGO CAROUSEL
PRELOADER • PAGE TRANSITIONS
==================================================*/


/*==================================================
CUSTOMER LOGO CAROUSEL
==================================================*/

.logo-carousel{

position:relative;

overflow:hidden;

white-space:nowrap;

}

.logo-track{

display:flex;

align-items:center;

gap:60px;

width:max-content;

animation:logoScroll 30s linear infinite;

will-change:transform;

}

.logo-carousel:hover .logo-track{

animation-play-state:paused;

}

.logo-track img{

height:60px;

width:auto;

opacity:.75;

filter:grayscale(100%);

transition:

opacity .35s ease,

filter .35s ease,

transform .35s ease;

}

.logo-track img:hover{

opacity:1;

filter:none;

transform:translateY(-6px) scale(1.05);

}

@keyframes logoScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}



/*==================================================
CALL TO ACTION
==================================================*/

.cta-section{

position:relative;

overflow:hidden;

isolation:isolate;

}

.cta-section::before{

content:"";

position:absolute;

top:-120px;

left:-120px;

width:280px;

height:280px;

border-radius:50%;

background:rgba(255,255,255,.08);

animation:ctaCircleOne 10s ease-in-out infinite;

z-index:-1;

}

.cta-section::after{

content:"";

position:absolute;

right:-100px;

bottom:-100px;

width:240px;

height:240px;

border-radius:50%;

background:rgba(255,255,255,.05);

animation:ctaCircleTwo 12s ease-in-out infinite;

z-index:-1;

}

@keyframes ctaCircleOne{

0%{

transform:scale(1) rotate(0);

}

50%{

transform:scale(1.25) rotate(180deg);

}

100%{

transform:scale(1) rotate(360deg);

}

}

@keyframes ctaCircleTwo{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}

.cta-content{

animation:fadeUp .9s ease both;

}

.cta-buttons .btn:hover{

transform:translateY(-5px) scale(1.03);

}



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

.footer{

position:relative;

overflow:hidden;

}

.footer-column{

transition:

transform .35s ease,

opacity .35s ease;

}

.footer-column:hover{

transform:translateY(-5px);

}

.footer-links a{

position:relative;

display:inline-block;

transition:.3s ease;

}

.footer-links a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:currentColor;

transition:.35s ease;

}

.footer-links a:hover::after{

width:100%;

}

.footer-social a{

display:inline-flex;

align-items:center;

justify-content:center;

transition:

transform .35s ease,

background .35s ease,

color .35s ease;

}

.footer-social a:hover{

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

}



/*==================================================
BACK TO TOP BUTTON
==================================================*/

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:

opacity .35s ease,

transform .35s ease,

box-shadow .35s ease;

z-index:999;

}

#backToTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#backToTop:hover{

transform:translateY(-6px);

box-shadow:0 12px 30px rgba(0,0,0,.25);

}

#backToTop i{

transition:transform .35s ease;

}

#backToTop:hover i{

transform:translateY(-3px);

}



/*==================================================
PAGE TRANSITION
==================================================*/

body{

animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}



/*==================================================
SECTION STAGGER
==================================================*/

section>*{

animation:fadeUp .8s ease both;

}

section>*:nth-child(1){

animation-delay:.1s;

}

section>*:nth-child(2){

animation-delay:.2s;

}

section>*:nth-child(3){

animation-delay:.3s;

}

section>*:nth-child(4){

animation-delay:.4s;

}

section>*:nth-child(5){

animation-delay:.5s;

}



/*==================================================
SCROLL PROGRESS BAR
==================================================*/

#scroll-progress{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(

90deg,

var(--primary-color),

var(--secondary-color)

);

z-index:99999;

transition:width .15s linear;

}



/*==================================================
LAZY IMAGE FADE
==================================================*/

img{

opacity:0;

transition:

opacity .5s ease,

transform .45s ease,

filter .45s ease;

}

img.loaded{

opacity:1;

}



/*==================================================
TEXT GRADIENT
==================================================*/

.gradient-text{

background:linear-gradient(

90deg,

var(--primary-color),

var(--secondary-color),

var(--primary-color)

);

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:textGradient 6s linear infinite;

}

@keyframes textGradient{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}



/*==================================================
FLOATING UTILITIES
==================================================*/

.float-slow{

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

}

@keyframes floatSlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}



/*==================================================
PRINT STYLES
==================================================*/

@media print{

*{

animation:none !important;

transition:none !important;

box-shadow:none !important;

}

#backToTop,

#preloader,

#scroll-progress{

display:none !important;

}

}



/*==================================================
REDUCED MOTION
==================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

.logo-track,

.cta-section::before,

.cta-section::after,

.footer-column,

.footer-social a,

.footer-links a,

#backToTop,

.gradient-text,

.float-slow,

body{

animation:none !important;

transform:none !important;

}

}



/*==================================================
GPU OPTIMIZATION
==================================================*/

.logo-track,

.company-card,

.product-card,

.expertise-card,

.contact-card,

.stat-card,

.hero-image,

.hero-content{

transform:translateZ(0);

backface-visibility:hidden;

will-change:transform;

}



/*==================================================
END OF animation.css
==================================================*/