/* ==========================================================================
   Animations.

   Registre discret, à la manière de ces produits : de courtes translations,
   des fondus, des transitions de couleur. Rien au-delà de 300 ms.
   Le bloc `prefers-reduced-motion` de base.css neutralise l'ensemble.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Entrée de page ------------------------------------------------------ */

.hero > *,
.prose__header > * { animation: rise 0.4s cubic-bezier(0.22, 0.72, 0.24, 1) backwards; }

.hero__title { animation-delay: 40ms; }
.hero__sub { animation-delay: 90ms; }

.prose__standfirst,
.toc { animation: rise 0.4s cubic-bezier(0.22, 0.72, 0.24, 1) 80ms backwards; }

.panel { animation: rise 0.4s cubic-bezier(0.22, 0.72, 0.24, 1) 120ms backwards; }

/* --- Liste de résultats --------------------------------------------------
   `--i` est posé par le rendu, plafonné pour que les dernières lignes
   n'attendent pas.
   ----------------------------------------------------------------------- */

.summary { animation: rise 0.28s ease-out backwards; }

.entries { animation: fade 0.3s ease-out backwards; }

.entry {
  animation: rise 0.3s cubic-bezier(0.22, 0.72, 0.24, 1) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
  transition: background-color 0.15s;
}

.entry__amount { transition: color 0.2s; }

/* --- Dépliant -----------------------------------------------------------
   Le panneau reste `hidden` une fois replié, donc hors du document et de la
   navigation clavier ; l'animation n'habille que la transition.
   ----------------------------------------------------------------------- */

@keyframes unfold {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes fold {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}

.entry__detail.is-opening { animation: unfold 0.24s cubic-bezier(0.22, 0.72, 0.24, 1); }
.entry__detail.is-closing { animation: fold 0.14s ease-in; }

.entry__detail.is-opening .detail__block {
  animation: rise 0.28s cubic-bezier(0.22, 0.72, 0.24, 1) backwards;
}

.entry__detail.is-opening .detail__block:nth-child(2) { animation-delay: 50ms; }
.entry__detail.is-opening .detail__block:nth-child(3) { animation-delay: 100ms; }

/* --- Messages et plans -------------------------------------------------- */

.notice { animation: rise 0.26s ease-out; }

.mapbox { transition: opacity 0.15s; }
.mapbox.is-loading { opacity: 0.5; }

.mapbox__frame { animation: fade 0.4s ease-out; }

/* --- Barre supérieure --------------------------------------------------- */

.topbar__nav a,
.brand { transition: color 0.15s, background-color 0.15s; }

/* --- Attente ------------------------------------------------------------ */

.loading li { animation: fade 0.3s ease-out backwards; }
.loading li:nth-child(2) { animation-delay: 40ms; }
.loading li:nth-child(3) { animation-delay: 80ms; }
.loading li:nth-child(4) { animation-delay: 120ms; }
.loading li:nth-child(5) { animation-delay: 160ms; }

.skip-link { transition: top 0.15s; }