/* Mouvement : sobre, court, toujours lisible à l'arrêt.
   Rien n'est caché par défaut : les éléments ne sont masqués que par le JavaScript
   (classe .reveal), donc tout reste visible si le JS ne tourne pas. */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}

/* Séquence d'ouverture de l'accueil : 800 ms au maximum */
.page-home .hero__side    { animation: fade-up 380ms var(--ease) 160ms both; }
.page-home .rail--home .rail__item:nth-child(1) { animation: glide-in 460ms var(--ease) 260ms both; }
.page-home .rail--home .rail__item:nth-child(2) { animation: glide-in 460ms var(--ease) 300ms both; }
.page-home .rail--home .rail__item:nth-child(3) { animation: glide-in 460ms var(--ease) 340ms both; }
.page-home .rail--home .rail__controls { animation: fade-up 300ms var(--ease) 400ms both; }

/* Apparition douce au défilement */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .page-home .hero__name, .page-home .hero__tagline, .page-home .hero__side,
  .page-home .rail--home .rail__item, .page-home .rail--home .rail__controls { animation: none; }
}

/* Titre d'accueil : les mots montent depuis un masque (≤ 800 ms au total) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.w > span { display: inline-block; transform: translateY(110%); animation: word-up 560ms var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes word-up { to { transform: none; } }

/* Transition entre pages (navigateurs compatibles) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
  ::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .w > span { transform: none; animation: none; }
}