@view-transition{navigation:auto}
main [id]{scroll-margin-top:110px}
::view-transition-old(root){animation:route-out .38s cubic-bezier(.45,.05,.55,1) both;transform-origin:80% 50%}
::view-transition-new(root){animation:route-in .62s .15s cubic-bezier(.16,.82,.2,1) both;transform-origin:20% 50%}
::view-transition-old(site-guide-bot){animation:bot-route-out .32s ease-in both}
::view-transition-new(site-guide-bot){animation:bot-route-in .7s cubic-bezier(.2,.8,.2,1) both}
.route-focus{animation:route-focus 1.15s ease-out both}
@keyframes route-out{to{opacity:0;transform:perspective(1400px) translateX(-4%) rotateY(-9deg) scale(.94);filter:blur(4px)}}
@keyframes route-in{from{opacity:0;transform:perspective(1400px) translateX(5%) rotateY(10deg) scale(.95);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes bot-route-out{to{opacity:.5;transform:translateY(-25px) rotate(-12deg) scale(.82)}}
@keyframes bot-route-in{from{opacity:.5;transform:translateY(24px) rotate(10deg) scale(.82)}to{opacity:1;transform:none}}
@keyframes route-focus{0%{outline:1px solid transparent;outline-offset:28px}35%{outline:1px solid var(--accent);outline-offset:7px}100%{outline:1px solid transparent;outline-offset:22px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root),::view-transition-old(site-guide-bot),::view-transition-new(site-guide-bot){animation:none}.route-focus{animation:none}}