@view-transition{navigation:auto}::view-transition-group(*){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-old(root){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease-out}::view-transition-old(root){animation-name:slide-out}::view-transition-new(root){mix-blend-mode:normal;animation-name:slide-in}.back-transition::view-transition-new(root){animation-name:slide-out-reverse}.back-transition::view-transition-old(root){mix-blend-mode:normal;z-index:1;animation-name:slide-in-reverse}@keyframes slide-out{0%{transform:translate(0)}to{transform:translate(-20%)}}@keyframes slide-out-reverse{0%{transform:translate(-20%)}to{transform:translate(0)}}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slide-in-reverse{0%{transform:translate(0)}to{transform:translate(100%)}}::view-transition-old(fade){animation-name:fade;animation-duration:.2s}::view-transition-new(fade){animation-name:fade;animation-duration:.2s}@keyframes fade{0%{opacity:0}to{opacity:1}}::view-transition-old(image){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-new(image){animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-image-pair(root){isolation:isolate}