/* ===========================================================
   ANIMATIONS - Scroll reveal et micro-interactions
   =========================================================== */

/* ========================
   SCROLL REVEAL - apparition douce au scroll
   Classes utilisables :
   .reveal             → fade in from below
   .reveal-up          → translate Y from below (default)
   .reveal-left        → translate from left
   .reveal-right       → translate from right
   .reveal-scale       → scale in
   data-reveal-delay   → délai en ms (100, 200, 300, 400, 500)
   ======================== */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal,
.reveal-up {
  transform: translateY(32px);
}

.reveal-left {
  transform: translateX(-32px);
}

.reveal-right {
  transform: translateX(32px);
}

.reveal-scale {
  transform: scale(0.92);
}

/* Quand l'élément devient visible (classe ajoutée par JS) */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Délais (pour effet cascade) */
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }

/* ========================
   KEYFRAMES réutilisables
   ======================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes bounceLight {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* === Utilitaires animations === */
.animate-fade-in    { animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-bounce     { animation: bounceLight 2s ease-in-out infinite; }