/* One native transition for all public pages. Unsupported browsers navigate normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition { pointer-events: none; }
::view-transition-group(root) { animation-duration: 280ms; }
::view-transition-old(root) {
  animation: popoto-page-leave 220ms ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: popoto-page-arrive 280ms cubic-bezier(.22,1,.36,1) both;
  mix-blend-mode: normal;
}

@keyframes popoto-page-leave {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes popoto-page-arrive {
  from { opacity: 0; transform: translateY(8px); }
}

html.reduce-motion::view-transition-group(*),
html.reduce-motion::view-transition-old(*),
html.reduce-motion::view-transition-new(*) { animation: none; }

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