@view-transition{navigation:auto}
.cases-page #main{view-transition-name:case-main}
.cases-page .gh{view-transition-name:case-header}
::view-transition-group(case-header){z-index:10}
::view-transition-old(case-header),::view-transition-new(case-header){animation:none;mix-blend-mode:normal}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(case-main){animation-duration:.56s;animation-timing-function:cubic-bezier(.22,.8,.22,1)}
::view-transition-old(case-main){animation:case-leave .32s ease-in both;mix-blend-mode:normal}
::view-transition-new(case-main){animation:case-arrive .56s cubic-bezier(.22,.8,.22,1) both;mix-blend-mode:normal}
@keyframes case-leave{to{opacity:0;transform:translateX(-28px)}}
@keyframes case-arrive{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
html[data-case-direction="prev"]::view-transition-old(case-main){animation-name:case-leave-back}
html[data-case-direction="prev"]::view-transition-new(case-main){animation-name:case-arrive-back}
@keyframes case-leave-back{to{opacity:0;transform:translateX(28px)}}
@keyframes case-arrive-back{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
html.case-motion-fallback:not(.rm) .cases-page #main{animation:case-arrive .56s cubic-bezier(.22,.8,.22,1) both}
html.case-motion-fallback[data-case-direction="prev"]:not(.rm) .cases-page #main{animation-name:case-arrive-back}
html.rm::view-transition-group(*),html.rm::view-transition-old(*),html.rm::view-transition-new(*){animation-duration:.001s!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001s!important}html.case-motion-fallback .cases-page #main{animation:none}}