@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:400ms}
::view-transition-old(root){animation:panOld 400ms cubic-bezier(.65,0,.35,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:panNew 400ms cubic-bezier(.65,0,.35,1) both;mix-blend-mode:normal}
html[data-nav-direction="back"]::view-transition-old(root){animation-name:panOldBack}
html[data-nav-direction="back"]::view-transition-new(root){animation-name:panNewBack}
@keyframes panOld{to{transform:translateX(-100%)}}
@keyframes panNew{from{transform:translateX(100%)}}
@keyframes panOldBack{to{transform:translateX(100%)}}
@keyframes panNewBack{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(root){animation-duration:0s}::view-transition-old(root),::view-transition-new(root){animation:none!important}}