/* ============================================================
 * SYSTÈME D'ANIMATIONS PERSONNALISÉ - CSS (VERSION AMÉLIORÉE)
 * Animations plus visuelles et dynamiques
 * ============================================================ */

/* ---- État initial : éléments invisibles ---- */
.anime-titre,
.anime-up,
.anime-bloc,
.anime-item {
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

.anime-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.95);
  will-change: transform, opacity;
}

.anime-right {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  will-change: transform, opacity;
}

.anime-down {
  opacity: 0;
  transform: translateY(-60px);
  will-change: transform, opacity;
}

.anime-zoom {
  opacity: 0;
  transform: scale(0.8);
  will-change: transform, opacity;
}

.anime-fade {
  opacity: 0;
  filter: blur(5px);
  will-change: opacity, filter;
}

/* ---- Nouvelles animations ---- */
.anime-bounce {
  opacity: 0;
  transform: translateY(80px) scale(0.9);
  will-change: transform, opacity;
}

.anime-flip {
  opacity: 0;
  transform: perspective(1000px) rotateX(-20deg);
  will-change: transform, opacity;
}

.anime-slide-up {
  opacity: 0;
  transform: translateY(100px);
  filter: blur(10px);
  will-change: transform, opacity, filter;
}

.anime-scale-bounce {
  opacity: 0;
  transform: scale(0.5) rotate(-5deg);
  will-change: transform, opacity;
}

/* ---- Transitions avec easing amélioré ---- */
.anime-titre,
.anime-left,
.anime-right,
.anime-up,
.anime-down,
.anime-bloc,
.anime-item {
  transition: 
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anime-zoom {
  transition: 
    opacity 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anime-fade {
  transition: 
    opacity 600ms ease-out,
    filter 600ms ease-out;
}

.anime-bounce {
  transition: 
    opacity 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
    transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.anime-flip {
  transition: 
    opacity 700ms ease-out,
    transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anime-slide-up {
  transition: 
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.anime-scale-bounce {
  transition: 
    opacity 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
    transform 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ---- Délai par défaut pour .anime-titre ---- */
.anime-titre {
  transition-delay: 200ms;
}

/* ---- État actif : éléments visibles ---- */
.anime-titre.anime-active,
.anime-left.anime-active,
.anime-right.anime-active,
.anime-up.anime-active,
.anime-down.anime-active,
.anime-bloc.anime-active,
.anime-item.anime-active,
.anime-bounce.anime-active {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
}

.anime-zoom.anime-active,
.anime-scale-bounce.anime-active {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.anime-fade.anime-active {
  opacity: 1;
  filter: blur(0);
}

.anime-flip.anime-active {
  opacity: 1;
  transform: perspective(1000px) rotateX(0);
}

.anime-slide-up.anime-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---- Délais personnalisés ---- */
.anime-delay-100 { transition-delay: 100ms; }
.anime-delay-200 { transition-delay: 200ms; }
.anime-delay-300 { transition-delay: 300ms; }
.anime-delay-400 { transition-delay: 400ms; }
.anime-delay-500 { transition-delay: 500ms; }
.anime-delay-600 { transition-delay: 600ms; }
.anime-delay-800 { transition-delay: 800ms; }
.anime-delay-1000 { transition-delay: 1000ms; }

/* ---- Durées personnalisées ---- */
.anime-duration-300 { transition-duration: 300ms; }
.anime-duration-400 { transition-duration: 400ms; }
.anime-duration-600 { transition-duration: 600ms; }
.anime-duration-800 { transition-duration: 800ms; }
.anime-duration-1000 { transition-duration: 1000ms; }

/* ---- Variantes d'easing supplémentaires ---- */
.anime-ease-smooth {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anime-ease-bounce {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.anime-ease-elastic {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Mobile : animations désactivées ---- */
.anime-no-anim .anime-titre,
.anime-no-anim .anime-left,
.anime-no-anim .anime-right,
.anime-no-anim .anime-up,
.anime-no-anim .anime-down,
.anime-no-anim .anime-bloc,
.anime-no-anim .anime-item,
.anime-no-anim .anime-zoom,
.anime-no-anim .anime-fade,
.anime-no-anim .anime-bounce,
.anime-no-anim .anime-flip,
.anime-no-anim .anime-slide-up,
.anime-no-anim .anime-scale-bounce {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  will-change: auto;
}

/* ---- Accessibilité : respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .anime-titre,
  .anime-left,
  .anime-right,
  .anime-up,
  .anime-down,
  .anime-bloc,
  .anime-item,
  .anime-zoom,
  .anime-fade,
  .anime-bounce,
  .anime-flip,
  .anime-slide-up,
  .anime-scale-bounce {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}