/* Short, consistent, interruptible motion. Only unique page landmarks are snapshotted. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-page:220ms;--motion-dialog:260ms;--motion-in-x:10px;--motion-out-x:-4px}
@view-transition{navigation:auto}
html[data-motion-direction=back]{--motion-in-x:-10px;--motion-out-x:4px}
main{view-transition-name:page-content}
.app-header{view-transition-name:site-header}
.module-tabs{view-transition-name:site-modules}
::view-transition-group(*){animation-duration:var(--motion-page);animation-timing-function:var(--motion-ease)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:motion-fade-in 220ms ease-out both}
::view-transition-group(site-header),::view-transition-group(site-modules),::view-transition-group(page-content){animation:none}
::view-transition-old(site-header),::view-transition-old(site-modules){animation:motion-fade-out 110ms ease-out both}
::view-transition-new(site-header),::view-transition-new(site-modules){animation:motion-fade-in 180ms ease-out both}
::view-transition-old(page-content){animation:none}
::view-transition-new(page-content){animation:motion-page-in var(--motion-page) var(--motion-ease) both}
::view-transition-image-pair(page-content){isolation:isolate}
::view-transition-old(page-content),::view-transition-new(page-content){mix-blend-mode:normal;width:100%;height:auto;object-fit:contain;object-position:top left}
@keyframes motion-page-out{to{opacity:0;transform:translate3d(var(--motion-out-x),0,0)}}
@keyframes motion-page-in{from{opacity:0;transform:translate3d(var(--motion-in-x),0,0)}to{opacity:1;transform:none}}
@keyframes motion-fade-in{from{opacity:0}to{opacity:1}}
@keyframes motion-fade-out{from{opacity:1}to{opacity:0}}
@keyframes motion-dialog-in{from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}to{opacity:1;transform:none}}
/* Native dialog close, Escape, cleanup and focus restoration remain synchronous. */
dialog[open]{animation:motion-dialog-in var(--motion-dialog) var(--motion-ease) both;transform-origin:50% 45%}
dialog[open]::backdrop{animation:motion-fade-in 220ms ease-out both}
/* A quiet tactile response for navigation cards; never affect draggable 3D labels. */
.atlas-topic-card,.cs-topic,.subject-card{transition:transform 260ms var(--motion-ease),box-shadow 260ms var(--motion-ease),border-color 180ms ease}
.atlas-topic-card:active,.cs-topic:active{transform:scale(.985)}
.learn-button,.top-back,.module-tabs a,.subject-tabs a{transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 200ms var(--motion-ease)}
.learn-button:not(:disabled):active,.top-back:active{transform:scale(.975)}
/* A user preference applies to both CSS and JS animations, including native snapshots. */
html[data-reduce-motion=true] dialog[open],html[data-reduce-motion=true] dialog[open]::backdrop{animation:none!important}
html[data-reduce-motion=true]::view-transition-group(*),html[data-reduce-motion=true]::view-transition-old(*),html[data-reduce-motion=true]::view-transition-new(*){animation:none!important}
html[data-reduce-motion=true]::view-transition-old(*){display:none}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 ::view-transition-old(*){display:none}
 dialog[open],dialog[open]::backdrop{animation:none!important}
 .atlas-topic-card,.cs-topic,.subject-card,.learn-button,.top-back,.module-tabs a,.subject-tabs a{transition:none!important}
 .atlas-topic-card:active,.cs-topic:active,.learn-button:active,.top-back:active{transform:none!important}
}

html[data-reduce-motion=true] .atlas-topic-card:active,html[data-reduce-motion=true] .cs-topic:active,html[data-reduce-motion=true] .learn-button:active,html[data-reduce-motion=true] .top-back:active{transform:none!important}

html[data-reduce-motion=true] .atlas-topic-card,html[data-reduce-motion=true] .cs-topic,html[data-reduce-motion=true] .subject-card,html[data-reduce-motion=true] .learn-button,html[data-reduce-motion=true] .top-back,html[data-reduce-motion=true] .module-tabs a,html[data-reduce-motion=true] .subject-tabs a{transition:none!important}