/* A short fade/slide preserves continuity between the portfolio and its projects. */
@view-transition{navigation:auto}
.portfolio-page>header,.project-nav{view-transition-name:portfolio-nav}
::view-transition-old(root){animation:page-out 200ms ease both}
::view-transition-new(root){animation:page-in 250ms ease both}
::view-transition-group(portfolio-nav){animation-duration:250ms}
::view-transition-old(portfolio-nav),::view-transition-new(portfolio-nav){animation:none}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}