/* Keep artwork outside the viewport from creating a sideways scroll area. */
html { overflow-x: hidden; }

/* The page stays in place while one view dissolves into the next. */
@view-transition {
  navigation: auto;
}

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

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

::view-transition-old(root) {
  animation: page-fade-out 560ms cubic-bezier(.45, 0, .55, 1) both;
}

::view-transition-new(root) {
  animation: page-fade-in 560ms cubic-bezier(.45, 0, .55, 1) both;
}

/* A calm two-part dissolve when pages are opened directly from the ZIP or
   when the browser has no cross-document view transitions. */
@media (prefers-reduced-motion: no-preference) {
  .page-motion-fallback body {
    animation: page-fade-in 450ms ease-out backwards;
  }

  .page-motion-fallback body.page-motion-leaving {
    animation: none;
    opacity: 0;
    transition: opacity 220ms ease-in;
  }
}

/* The audio page's earlier upward entrance would otherwise move within the
   page dissolve. */
.listen-page .player-shell { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms; }
}