/* One motion vocabulary; stateful layout changes are orchestrated in ui-motion.js. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-medium:320ms;--motion-slow:480ms}
.mobile-nav:not([hidden]){animation:none}
.mobile-nav :is(a,button),.mobile-nav :is(a,button):before,.mobile-nav a:after{transition-duration:var(--motion-medium);transition-timing-function:var(--motion-ease)}
.site-header,.mind-panel,.project-meta strong,.route-link,.contact-button,.talk-link,.shift-button,.contact-bottom>div>a{transition-timing-function:var(--motion-ease)}
.mind-invite i,.topic-indicator,.scene-indicator,.detail-indicator{transition-duration:var(--motion-medium);transition-timing-function:var(--motion-ease)}
.motion-ready .reveal-step{transform:translate3d(0,14px,0);transition:opacity var(--motion-slow) var(--motion-ease),transform var(--motion-slow) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal-step.is-visible{transform:translate3d(0,0,0)}
.experiment-stage,.tiny-page{transition:background var(--motion-medium) var(--motion-ease),color var(--motion-medium) var(--motion-ease)}
.message-before,.message-after,.workflow-before,.workflow-after{transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-medium) var(--motion-ease)}
/* Keep both website variants in the same grid cell so they crossfade both ways. */
.tiny-content h3{display:grid}
.tiny-content h3 .web-before,.tiny-content h3 .web-after{display:block;grid-area:1/1;transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-medium) var(--motion-ease)}
.tiny-content h3 .web-before{opacity:1;transform:translate3d(0,0,0)}
.tiny-content h3 .web-after{opacity:0;transform:translate3d(0,7px,0);pointer-events:none}
[data-shifted="true"] .tiny-content h3 .web-before{opacity:0;transform:translate3d(0,-7px,0);pointer-events:none}
[data-shifted="true"] .tiny-content h3 .web-after{opacity:1;transform:translate3d(0,0,0)}
.tiny-browser,.sound-sculpture,.structure{transition-duration:var(--motion-slow);transition-timing-function:var(--motion-ease)}
dialog::backdrop{background:#080d22a6;transition:background var(--motion-fast) ease-out}
dialog[data-motion-state="leaving"]::backdrop{background:#080d2200}
/* CSS view transitions progressively enhance same-origin navigation. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vh-route-out 160ms ease-out both}
::view-transition-new(root){animation:vh-route-in 260ms var(--motion-ease) both}
@keyframes vh-route-out{to{opacity:0}}
@keyframes vh-route-in{from{opacity:0}to{opacity:1}}
@media(min-width:1101px){.mobile-nav{display:none}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .reveal-step{opacity:1!important;transform:none!important;transition:none!important}
 .tiny-content h3 .web-before,.tiny-content h3 .web-after,.message-before,.message-after,.workflow-before,.workflow-after,.tiny-page,.experiment-stage,dialog::backdrop{transition:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}
dialog::backdrop{animation:vh-route-in 220ms ease-out both}
@media(prefers-reduced-motion:reduce){dialog::backdrop{animation:none}}