/* ══════════════════════════════════════════════════════════
   ANIMATIONS — ENCHANTED TOOLS
   Durations : 160ms / 240ms / 480ms (brand motion)
   Easing : var(--ease-out) | var(--ease-smooth)
   ══════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────── */

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

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

/* Float signature Mirokaï */
@keyframes mirokaiFloat {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-16px); }
}

/* Marquee scroll */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Halo pulse */
@keyframes haloPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 0.60; transform: scale(1.06); }
}

/* ── Classes utilitaires ──────────────────────────────────── */

.anim-fade-in   { animation: fadeIn   var(--duration-base) var(--ease-out) both; }
.anim-fade-up   { animation: fadeUp   var(--duration-slow) var(--ease-out) both; }
.anim-scale-in  { animation: scaleIn  var(--duration-slow) var(--ease-out) both; }
.anim-slide-left{ animation: slideInLeft var(--duration-slow) var(--ease-out) both; }

/* Délai via prop CSS --delay (setté inline par le JS) */
[style*="--delay"] { animation-delay: var(--delay, 0ms); }

/* ── Reveal au scroll ────────────────────────────────────────
   Ajouter .reveal sur n'importe quel élément.
   animations.js ajoute .is-visible quand il entre en viewport.
──────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}