/* A directory is a parent space; a specialty sits to its right. The real
   documents, URLs, back stack and sharp persistent navigation are retained. */
@view-transition{navigation:auto}
html.spatial-native #header{view-transition-name:clinic-header}
::view-transition-group(clinic-header){animation-duration:.56s;animation-timing-function:cubic-bezier(.22,.8,.22,1)}
::view-transition-old(clinic-header){animation:none;opacity:0}
::view-transition-new(clinic-header){animation:none;opacity:1}
::view-transition-image-pair(root){isolation:auto}
html:active-view-transition-type(clinic-forward)::view-transition-old(root),
html:active-view-transition-type(clinic-back)::view-transition-old(root),
html:active-view-transition-type(clinic-forward)::view-transition-new(root),
html:active-view-transition-type(clinic-back)::view-transition-new(root){
  mix-blend-mode:normal;animation-duration:.56s;animation-timing-function:cubic-bezier(.22,.8,.22,1);animation-fill-mode:both;
}
html:active-view-transition-type(clinic-forward)::view-transition-old(root){animation-name:clinic-parent-away}
html:active-view-transition-type(clinic-forward)::view-transition-new(root){animation-name:clinic-detail-in}
html:active-view-transition-type(clinic-back)::view-transition-old(root){animation-name:clinic-detail-away}
html:active-view-transition-type(clinic-back)::view-transition-new(root){animation-name:clinic-parent-in}
@keyframes clinic-parent-away{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes clinic-detail-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes clinic-detail-away{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes clinic-parent-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* Older browsers keep a short directional handoff instead of a blank jump. */
html.spatial-exit main{transform:translateX(-6vw);opacity:0;transition:transform .19s ease-in,opacity .19s ease-in}
html.spatial-exit[data-spatial-direction=back] main{transform:translateX(6vw)}
html.spatial-fallback-entry main{animation:clinic-fallback-in .45s cubic-bezier(.22,.8,.22,1) both}
html.spatial-fallback-entry[data-spatial-direction=back] main{animation-name:clinic-fallback-back}
@keyframes clinic-fallback-in{from{transform:translateX(8vw);opacity:0}to{transform:none;opacity:1}}
@keyframes clinic-fallback-back{from{transform:translateX(-8vw);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  /* JS skips the transition for this preference; keep opt-in stable during parse. */
  html.spatial-exit main,html.spatial-fallback-entry main{animation:none;transition:none;transform:none;opacity:1}
}