/* ==========================================================================
   LIVRE D'OR FARIDEEJAY — animations.css
   Micro-interactions et transitions. Respecte prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Apparition en cascade (écran 1 et 8) ---------- */
.reveal-in {
  opacity: 0;
  transform: translateY(16px);
  animation: revealIn 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-eyebrow.reveal-in { animation-delay: 0.2s; }
.hero-title.reveal-in { animation-delay: 0.35s; }
.hero-subtitle.reveal-in { animation-delay: 0.5s; }
.hero-explainer.reveal-in { animation-delay: 0.62s; }
.hero-content .btn.reveal-in { animation-delay: 0.74s; }

.thanks-mark.reveal-in { animation-delay: 0.1s; }
.thanks-title.reveal-in { animation-delay: 0.25s; }
.thanks-text.reveal-in { animation-delay: 0.4s; }

@keyframes revealIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Transition entre écrans (slide + fade) ---------- */
.screen {
  transform: translateX(0);
}
.screen.is-leaving-forward { animation: slideOutLeft 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
.screen.is-entering-forward { animation: slideInRight 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
.screen.is-leaving-backward { animation: slideOutRight 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
.screen.is-entering-backward { animation: slideInLeft 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes slideOutLeft { from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(-24px);} }
@keyframes slideInRight { from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideOutRight { from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(24px);} }
@keyframes slideInLeft { from{opacity:0; transform:translateX(-24px);} to{opacity:1; transform:translateX(0);} }

/* ---------- Question suivante (glissement interne écran 3/5) ---------- */
.question-block {
  animation: questionIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes questionIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Chips et étoiles : petit rebond au clic ---------- */
.chip { transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.chip:active { transform: scale(0.94); }