/* Mouvements : transitions entre les pages et au survol. Sobres et courts ; aucun pour qui
   demande moins d'animations (réglage du système). Tout mouvement vit dans cette feuille. */

:root {
  --duree: 160ms;
  --duree-page: 220ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
}

/* D'une page à l'autre, l'en-tête reste en place et le contenu se fond (navigateurs qui
   savent le faire ; les autres changent de page comme avant). */
@view-transition { navigation: auto; }
header { view-transition-name: entete; }
main { view-transition-name: contenu; }

::view-transition-old(contenu) { animation: var(--duree-page) var(--courbe) both disparition; }
::view-transition-new(contenu) { animation: var(--duree-page) var(--courbe) both apparition; }

@keyframes disparition { to { opacity: 0; transform: translateY(-4px); } }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } }

/* Survol et onglet courant */
a, button, select, input, tbody tr {
  transition:
    color var(--duree) var(--courbe),
    background-color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe),
    box-shadow var(--duree) var(--courbe),
    opacity var(--duree) var(--courbe);
}
header nav a::after, header .accueil::after { transition: transform var(--duree-page) var(--courbe); }
header nav a:hover::after { transform: scaleX(0.4); }
header nav a[aria-current="page"]:hover::after { transform: scaleX(1); }

/* Accueil : une carte s'agrandit jusqu'à son détail, et s'y referme (script cartes.js, View
   Transitions). Pendant ce mouvement, le reste de la page ne bouge pas. */
.carte-lien { transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.carte-lien:hover { transform: translateY(-2px); }
:root.carte-en-mouvement::view-transition-old(contenu),
:root.carte-en-mouvement::view-transition-new(contenu),
:root.carte-en-mouvement::view-transition-old(root),
:root.carte-en-mouvement::view-transition-new(root) { animation: none; }
/* Le cadre passe de la carte au panneau, et inversement ; chaque image garde ses proportions,
   centrée dans le cadre (pas d'étirement, pas de glissement depuis un coin), et l'une s'efface
   devant l'autre. */
::view-transition-group(carte-ouverte) { animation-duration: 360ms; animation-timing-function: var(--courbe); }
::view-transition-old(carte-ouverte),
::view-transition-new(carte-ouverte) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  animation-duration: 360ms;
  animation-timing-function: var(--courbe);
}
/* Le voile s'assombrit et s'éclaircit en même temps que la carte s'ouvre et se referme. */
.voile { transition: opacity 360ms var(--courbe); }
/* Sans View Transitions : le détail apparaît en fondu (avec, la carte s'agrandit déjà). */
@supports not (view-transition-name: none) {
  .detail[open] { animation: var(--duree-page) var(--courbe) both apparition; }
}

/* Courbes d'activité : elles se dévoilent de gauche à droite, le point du jour en dernier ; à
   l'accueil, une carte après l'autre ; dans un détail, pendant qu'il s'agrandit (un panneau
   fermé n'est pas rendu : son animation repart à chaque ouverture). La marge négative laisse
   déborder le point et son halo. */
@keyframes devoiler {
  from { clip-path: inset(-12px 100% -12px -12px); }
  to { clip-path: inset(-12px -12px -12px -12px); }
}
.etincelle svg { animation: 900ms var(--courbe) 120ms both devoiler; }
.tuile:nth-child(2) .etincelle svg { animation-delay: 160ms; }
.tuile:nth-child(3) .etincelle svg { animation-delay: 200ms; }
.tuile:nth-child(4) .etincelle svg { animation-delay: 240ms; }
.tuile:nth-child(5) .etincelle svg { animation-delay: 280ms; }
.tuile:nth-child(6) .etincelle svg { animation-delay: 320ms; }
.tuile:nth-child(7) .etincelle svg { animation-delay: 360ms; }
.tuile:nth-child(8) .etincelle svg { animation-delay: 400ms; }
.tuile:nth-child(n + 9) .etincelle svg { animation-delay: 440ms; }
.tuile .detail .etincelle svg { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}