/* UI transitions use the shared design tokens; streaming/reel transforms remain their owners'. */
:where(.provider-nav,.mobile-nav,.side-nav,.sidebar nav,.admin-tabbar,.op-nav,.op-tabbar) :is(a,button),
:where(.tabs,.filter-pills,.segment,.ss-tabs) button,
:where(.button,.icon-button,.op-button,.op-icon-button){
  transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
@keyframes uiDialogEnter{from{opacity:0;translate:0 var(--s-2)}to{opacity:1;translate:0 0}}
@keyframes uiDetailsEnter{from{opacity:0;translate:0 var(--s-1)}to{opacity:1;translate:0 0}}
/* Admin drawers already have the design-system slide/sheet animation. Do not stack it. */
dialog[open]:not([data-arena-dialog]):not(.editor-dialog):not(.closing):not(.panel-dialog-closing):not(:has(video,audio,iframe,canvas)){
  animation:uiDialogEnter var(--dur-base) var(--ease-out);
}
details[open]>:not(summary,video,audio,iframe,canvas,[data-ui-motion="off"]):not(:has(video,audio,iframe,canvas)){
  animation:uiDetailsEnter var(--dur-fast) var(--ease-out);
}
/* No scroll-behavior, layout transitions or permanent will-change layers are added here. */
.motion-paused dialog[open],.motion-paused details[open]>:not(summary){animation:none!important}
.motion-paused :is(.provider-nav,.mobile-nav,.side-nav,.sidebar nav,.admin-tabbar,.op-nav,.op-tabbar,.tabs,.filter-pills,.segment,.ss-tabs) :is(a,button){transition:none!important}
@media(prefers-reduced-motion:reduce){
  dialog[open],details[open]>:not(summary){animation:none!important}
  :is(.provider-nav,.mobile-nav,.side-nav,.sidebar nav,.admin-tabbar,.op-nav,.op-tabbar,.tabs,.filter-pills,.segment,.ss-tabs) :is(a,button){transition:none!important}
}