/* Shared by every page: the move between pages.
   Browsers without cross-document view transitions simply load the page.
   Pages slide in from the side. With "reduce motion" on (Windows: Animation
   effects off) the slide is short and quick: a nudge with a fade, still showing
   the direction, without sweeping the whole screen across. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-nudge-out-left 260ms ease-in both; }
  ::view-transition-new(root) { animation: vt-nudge-in-right 320ms ease-out both; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-nudge-out-right; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-nudge-in-left; }
  ::view-transition-group(stripe) { animation-duration: 0s; }
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: 560ms; }
  ::view-transition-old(root) { animation: vt-out-left 480ms cubic-bezier(.55, 0, .45, 1) both; }
  ::view-transition-new(root) { animation: vt-in-right 560ms cubic-bezier(.22, .9, .3, 1) both; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }
  /* The four-colour stripe stays put while the page moves. */
  ::view-transition-group(stripe) { animation-duration: 0s; }
}
@keyframes vt-out-left  { to   { transform: translateX(-28%); opacity: 0; } }
@keyframes vt-out-right { to   { transform: translateX(28%);  opacity: 0; } }
@keyframes vt-in-right  { from { transform: translateX(100%); box-shadow: -30px 0 60px rgba(0,0,0,.25); } }
@keyframes vt-in-left   { from { transform: translateX(-100%); box-shadow: 30px 0 60px rgba(0,0,0,.25); } }
@keyframes vt-nudge-out-left  { to   { transform: translateX(-60px); opacity: 0; } }
@keyframes vt-nudge-out-right { to   { transform: translateX(60px);  opacity: 0; } }
@keyframes vt-nudge-in-right  { from { transform: translateX(80px);  opacity: 0; } }
@keyframes vt-nudge-in-left   { from { transform: translateX(-80px); opacity: 0; } }