/* Real page navigation, with the old page held underneath until the new one is visible. */
@view-transition{navigation:auto}
html::view-transition{pointer-events:none}
html::view-transition-group(*){animation-duration:420ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html::view-transition-old(root){animation:none;opacity:1;mix-blend-mode:normal}
html::view-transition-new(root){animation:l400-page-reveal 320ms ease-out both;mix-blend-mode:normal}
.l400-site-header{view-transition-name:l400-header}
html::view-transition-old(l400-header){animation:none;opacity:1;mix-blend-mode:normal}
html::view-transition-new(l400-header){animation:none;opacity:1;mix-blend-mode:normal}
html::view-transition-group(l400-header){z-index:10}
html::view-transition-group(l400-guide-photo){overflow:clip;border-radius:14px;z-index:2}
html::view-transition-old(l400-guide-photo){animation:none;opacity:1;mix-blend-mode:normal}
html::view-transition-new(l400-guide-photo){animation:l400-page-reveal 240ms ease-out both;mix-blend-mode:normal}
@media(min-width:761px){.g-reader-layout>.g-sidebar,.g-workshop-nav .g-sidebar{view-transition-name:l400-guide-sidebar}}
html::view-transition-old(l400-guide-sidebar){animation:none;opacity:1;mix-blend-mode:normal}
html::view-transition-new(l400-guide-sidebar){animation:l400-page-reveal 180ms ease both;mix-blend-mode:normal}
@keyframes l400-page-reveal{from{opacity:0}to{opacity:1}}
/* Entrance opacity hid guide content in the destination snapshot. Keep hover and drawer motion. */
.g-library .g-card,.g-reader-layout .g-reader{animation:none}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html::view-transition-group(*),html::view-transition-old(*),html::view-transition-new(*){animation:none!important}
}