/* Transitions entre les pages, façon iPhone : la page suivante glisse depuis la droite et la
   précédente recule légèrement (« forward ») ; au retour, l'inverse (« back »). Le sens est
   choisi par /shared/transitions.js. Navigateur trop ancien : changement de page normal. */

@view-transition { navigation: auto; }

html { background: var(--bg); }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
  animation-fill-mode: both;
}

html[data-vt="forward"]::view-transition-old(root) { animation-name: vt-recule; }
html[data-vt="forward"]::view-transition-new(root) { animation-name: vt-arrive-droite; z-index: 2; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
html[data-vt="back"]::view-transition-old(root) { animation-name: vt-part-droite; z-index: 2; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
html[data-vt="back"]::view-transition-new(root) { animation-name: vt-revient; }
html[data-vt="fade"]::view-transition-old(root),
html[data-vt="fade"]::view-transition-new(root) { animation-duration: .2s; }

@keyframes vt-arrive-droite { from { transform: translateX(100%); } to { transform: none; } }
@keyframes vt-recule { from { transform: none; filter: none; } to { transform: translateX(-28%); filter: brightness(.9); } }
@keyframes vt-part-droite { from { transform: none; } to { transform: translateX(100%); } }
@keyframes vt-revient { from { transform: translateX(-28%); filter: brightness(.9); } to { transform: none; filter: none; } }

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