/* Paulaure Burkina — transitions animées entre les pages (View Transitions, navigation multi-pages).
   Feuille statique chargée dans le <head> de chaque page : l'activation doit être lue dès le premier
   affichage de la page d'arrivée, avant que le Tailwind CDN n'ait généré ses styles.
   Navigateurs compatibles : Chrome / Edge 126+, Safari 18.2+. Ailleurs, la navigation reste classique.
   Ne fonctionne qu'en http(s) : pas en ouvrant les fichiers directement depuis le disque (file://). */

@view-transition {
  navigation: auto;
}

/* Page : l'ancienne s'efface vite, la nouvelle apparaît en fondu avec une légère montée. */
::view-transition-old(root) {
  animation: vt-sortie 200ms ease both;
}

::view-transition-new(root) {
  animation: vt-entree 420ms cubic-bezier(.22, .61, .36, 1) both;
}

/* Logo : glisse de la bannière d'accueil vers l'en-tête des pages intérieures (et inversement). */
.vt-logo {
  view-transition-name: logo-paulaure;
}

/* Carte de service → image principale de sa page : la photo s'agrandit à sa nouvelle place.
   Chaque nom ne doit apparaître qu'une fois par page (une carte, ou l'image de la page). */
.vt-carte-01 { view-transition-name: carte-01; }
.vt-carte-02 { view-transition-name: carte-02; }
.vt-carte-03 { view-transition-name: carte-03; }
.vt-carte-04 { view-transition-name: carte-04; }

::view-transition-group(logo-paulaure),
::view-transition-group(carte-01),
::view-transition-group(carte-02),
::view-transition-group(carte-03),
::view-transition-group(carte-04) {
  animation-duration: 450ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

@keyframes vt-sortie {
  to { opacity: 0; }
}

@keyframes vt-entree {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}