@view-transition{navigation:auto;}

::view-transition-group(root){
  animation-duration:340ms;
}

::view-transition-old(root){
  animation:pageturn-out 260ms cubic-bezier(.5,0,.75,.3) both;
  transform-origin:left center;
}

::view-transition-new(root){
  animation:pageturn-in 340ms cubic-bezier(.16,.84,.32,1) both;
  transform-origin:right center;
}

@keyframes pageturn-out{
  0%{opacity:1;clip-path:inset(0 0 0 0);}
  100%{opacity:1;clip-path:inset(0 0 0 100%);}
}

@keyframes pageturn-in{
  0%{opacity:1;clip-path:inset(0 100% 0 0);}
  100%{opacity:1;clip-path:inset(0 0 0 0);}
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important;}
}

@media print{
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important;}
}

.is-capture::view-transition-old(root),
.is-capture::view-transition-new(root),
.no-pageturn::view-transition-old(root),
.no-pageturn::view-transition-new(root){animation:none !important;}