/* Shared motion: quick feedback, short transitions, stable page geometry. */
:root{--motion-fast:140ms;--motion-enter:200ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
:where(button,a,input,textarea,select){transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
:is(.project-card,.orlon-card,.source-card,.plan,.news-card){transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
:is(.chat-menu,.profile-menu,.brand-menu,.osel-menu,.tools-menu):not([hidden]){animation:surface-enter var(--motion-enter) var(--motion-ease)}
:is(#panel-projects,#panel-orlons,#panel-gallery):not([hidden]),[data-settings-panel]:not([hidden]),.orlons-view:not([hidden]){animation:content-enter var(--motion-enter) ease-out}
dialog{opacity:0;transition:opacity var(--motion-enter) ease,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
dialog[open]{opacity:1}
dialog::backdrop{opacity:0;transition:opacity var(--motion-enter) ease,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open],dialog[open]::backdrop{opacity:0}}
@keyframes surface-enter{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes content-enter{from{opacity:.5}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 :where(button,a,input,textarea,select),:is(.project-card,.orlon-card,.source-card,.plan,.news-card),dialog,dialog::backdrop{transition:none}
 :is(.chat-menu,.profile-menu,.brand-menu,.osel-menu,.tools-menu):not([hidden]),:is(#panel-projects,#panel-orlons,#panel-gallery):not([hidden]),[data-settings-panel]:not([hidden]),.orlons-view:not([hidden]){animation:none}
}

/* Feedback stays on the element being used; the reading column never moves. */
#composer,#panel-chat.is-empty #composer{transition:border-color 180ms ease,box-shadow 180ms ease}
#composer:focus-within,#panel-chat.is-empty #composer:focus-within{border-color:var(--orlon-muted);box-shadow:0 0 0 1px color-mix(in srgb,var(--orlon-muted) 12%,transparent)}
#composer.has-text #send-button,#composer:not(.has-text) #voice-mode{animation:composer-action-in 180ms var(--motion-ease)}
@keyframes composer-action-in{from{opacity:.25;scale:.92}to{opacity:1;scale:1}}
.reply-action.done svg{animation:feedback-in 240ms var(--motion-ease)}
.reply-action.done svg path{stroke-dasharray:28;stroke-dashoffset:0;animation:check-draw 280ms ease-out}
.copy-code.done{animation:feedback-in 240ms var(--motion-ease)}
@keyframes feedback-in{from{opacity:.4;scale:.88}to{opacity:1;scale:1}}
@keyframes check-draw{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
 #composer,#panel-chat.is-empty #composer{transition:none}
 #composer.has-text #send-button,#composer:not(.has-text) #voice-mode,.reply-action.done svg,.reply-action.done svg path,.copy-code.done,.toast{animation:none}
}

/* Primary actions feel tactile without moving their neighbours. */
:is(.button,.btn,.primary-pill,.pill-button):not(:disabled):active{translate:0 1px}
:is(#account-submit,.orlons-actions button[type=submit])[aria-busy="true"]{position:relative;color:transparent!important;opacity:1;pointer-events:none}
:is(#account-submit,.orlons-actions button[type=submit])[aria-busy="true"]::after{content:"";position:absolute;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:2px solid var(--orlon-bg);border-right-color:transparent;border-radius:50%;animation:action-wait 700ms linear infinite}
@keyframes action-wait{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){:is(.button,.btn,.primary-pill,.pill-button):not(:disabled):active{translate:none}:is(#account-submit,.orlons-actions button[type=submit])[aria-busy="true"]::after{animation:none}}

/* Short, monochrome movement; no layout shifts or idle decoration loops. */
.motion-word{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.motion-word>span{display:inline-block}
#tools-open svg{transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
#tools-open[aria-expanded=true] svg{transform:rotate(45deg)}
.tools-menu:not([hidden])>.tools-item{animation:tool-settle 240ms cubic-bezier(.16,1,.3,1) backwards}
.tools-menu>.tools-item:nth-child(2){animation-delay:20ms}.tools-menu>.tools-item:nth-child(3){animation-delay:40ms}.tools-menu>.tools-item:nth-child(4){animation-delay:60ms}.tools-menu>.tools-item:nth-child(5){animation-delay:80ms}.tools-menu>.tools-item:nth-child(6){animation-delay:100ms}
@keyframes tool-settle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.reply-action.done svg{animation:copy-settle 260ms cubic-bezier(.16,1,.3,1)}
@keyframes copy-settle{from{opacity:.3;transform:scale(.65)}60%{opacity:1;transform:scale(1.12)}to{transform:scale(1)}}
.nav>a:not(.nav-mobile-only){position:relative}
.nav>a:not(.nav-mobile-only)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms cubic-bezier(.16,1,.3,1)}
.nav>a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.entry-arrow:enabled:hover svg{animation:arrow-ready 700ms ease-in-out infinite}
@keyframes arrow-ready{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#tools-open svg,.nav>a::after{transition:none}.tools-menu:not([hidden])>.tools-item,.reply-action.done svg,.entry-arrow:enabled:hover svg{animation:none}}

/* Interaction surfaces share a quick arrival and a quieter exit. */
:is(.chat-menu,.profile-menu,.brand-menu,.tools-menu){opacity:0;scale:.98;transform-origin:center;transition:opacity 140ms ease,scale 180ms var(--motion-ease),display 180ms allow-discrete}
:is(.chat-menu,.profile-menu,.brand-menu,.tools-menu):not([hidden]){opacity:1;scale:1;animation:none}
:is(.chat-menu,.profile-menu,.brand-menu,.tools-menu)[hidden]{pointer-events:none}
@starting-style{:is(.chat-menu,.profile-menu,.brand-menu,.tools-menu):not([hidden]){opacity:0;scale:.98}}
dialog:not(#model-sheet){scale:.985;transition:opacity 180ms ease,scale 220ms var(--motion-ease),display 220ms allow-discrete,overlay 220ms allow-discrete}
dialog:not(#model-sheet)[open]{scale:1;animation:none}
@starting-style{dialog:not(#model-sheet)[open]{opacity:0;scale:.985}}
:is(.reply-action,.round-button,.send-button,.artifact-close,.quote-selection){transition:background-color 140ms ease,color 140ms ease,opacity 140ms ease,scale 140ms var(--motion-ease)}
:is(.reply-action,.round-button,.send-button,.artifact-close,.quote-selection):enabled:active{scale:.94}
.attachment-preview:not([hidden]){animation:attachment-settle 180ms var(--motion-ease)}
@keyframes attachment-settle{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
#scroll-down{transition:opacity 160ms ease,scale 180ms var(--motion-ease),background-color 140ms ease}
#scroll-down:not([hidden]):active{scale:.94}
.tool-switch::after{transition:translate 180ms var(--motion-ease),background-color 140ms ease}
@media(prefers-reduced-motion:reduce){
 :is(.chat-menu,.profile-menu,.brand-menu,.tools-menu),dialog:not(#model-sheet),:is(.reply-action,.round-button,.send-button,.artifact-close,.quote-selection),#scroll-down,.tool-switch::after{transition:none;scale:1}
 :is(.reply-action,.round-button,.send-button,.artifact-close,.quote-selection):enabled:active,#scroll-down:not([hidden]):active{scale:1}
 .attachment-preview:not([hidden]){animation:none}
}