/* Page motion (pairs with page-transitions.js): a case study opened from Work rises from the bottom. */
@view-transition{navigation:auto}
/* the fixed header stays put above the moving page */
header{view-transition-name:site-header}
::view-transition-group(site-header){animation:none;z-index:2}

html[data-case-motion]::view-transition-old(root),html[data-case-motion]::view-transition-new(root){mix-blend-mode:normal}
html[data-case-motion=case-open]::view-transition-old(root){animation:case-recede .85s cubic-bezier(.2,.8,.2,1) both}
html[data-case-motion=case-open]::view-transition-new(root){animation:case-rise .85s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 -18px 48px #1f363314}
@keyframes case-rise{from{transform:translateY(100%)}}
@keyframes case-recede{to{transform:scale(.96);opacity:.55}}

@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}