/* Nobuo Transition.
   Deux mecanismes coexistent : l'API View Transitions quand elle est disponible,
   et un repli anime sur le corps de page partout ailleurs. */

:root{
  --nb-tr-sortie:240ms;
  --nb-tr-entree:320ms;
  --nb-tr-amplitude:6vh;
}

@keyframes nb-tr-monte{
  from{ transform:translateY(0); opacity:1; }
  to{ transform:translateY(calc(var(--nb-tr-amplitude) * -1)); opacity:0; }
}

@keyframes nb-tr-arrive{
  from{ transform:translateY(var(--nb-tr-amplitude)); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* --- Navigation entre documents, prise en charge native --- */
@view-transition{ navigation:auto; }

::view-transition-old(root){
  animation:nb-tr-monte var(--nb-tr-sortie) cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:nb-tr-arrive var(--nb-tr-entree) cubic-bezier(0,0,.2,1) both;
}

/* --- Repli pour les navigateurs sans View Transitions ---
   L'animation porte sur body et non sur html : animer html casserait
   le defilement. Le script retire l'attribut des la fin de l'animation,
   car un transform persistant briserait les elements en position sticky. */
html[data-nobuo-transition="entree"] body{
  animation:nb-tr-arrive var(--nb-tr-entree) cubic-bezier(0,0,.2,1) both;
}

html[data-nobuo-transition="sortie"] body{
  animation:nb-tr-monte var(--nb-tr-sortie) cubic-bezier(.4,0,1,1) both;
}

/* Pendant la sortie, on neutralise les interactions pour eviter un double clic. */
html[data-nobuo-transition="sortie"] body{
  pointer-events:none;
}

/* --- Respect du reglage systeme de reduction des animations --- */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }

  html[data-nobuo-transition] body{ animation:none!important; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none!important; }
}