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

*{

transition:

background .4s,
color .4s,
border .4s;

}


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

.fade-up{

opacity:0;

transform:
translateY(70px);

transition:

all 1s ease;

}

.fade-up.active{

opacity:1;

transform:
translateY(0);

}


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

.fade-left{

opacity:0;

transform:
translateX(-80px);

transition:
1s;

}

.fade-left.active{

opacity:1;

transform:
translateX(0);

}


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

.fade-right{

opacity:0;

transform:
translateX(80px);

transition:
1s;

}

.fade-right.active{

opacity:1;

transform:
translateX(0);

}


/* ==========================
SCALE IN
========================== */

.scale-in{

opacity:0;

transform:
scale(.85);

transition:
1s;

}

.scale-in.active{

opacity:1;

transform:
scale(1);

}


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

.reveal{

opacity:0;

transform:
translateY(100px);

transition:

all 1s ease;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}









































/* ==========================
FLOATING EFFECT
========================== */

@keyframes floating{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-20px);

}

100%{

transform:
translateY(0px);

}

}


/* ==========================
WHATSAPP FLOAT
========================== */

@keyframes floatWhatsapp{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-10px);

}

100%{

transform:
translateY(0);

}

}


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

.hero-text h1{

animation:

heroTitle
1.2s ease;

}

.hero-text p{

animation:

heroText
1.6s ease;

}


@keyframes heroTitle{

from{

opacity:0;

transform:
translateY(100px);

}

to{

opacity:1;

transform:
translateY(0);

}

}


@keyframes heroText{

from{

opacity:0;

transform:
translateY(80px);

}

to{

opacity:1;

transform:
translateY(0);

}

}


/* ==========================
BUTTON POP
========================== */

.btn{

animation:
buttonPop
1.2s ease;

}

@keyframes buttonPop{

0%{

opacity:0;

transform:
scale(.8);

}

100%{

opacity:1;

transform:
scale(1);

}

}







































/* ==========================
3D CARD HOVER
========================== */

.product-card,
.service-card,
.about-card,
.contact-card,
.why-card{

transform-style:
preserve-3d;

will-change:
transform;

transition:

transform .5s ease,
box-shadow .5s ease;

}


.product-card:hover,
.service-card:hover,
.about-card:hover,
.contact-card:hover,
.why-card:hover{

transform:

perspective(1000px)
rotateX(4deg)
rotateY(-4deg)
translateY(-12px);

box-shadow:

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

}



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

.product-card,
.service-card,
.about-card,
.contact-card{

position:relative;

overflow:hidden;

}


.product-card::before,
.service-card::before,
.about-card::before,
.contact-card::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:80%;
height:100%;

background:

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

transform:
skewX(-25deg);

transition:1s;

}


.product-card:hover::before,
.service-card:hover::before,
.about-card:hover::before,
.contact-card:hover::before{

left:150%;

}



/* ==========================
COUNTER POP EFFECT
========================== */

.counter-card{

animation:

counterFloat
4s ease-in-out infinite;

}

.counter-card:nth-child(2){

animation-delay:1s;

}

.counter-card:nth-child(3){

animation-delay:2s;

}


@keyframes counterFloat{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-10px);

}

100%{

transform:
translateY(0px);

}

}



/* ==========================
FADE IN DELAYS
========================== */

.delay-1{

transition-delay:.2s;
}

.delay-2{

transition-delay:.4s;
}

.delay-3{

transition-delay:.6s;
}

.delay-4{

transition-delay:.8s;
}



/* ==========================
PAGE LOAD ANIMATION
========================== */

body{

animation:

pageLoad
1s ease;

}

@keyframes pageLoad{

from{

opacity:0;

transform:
translateY(20px);

}

to{

opacity:1;

transform:
translateY(0);

}

}



/* ==========================
SMOOTH IMAGE ZOOM
========================== */

img{

transition:

transform .8s ease;

}

.product-card:hover img{

transform:
scale(1.08);

}



/* ==========================
PREMIUM BUTTON EFFECT
========================== */

.btn{

position:relative;

overflow:hidden;

}


.btn::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:

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

transition:.8s;

}


.btn:hover::before{

left:100%;

}



/* ==========================
MOBILE PERFORMANCE FIX
========================== */

@media(max-width:768px){

.product-card:hover,
.service-card:hover,
.about-card:hover,
.contact-card:hover,
.why-card:hover{

transform:
translateY(-5px);

}


.counter-card{

animation:none;
}


.product-card::before,
.service-card::before,
.about-card::before,
.contact-card::before{

display:none;
}


body{

animation:none;
}

}



/* ==========================
REDUCE MOTION SUPPORT
========================== */

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

*{

animation:none !important;

transition:none !important;

}

}