/* ==========================================================
   XTREME CLEANING SERVICES
   ANIMATIONS.CSS
   PARTIE 1/2
========================================================== */


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

.fade-up{

opacity:0;

transform:translateY(60px);

animation-fill-mode:forwards;

}

.fade-up.show{

animation:fadeUp .9s ease 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.show{

animation:fadeDown .9s ease forwards;

}

@keyframes fadeDown{

to{

opacity:1;

transform:translateY(0);

}

}


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

.fade-left{

opacity:0;

transform:translateX(-80px);

}

.fade-left.show{

animation:fadeLeft .9s ease forwards;

}

@keyframes fadeLeft{

to{

opacity:1;

transform:translateX(0);

}

}


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

.fade-right{

opacity:0;

transform:translateX(80px);

}

.fade-right.show{

animation:fadeRight .9s ease forwards;

}

@keyframes fadeRight{

to{

opacity:1;

transform:translateX(0);

}

}


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

.zoom-in{

opacity:0;

transform:scale(.80);

}

.zoom-in.show{

animation:zoomIn .7s ease forwards;

}

@keyframes zoomIn{

to{

opacity:1;

transform:scale(1);

}

}


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

.zoom-out{

animation:zoomOut .4s ease;

}

@keyframes zoomOut{

0%{

transform:scale(1);

}

50%{

transform:scale(.95);

}

100%{

transform:scale(1);

}

}


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

.float-animation{

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

}

@keyframes floatAnimation{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


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

.pulse{

animation:pulse 2.2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(28,179,74,.55);

}

70%{

box-shadow:0 0 0 18px rgba(28,179,74,0);

}

100%{

box-shadow:0 0 0 0 rgba(28,179,74,0);

}

}


/* ==========================================================
   ROTATION
========================================================== */

.rotate{

animation:rotate360 16s linear infinite;

}

@keyframes rotate360{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero h1{

animation:heroTitle 1.2s ease;

}

@keyframes heroTitle{

0%{

opacity:0;

transform:translateY(45px);

}

100%{

opacity:1;

transform:none;

}

}


/* ==========================================================
   HERO PARAGRAPH
========================================================== */

.hero p{

animation:heroText 1.5s ease;

}

@keyframes heroText{

0%{

opacity:0;

transform:translateY(35px);

}

100%{

opacity:1;

transform:none;

}

}


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

.hero-buttons{

animation:heroButtons 1.8s ease;

}

@keyframes heroButtons{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:none;

}

}


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

.hover-zoom{

overflow:hidden;

}

.hover-zoom img{

transition:.6s;

}

.hover-zoom:hover img{

transform:scale(1.12);

}


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

.shine{

position:relative;

overflow:hidden;

}

.shine::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

}

.shine:hover::after{

animation:shine 1s;

}

@keyframes shine{

100%{

left:170%;

}

}


/* ==========================================================
   BOUTONS
========================================================== */

.btn,

.btn-premium{

transition:.35s;

}

.btn:hover,

.btn-premium:hover{

transform:translateY(-5px);

}
/* ==========================================================
   XTREME CLEANING SERVICES
   ANIMATIONS.CSS
   PARTIE 2/2
========================================================== */


/* ==========================================================
   APPARITION DES CARTES
========================================================== */

.service-card,
.feature-box,
.advantage-box,
.gallery-card,
.card-modern,
.stat-card{

opacity:0;

transform:translateY(40px);

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

}

.service-card.visible,
.feature-box.visible,
.advantage-box.visible,
.gallery-card.visible,
.card-modern.visible,
.stat-card.visible{

opacity:1;

transform:translateY(0);

}


/* ==========================================================
   DELAIS D'APPARITION
========================================================== */

.delay-1{transition-delay:.10s;}
.delay-2{transition-delay:.20s;}
.delay-3{transition-delay:.30s;}
.delay-4{transition-delay:.40s;}
.delay-5{transition-delay:.50s;}
.delay-6{transition-delay:.60s;}


/* ==========================================================
   STATISTIQUES
========================================================== */

.stat-card:hover{

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

}


/* ==========================================================
   GALERIE
========================================================== */

.gallery-card{

overflow:hidden;

}

.gallery-card img{

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

}

.gallery-card:hover img{

transform:scale(1.12);

filter:brightness(.88);

}


/* ==========================================================
   ICÔNES
========================================================== */

.icon-circle,
.icon-box{

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

}

.icon-circle:hover,
.icon-box:hover{

transform:rotate(8deg) scale(1.10);

}


/* ==========================================================
   VIDEO
========================================================== */

.video-box{

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

}

.video-box:hover{

transform:scale(1.02);

box-shadow:0 35px 70px rgba(0,0,0,.30);

}


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

.whatsapp-float{

animation:whatsappFloat 3s ease-in-out infinite;

}

@keyframes whatsappFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


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

#backToTop{

transition:
opacity .35s,
transform .35s;

}

#backToTop:hover{

transform:translateY(-6px);

}


/* ==========================================================
   COOKIE
========================================================== */

#cookieBanner{

animation:cookieSlide .6s ease;

}

@keyframes cookieSlide{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


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

#loader{

animation:loaderFade .6s ease;

}

@keyframes loaderFade{

0%{

opacity:0;

}

100%{

opacity:1;

}

}


/* ==========================================================
   MENU
========================================================== */

.navbar{

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

}


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

.footer-social a{

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

}

.footer-social a:hover{

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

}


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

.cta-section .btn,
.final-cta .btn{

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

}

.cta-section .btn:hover,
.final-cta .btn:hover{

transform:translateY(-6px);

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

}


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

.scroll-indicator span{

animation:scrollDot 2s infinite;

}

@keyframes scrollDot{

0%{

opacity:0;

transform:translateY(0);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(25px);

}

}


/* ==========================================================
   ANIMATION AU CHARGEMENT
========================================================== */

body{

animation:pageLoaded .5s ease;

}

@keyframes pageLoaded{

from{

opacity:0;

}

to{

opacity:1;

}

}


/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

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

*,
*::before,
*::after{

animation:none !important;

transition:none !important;

}

}

/* ==========================================================
   FIN DU FICHIER
========================================================== */