/* Catalogue d'animations : voir docs/DESIGN.md.
   On n'anime que transform, opacity, clip-path et stroke-dashoffset. */

@keyframes og-rideau { 0%, 64% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes og-trace { to { stroke-dashoffset: 0; } }
@keyframes og-etire { from { font-stretch: 50%; letter-spacing: .08em; opacity: 0; } to { font-stretch: 125%; letter-spacing: -.02em; opacity: 1; } }
@keyframes og-monte { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes og-apparait { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes og-rebond { 0% { transform: scale(0); } 65% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes og-onde { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes og-voyageur { from { stroke-dashoffset: 11.7; } to { stroke-dashoffset: -100; } }
@keyframes og-defile { to { transform: translateX(-50%); } }
@keyframes og-souligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes og-chiffres { 0%, 18% { transform: translateY(0); } 24%, 43% { transform: translateY(-1.1em); } 49%, 68% { transform: translateY(-2.2em); } 74%, 93% { transform: translateY(-3.3em); } 100% { transform: translateY(-4.4em); } }
@keyframes og-charge { 0% { transform: scaleX(0); transform-origin: left; } 60% { transform: scaleX(.7); transform-origin: left; } 100% { transform: scaleX(.92); transform-origin: left; } }
@keyframes og-charge-fin { 0% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

@keyframes og-squelette { to { transform: translateX(100%); } }
@keyframes og-pulse { from { opacity: 1; transform: scale(1); } to { opacity: .45; transform: scale(.86); } }

/* Le rideau : une fois par session (classe .rideau posée avant le premier affichage) */
.rideau-panneau { display: none; }
.rideau .rideau-panneau {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--encre);
  pointer-events: none;
  animation: og-rideau 1.9s cubic-bezier(.76, 0, .24, 1) forwards;
}
.rideau-in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rideau-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-trace .8s var(--ease-trace) .15s forwards; }
.rideau-mot {
  font-family: var(--titre);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--blanc);
  animation: og-etire .9s cubic-bezier(.2, .8, .2, 1) .35s both;
}
.rideau { --retard: 1.4s; }

/* L'étirement et les entrées de l'accueil */
.monte { animation: og-monte 1s var(--ease-out) both; animation-delay: calc(var(--retard) + .15s); }
.masque:nth-child(2) .monte { animation-delay: calc(var(--retard) + .25s); }
.masque:nth-child(3) .monte { animation-delay: calc(var(--retard) + .35s); }
.souligne { animation: og-souligne .9s var(--ease-trace) both; animation-delay: calc(var(--retard) + .85s); }
.apparait { animation: og-apparait .9s var(--ease-out) both; animation-delay: calc(var(--retard) + .35s); }
.hero-chapo.apparait { animation-delay: calc(var(--retard) + .6s); }
.hero-recherche.apparait { animation-delay: calc(var(--retard) + .5s); }

/* Le tracé : le réseau se dessine, ligne après ligne */
.net-lignes path, .net-trajet {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: og-trace 1.8s var(--ease-trace) both;
  animation-delay: calc(var(--retard) * .6 + .1s);
}
.net-lignes path:nth-child(2) { animation-delay: calc(var(--retard) * .6 + .25s); }
.net-lignes path:nth-child(3) { animation-delay: calc(var(--retard) * .6 + .35s); }
.net-lignes path:nth-child(4) { animation-delay: calc(var(--retard) * .6 + .45s); }
.net-lignes path:nth-child(5) { animation-delay: calc(var(--retard) * .6 + .5s); }
.net-lignes path:nth-child(6) { animation-delay: calc(var(--retard) * .6 + .6s); }
.net-lignes path:nth-child(7) { animation-delay: calc(var(--retard) * .6 + .7s); }
.net-lignes path:nth-child(8) { animation-delay: calc(var(--retard) * .6 + .75s); }
.net-lignes path:nth-child(9) { animation-delay: calc(var(--retard) * .6 + .8s); }
.net-lignes path:nth-child(10) { animation-delay: calc(var(--retard) * .6 + .9s); }
.net-lignes path:nth-child(11) { animation-delay: calc(var(--retard) * .6 + .95s); }
.net-trajet { animation-duration: 1.4s; animation-delay: calc(var(--retard) * .6 + 1.3s); }

/* La correspondance : les villes apparaissent en rebond, une onde entoure la destination */
.net-villes circle, .net-arrivee {
  transform-box: fill-box;
  transform-origin: center;
  animation: og-rebond .5s var(--ease-pop) both;
  animation-delay: calc(var(--retard) * .6 + .5s);
}
.net-villes circle:first-child { animation-delay: calc(var(--retard) * .6 + .1s); }
.net-villes circle:nth-child(3n) { animation-delay: calc(var(--retard) * .6 + .65s); }
.net-villes circle:nth-child(4n) { animation-delay: calc(var(--retard) * .6 + .8s); }
.net-villes circle:nth-child(5n) { animation-delay: calc(var(--retard) * .6 + .95s); }
.net-arrivee { animation-delay: calc(var(--retard) * .6 + 2.5s); }
.net-onde {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: og-onde 2.4s ease-out infinite;
  animation-delay: calc(var(--retard) * .6 + 2.8s);
}

/* Le voyageur : un segment blanc parcourt le trajet surligné */
.net-voyageur { animation: og-voyageur 3.4s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(var(--retard) * .6 + 2.4s); }

.defile-piste { animation: og-defile 38s linear infinite; }
.chiffres > span { animation: og-chiffres 7s var(--ease-swap) 1.4s infinite; }
.mini path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-trace 1.6s var(--ease-trace) infinite alternate; }
.mini path + path { animation-delay: .4s; }

/* Chargement d'une page par le routeur : le trait jaune sous l'en-tête se redessine */
.charge .entete-trait { animation: og-charge 8s var(--ease-out) forwards; }
.charge-fin .entete-trait { animation: og-charge-fin .45s var(--ease-trace) forwards; }

/* La transition de page (View Transitions) */
@keyframes og-page-sort { to { opacity: 0; transform: translateY(-14px); } }
@keyframes og-page-entre { from { opacity: 0; transform: translateY(22px); } }
main { view-transition-name: page; }
::view-transition-old(page) { animation: og-page-sort .2s var(--ease-trace) both; }
::view-transition-new(page) { animation: og-page-entre .45s var(--ease-out) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

/* Mouvement réduit : tout est visible dans son état final, sans boucle */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .net-voyageur, .net-onde { animation: none; visibility: hidden; }
  .defile-piste, .chiffres > span { animation: none; }
  .mini path { animation: none; stroke-dashoffset: 0; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}