@view-transition{navigation:auto}
#main{view-transition-name:page-content}
::view-transition-group(page-content){animation-duration:480ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(root){animation:none;opacity:0}
::view-transition-new(root){animation:none}
::view-transition-old(page-content){animation:page-away 280ms cubic-bezier(.4,0,1,1) both;mix-blend-mode:normal}
::view-transition-new(page-content){animation:page-arrive 480ms cubic-bezier(.2,0,0,1) both;mix-blend-mode:normal}
@keyframes page-away{from{opacity:1;transform:translateX(0);filter:blur(0)}to{opacity:0;transform:translateX(-20px);filter:blur(3px)}}
@keyframes page-arrive{from{opacity:0;transform:translateX(20px);filter:blur(3px)}to{opacity:1;transform:translateX(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}