/* =====================================================================
   Animations — élégantes et sobres.
   Désactivées automatiquement si l'utilisateur préfère réduire les animations
   (prefers-reduced-motion) ou via le bouton « Réduire les animations » (body.reduce-motion).
   Les états cachés ne s'appliquent que si JavaScript est actif (html.js).
   ===================================================================== */

/* ---------- Apparitions au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.js .reveal--up { transform: translateY(36px); }
.js .reveal--scale { transform: scale(.94); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Écran d'ouverture ---------- */
.opening__card { animation: cardIn 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.opening__logo { animation: logoIn 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; }
.opening__ribbon .ribbon__line { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 2.2s ease .6s forwards; }
.opening__ribbon { animation: sway 5s ease-in-out 1.5s infinite; transform-origin: 50% 38%; }
.opening__title { animation: fadeUp .9s ease .55s both; }
.opening__sub { animation: fadeUp .9s ease .75s both; }
.opening .btn { animation: fadeUp .9s ease .95s both, pulse 2.6s ease-in-out 2.2s infinite; }
.opening__waves { animation: waves 14s ease-in-out infinite alternate; }
.opening.is-leaving { animation: openingOut .9s cubic-bezier(.6, 0, .3, 1) forwards; pointer-events: none; }
.opening.is-leaving .opening__card { animation: cardOut .8s cubic-bezier(.6, 0, .3, 1) forwards; }

/* ---------- Héro (séquence après ouverture) ---------- */
.js [data-hero] { opacity: 0; transform: translateY(22px); }
.is-open [data-hero] { animation: fadeUp 1s cubic-bezier(.2, .8, .2, 1) both; }
.is-open [data-hero="1"] { animation-delay: .1s; }
.is-open [data-hero="2"] { animation-delay: .25s; }
.is-open [data-hero="3"] { animation-delay: .45s; }
.is-open [data-hero="4"] { animation-delay: .6s; }
.is-open [data-hero="5"] { animation-delay: .75s; }
.is-open .hero__highlight span { animation: stamp .9s cubic-bezier(.2, 1.4, .4, 1) .7s both; }
.hero__halo { animation: spin 40s linear infinite; }
.hero__ribbon { animation: sway 6s ease-in-out infinite; transform-origin: 50% 38%; }
.hero__glow { animation: glow 8s ease-in-out infinite alternate; }
.hero__waves { animation: waves 16s ease-in-out infinite alternate; }
.hero__scroll span { animation: scrollDot 1.8s ease-in-out infinite; }

/* ---------- Intervenante ---------- */
.speaker__halo { animation: glow 6s ease-in-out infinite alternate; }

/* ---------- Thème : révélation mot à mot ---------- */
.js .theme__word { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.theme.is-in .theme__word { transform: none; }
.theme__ribbon .ribbon__line { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 2.4s ease .3s; }
.theme.is-in .theme__ribbon .ribbon__line { stroke-dashoffset: 0; }
.theme__ribbon { animation: sway 6s ease-in-out infinite; transform-origin: 50% 38%; }

/* ---------- Compte à rebours ---------- */
.countdown__num.tick { animation: tick .45s ease; }
.countdown__state:not([hidden]) { animation: fadeUp .8s ease both; }

/* ---------- Divers ---------- */
.final__ribbon { animation: sway 6s ease-in-out infinite; transform-origin: 50% 38%; }
.rsvp-done { animation: fadeUp .8s ease both; }
.rsvp-done__icon { animation: stamp .8s cubic-bezier(.2, 1.4, .4, 1) .1s both; }

/* ---------- Images (apparition douce au chargement) ---------- */
.js img[loading="lazy"] { transition: opacity .6s ease; }

/* ---------- Images clés ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cardOut { to { opacity: 0; transform: scale(1.08) translateY(-10px); } }
@keyframes openingOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes logoIn { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 14px 28px -14px rgba(216, 27, 106, .75), 0 0 0 0 rgba(229, 57, 127, .45); } 50% { box-shadow: 0 14px 28px -14px rgba(216, 27, 106, .75), 0 0 0 12px rgba(229, 57, 127, 0); } }
@keyframes waves { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes glow { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-1.5deg) scale(1.35); } to { opacity: 1; transform: rotate(-1.5deg) scale(1); } }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes tick { 0% { transform: translateY(-6px); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js [data-hero], .js .theme__word { opacity: 1; transform: none; }
  .ribbon__line { stroke-dashoffset: 0 !important; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; transition-delay: 0s !important;
}
html:has(body.reduce-motion) { scroll-behavior: auto; }
body.reduce-motion .reveal, body.reduce-motion [data-hero], body.reduce-motion .theme__word { opacity: 1 !important; transform: none !important; }
body.reduce-motion .ribbon__line { stroke-dashoffset: 0 !important; }
body.reduce-motion .opening__petals { display: none; }