/* ===========================================
   ANIMATION.CSS PREMIUM V3
=========================================== */

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

.fade-in{

opacity:0;

animation:fadeIn 1s ease forwards;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ===========================
SLIDE UP
=========================== */

.slide-up{

opacity:0;

transform:translateY(60px);

animation:slideUp .8s ease forwards;

}

@keyframes slideUp{

to{

opacity:1;

transform:translateY(0);

}

}

/* ===========================
SLIDE LEFT
=========================== */

.slide-left{

opacity:0;

transform:translateX(-80px);

animation:slideLeft .8s ease forwards;

}

@keyframes slideLeft{

to{

opacity:1;

transform:translateX(0);

}

}

/* ===========================
SLIDE RIGHT
=========================== */

.slide-right{

opacity:0;

transform:translateX(80px);

animation:slideRight .8s ease forwards;

}

@keyframes slideRight{

to{

opacity:1;

transform:translateX(0);

}

}

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

.zoom-in{

opacity:0;

transform:scale(.85);

animation:zoomIn .8s ease forwards;

}

@keyframes zoomIn{

to{

opacity:1;

transform:scale(1);

}

}

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

.float{

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

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(235,10,30,.45);

}

70%{

box-shadow:0 0 0 18px rgba(235,10,30,0);

}

100%{

box-shadow:0 0 0 0 rgba(235,10,30,0);

}

}

/* ===========================
BUTTON RIPPLE
=========================== */

.btn,
.btn-small,
.btn-wa{

position:relative;

overflow:hidden;

}

.btn::before,
.btn-small::before,
.btn-wa::before{

content:"";

position:absolute;

top:50%;

left:50%;

width:0;

height:0;

border-radius:50%;

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

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

transition:.6s;

}

.btn:hover::before,
.btn-small:hover::before,
.btn-wa:hover::before{

width:350px;

height:350px;

}

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

.product-card,
.service-card,
.stats-card,
.simulation-card,
.testimonial-card{

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

}

.product-card:hover,
.service-card:hover,
.stats-card:hover,
.simulation-card:hover,
.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:0 22px 55px rgba(0,0,0,.15);

}

/* ===========================
IMAGE HOVER
=========================== */

.product-card img,
.about-image img,
.promo-image img{

transition:transform .5s ease;

}

.product-card:hover img,
.about-image:hover img,
.promo-image:hover img{

transform:scale(1.05);

}

/* ===========================
NAVBAR LINK
=========================== */

#navbar a{

transition:color .3s ease;

}

#navbar a:hover{

color:var(--primary);

}

/* ===========================
SOCIAL
=========================== */

.social a{

transition:.35s;

}

.social a:hover{

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

}

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

.loaded #loader{

opacity:0;

visibility:hidden;

pointer-events:none;

}

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

.reveal{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

.delay-1{

transition-delay:.1s;

}

.delay-2{

transition-delay:.2s;

}

.delay-3{

transition-delay:.3s;

}

.delay-4{

transition-delay:.4s;

}

.delay-5{

transition-delay:.5s;

}

/* ===========================
SHAKE
=========================== */

.shake:hover{

animation:shake .5s;

}

@keyframes shake{

0%{transform:translateX(0);}
25%{transform:translateX(-5px);}
50%{transform:translateX(5px);}
75%{transform:translateX(-5px);}
100%{transform:translateX(0);}

}

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

.rotate:hover{

animation:rotate .6s linear;

}

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* ===========================
BOUNCE
=========================== */

.bounce{

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-12px);

}

60%{

transform:translateY(-6px);

}

}

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

.gradient-text{

background:linear-gradient(90deg,#EB0A1E,#ff5b6d);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

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

*{

transition-property:
background,
color,
border-color,
box-shadow;

transition-duration:.3s;

}