/* squelettes/atelier-chaleureux/motion.css — UN moment signature (premier écran, au chargement) + réponses au clic.
   CSS natif, aucune bibliothèque. Tout est visible sans JavaScript et sans animation si l'utilisateur le demande. */

/* Moment signature : le titre se dépose mot à mot, la photo glisse depuis la droite, l'ardoise se pose avec un léger rebond. */
@media (prefers-reduced-motion: no-preference) {
  .hero-texte h1 .mot { display: inline-block; animation: deposer var(--duree-entree) var(--ease-sortie) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
  .hero-texte .chapo, .hero-actions { animation: deposer var(--duree-entree) var(--ease-sortie) both; }
  .hero-texte .chapo { animation-delay: 520ms; }
  .hero-actions { animation-delay: 640ms; }
  .hero-visuel img { animation: glisser 900ms var(--ease-sortie) both; animation-delay: 120ms; }
  .ardoise { animation: poser 700ms var(--ease-rebond) both; animation-delay: 760ms; }
  .hero .etiquette { animation: poser 500ms var(--ease-rebond) both; animation-delay: 1000ms; }

  @keyframes deposer { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
  @keyframes glisser { from { opacity: 0; transform: translateX(6%) rotate(1.5deg); clip-path: inset(0 0 0 30% round var(--rayon-grand)); } to { opacity: 1; transform: none; clip-path: inset(0 round var(--rayon-grand)); } }
  @keyframes poser { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

  /* Un seul effet au défilement, discret et sans opacité : la photo de la maison respire légèrement (parallaxe courte). */
  @supports (animation-timeline: view()) {
    .maison img { animation: respirer linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes respirer { from { object-position: var(--cadrage-haut, 50% 20%); } to { object-position: var(--cadrage-bas, 50% 45%); } }
  }
}

/* Réponses au clic (< 300 ms) : transitions déclarées dans base.css (boutons, tickets, menu, FAQ) ; ici les détails. */
.bouton:active svg { transform: translateX(3px); }
.bouton svg { transition: transform var(--duree-clic) var(--ease-sortie); }
.ticket:active { transform: scale(.96); }
.faq-liste details div { animation: ouvrir 220ms var(--ease-sortie); }
@keyframes ouvrir { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}