/* Both document snapshots share the same clock and complementary opacity. */
:root{--page-fade-duration:300ms;scrollbar-gutter:stable}
@view-transition{navigation:auto}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:var(--page-fade-duration);
  animation-timing-function:ease-in-out;
  animation-delay:0s;
  animation-fill-mode:both;
  mix-blend-mode:plus-lighter;
}
::view-transition-old(root){animation-name:page-crossfade-out}
::view-transition-new(root){animation-name:page-crossfade-in}
@keyframes page-crossfade-out{from{opacity:1}to{opacity:0}}
@keyframes page-crossfade-in{from{opacity:0}to{opacity:1}}

/* The new document must be readable before its snapshot is captured. */
html.page-crossfade [data-reveal].reveal-ready{
  opacity:1;transform:none;transition:none;
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}