/* ────────────────────────────────────────────────────────────────────
   Transitions de pages — View Transitions API NATIVE (cross-document), zéro lib.
   Fondu + translation verticale de 8px, 180ms, ease-out, entre toutes les pages du
   produit (navigations same-origin). N'affecte QUE les navigations : les mises à jour
   intra-page en JS (modales, sélections, propagation) ne déclenchent aucune
   transition (on n'appelle jamais document.startViewTransition). Progressive
   enhancement : les navigateurs sans support naviguent normalement, sans transition.
   ──────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: nami-page-out; }
::view-transition-new(root) { animation-name: nami-page-in; }

@keyframes nami-page-out {
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes nami-page-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* « vol de la bulle » — élément partagé scène ↔ bandeau du module (view-transition-name
   module-identite). Le groupe (position + taille) vole plus longtemps que le fondu de
   page (≈500ms, ease-out doux) pour que la grande bulle rejoigne la petite identité sans
   saut ; les images old/new se fondent sur la même durée. Le fondu global reste à 180ms. */
::view-transition-group(module-identite) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(module-identite),
::view-transition-new(module-identite) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* prefers-reduced-motion : aucune transition (swap instantané) — pas de vol. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(module-identite),
  ::view-transition-old(module-identite),
  ::view-transition-new(module-identite) { animation: none !important; }
}