/* ==========================================================================
   MIK'ARBRE ÉLAGAGE — animations.css
   Keyframes, classes utilitaires reveal, parallaxe, prefers-reduced-motion
   Dépendances : js/animations.js (gère IntersectionObserver, parallaxe, tilt)
   ========================================================================== */

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}
@keyframes grow-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes leaf-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

/* ============================================
   CLASSES REVEAL (déclenchées via IntersectionObserver)
   Ajoute .is-visible sur l'élément quand il entre dans le viewport
   ============================================ */
.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-clip {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-up { transform: translateY(30px); }
.reveal-down { transform: translateY(-30px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.92); }
.reveal-clip { clip-path: inset(0 100% 0 0); opacity: 1; }

.is-visible.reveal,
.is-visible.reveal-up,
.is-visible.reveal-down,
.is-visible.reveal-left,
.is-visible.reveal-right,
.is-visible.reveal-scale {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}
.is-visible.reveal-clip { clip-path: inset(0 0 0 0); }

/* Stagger delay utilities (pour les grids de cartes) */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }
.stagger > *:nth-child(7) { transition-delay: 0.6s; }
.stagger > *:nth-child(8) { transition-delay: 0.7s; }

/* ============================================
   PARALLAXE (valeur injectée via JS)
   ============================================ */
.parallax { will-change: transform; }
[data-parallax] { will-change: transform; transition: transform 0.08s linear; }

/* ============================================
   SVG UNDERLINE ANIMATION (titres de section)
   ============================================ */
.section-head h2::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-visible .section-head h2::after,
.section-head.is-visible h2::after { transform: scaleX(1); }

/* ============================================
   SVG STROKE DRAW (icônes prestations)
   L'icône dessine son trait au scroll
   ============================================ */
.icon-stroke path,
.icon-stroke circle,
.icon-stroke rect,
.icon-stroke polyline,
.icon-stroke line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.4s ease;
}
.is-visible .icon-stroke path,
.is-visible .icon-stroke circle,
.is-visible .icon-stroke rect,
.is-visible .icon-stroke polyline,
.is-visible .icon-stroke line { stroke-dashoffset: 0; }

/* ============================================
   COMPTEURS ANIMÉS
   La valeur est incrémentée via JS, on ajoute juste un effet d'apparition
   ============================================ */
.counter {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.counter.counting, .counter.is-visible { opacity: 1; }

/* ============================================
   TILT 3D sur cartes prestations
   Les valeurs --tiltX et --tiltY sont injectées par JS
   ============================================ */
.service-card {
  transform: perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}
@media (hover: none) {
  .service-card { transform: none !important; }
}

/* ============================================
   MICRO-ANIMATIONS INTERACTIVES
   ============================================ */
.logo-animate {
  opacity: 0;
  transform: scale(0.9);
  animation: fade-in-scale 0.8s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fade-in-scale {
  to { opacity: 1; transform: scale(1); }
}

/* ============================================
   ANIMATIONS D'ENTRÉE HERO
   ============================================ */
.hero-content > * {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.2s; }
.hero-content > *:nth-child(2) { animation-delay: 0.4s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.8s; }
.hero-content > *:nth-child(5) { animation-delay: 1.0s; }

/* ============================================
   ACCESSIBILITÉ — prefers-reduced-motion
   Respecte la préférence utilisateur : tout statique
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-scale, .reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-content > * { opacity: 1 !important; animation: none !important; }
  .counter { opacity: 1 !important; }
  .hero-scroll, .float-call, .hero-badge .dot { animation: none !important; }
  .particles-canvas { display: none !important; }
  .reviews-track { animation: none !important; }
  .section-head h2::after { transform: scaleX(1) !important; }
  .icon-stroke path, .icon-stroke circle, .icon-stroke rect, .icon-stroke polyline, .icon-stroke line { stroke-dashoffset: 0 !important; }
}

/* Mobile : simplifier */
@media (max-width: 767px) {
  .parallax, [data-parallax] { transform: none !important; }
  .hero-layer { position: absolute; inset: 0; height: 100%; }
  .service-card { transform: none !important; }
  .split-media img { transition: none; }
}