/* =============================
   animations.css — Jean Gorin
   Ultra contemporain & fluide
   ============================= */

/* 1. Reveal de base : fade + translateY */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s, transform 1s;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Slide gauche / droite */
.slide-left, .slide-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(.45,1.5,.55,1), transform 1s cubic-bezier(.4,1.4,.6,1);
  will-change: opacity, transform;
}
.slide-left { transform: translateX(-40px); }
.slide-left.visible { transform: translateX(0); opacity: 1; }
.slide-right { transform: translateX(40px); }
.slide-right.visible { transform: translateX(0); opacity: 1; }

/* 3. Zoom progressif */
.zoom-on-reveal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(.45,1.4,.55,1), transform 0.8s cubic-bezier(.4,1.4,.6,1);
  will-change: opacity, transform;
}
.zoom-on-reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* 4. Fade simple */
.fade-in {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.45,1.6,.55,1);
  will-change: opacity;
}
.fade-in.visible { opacity: 1; }

/* 5. Hover sur carte ou item carrousel */
.card:hover, .card:focus-visible,
.carousel-item:hover, .carousel-item:focus-visible {
  transform: scale(1.028);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  transition: transform 0.26s cubic-bezier(.4,1.4,.7,1), box-shadow 0.26s cubic-bezier(.4,1.4,.7,1);
}

/* 6. Titre animé dans section parallax */
.parallax-content h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 1.2s cubic-bezier(.33,1.7,.7,1) forwards;
  animation-delay: 0.38s;
  will-change: opacity, transform;
}
.parallax-content h2.visible { /* Cas où tu ajoutes .visible dynamiquement */
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* 7. Keyframes */
@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 8. Boutons interactifs */
button,
.theme-toggle-container button,
#theme-toggle {
  transition: background-color 0.3s, color 0.3s, transform 0.22s;
}
button:hover, button:focus-visible,
.theme-toggle-container button:hover, .theme-toggle-container button:focus-visible,
#theme-toggle:hover, #theme-toggle:focus-visible {
  transform: scale(1.06);
}

/* 9. Accessibilité — motion réduite */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .slide-left, .slide-right,
  .zoom-on-reveal,
  .fade-in,
  .card:hover, .card:focus-visible,
  .carousel-item:hover, .carousel-item:focus-visible {
    transition: none !important;
    transform: none !important;
  }
  .parallax-content h2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}