/* Page fades animate the body itself. No overlay layer is used, because extra
   fixed layers interfere with how iOS Safari paints behind its toolbars. */
html.page-entering body {
  animation: page-fade-in .5s ease-out both;
}

html.page-leaving body {
  pointer-events: none;
  animation: page-fade-out .4s ease-in both;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.page-entering body,
  html.page-leaving body { animation: none; }
}