/* ============================================
   BRAND PARTNERS V4 — Animations
   Systeme CSS natif + IntersectionObserver
   ============================================ */

/* ---- Legacy : fade-in (compatibilite) ---- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* ============================================
   SYSTEME .anim — TOUTES TAILLES D'ECRAN
   CSS + IntersectionObserver (main.js)
   ============================================ */

.anim {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim.visible {
  opacity: 1;
  transform: none;
}

.anim--left { transform: translateX(-60px); }
.anim--right { transform: translateX(60px); }
.anim--scale { transform: scale(0.92); }
.anim--up-lg { transform: translateY(70px); }
.anim--methode { transform: translateX(-15px) translateY(8px); transition-duration: 0.7s; }

.anim-d1 { transition-delay: 0.15s; }
.anim-d2 { transition-delay: 0.3s; }
.anim-d3 { transition-delay: 0.45s; }
.anim-d4 { transition-delay: 0.6s; }
.anim-d5 { transition-delay: 0.75s; }
.anim-d6 { transition-delay: 0.9s; }

.anim--fast { transition-duration: 0.5s; }
.anim--slow { transition-duration: 1.4s; }

/* ---- Clip-path reveal (images — classes autonomes) ---- */
.clip-left {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.clip-right {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.clip-left.visible,
.clip-right.visible {
  clip-path: inset(0 0 0 0);
}

/* ---- Line reveal (horizontal separator) ---- */
.line-reveal {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.line-reveal.visible {
  transform: scaleX(1);
}

/* --- Compteurs (gérés par GSAP — état initial CSS) --- */
.counter-start {
  opacity: 0;
  transform: scale(2);
  display: inline-block;
}

/* --- Fallback si JS ne charge pas (3s timeout) --- */
@keyframes animFallback {
  to { opacity: 1; transform: none; clip-path: none; }
}

.anim, .fade-in, .clip-left, .clip-right, .line-reveal, .counter-start {
  animation: animFallback 0s 3s forwards;
}

/* JS ajoute .visible → annule le fallback */
.anim.visible, .fade-in.visible, .clip-left.visible, .clip-right.visible, .line-reveal.visible {
  animation: none;
}

/* --- Mobile : animations allégées (768px) --- */
@media (max-width: 768px) {
  .anim {
    transform: translateY(20px);
    transition-duration: 0.6s;
  }

  .anim--left { transform: translateX(-30px); }
  .anim--right { transform: translateX(30px); }
  .anim--scale { transform: scale(0.95); }
  .anim--up-lg { transform: translateY(40px); }
  .anim--methode { transform: translateX(-10px) translateY(5px); transition-duration: 0.5s; }

  /* Delays réduits — tout apparaît plus vite */
  .anim-d1 { transition-delay: 0.1s; }
  .anim-d2 { transition-delay: 0.15s; }
  .anim-d3 { transition-delay: 0.2s; }
  .anim-d4 { transition-delay: 0.25s; }
  .anim-d5 { transition-delay: 0.3s; }
  .anim-d6 { transition-delay: 0.35s; }

  .anim--slow { transition-duration: 0.8s; }

  .clip-left,
  .clip-right {
    transition-duration: 0.6s;
  }
}

/* --- Petit mobile : encore plus rapide (480px) --- */
@media (max-width: 480px) {
  .anim {
    transform: translateY(15px);
    transition-duration: 0.5s;
  }

  .anim--left { transform: translateX(-20px); }
  .anim--right { transform: translateX(20px); }
  .anim--up-lg { transform: translateY(25px); }
  .anim--methode { transform: translateX(-8px) translateY(4px); transition-duration: 0.4s; }

  /* Delays quasi-nuls */
  .anim-d1 { transition-delay: 0.05s; }
  .anim-d2 { transition-delay: 0.1s; }
  .anim-d3 { transition-delay: 0.15s; }
  .anim-d4 { transition-delay: 0.2s; }
  .anim-d5 { transition-delay: 0.2s; }
  .anim-d6 { transition-delay: 0.2s; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .anim,
  .clip-left,
  .clip-right,
  .line-reveal,
  .fade-in,
  .counter-start {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}