/* Panel-only motion. No theme, spacing, focus, visibility or stacking overrides. */
body.hub[data-mhr-motion="on"] :is(button, a.cc-button, a.bd-button, a.ac-primary, a.os-primary) {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    opacity 140ms ease, translate 140ms cubic-bezier(.2,.7,.2,1),
    scale 100ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body.hub[data-mhr-motion="on"] :is(
    button:not(.nav-icon-btn):not(.st-bar):not([data-chart-tooltip]),
    a.cc-button, a.bd-button, a.ac-primary, a.os-primary
  ):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -1px;
  }
  body.hub[data-mhr-motion="on"] button:not(:disabled):hover > [data-mhr-close-icon] {
    rotate: 90deg;
  }
}

body.hub[data-mhr-motion="on"] :is(
  button:not(.st-bar):not([data-chart-tooltip]), a.cc-button, a.bd-button, a.ac-primary, a.os-primary
):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
  scale: .98;
}

/* The actual icon identity is checked by JS; unrelated SVGs are never rotated. */
body.hub[data-mhr-motion="on"] :is([data-mhr-chevron], [data-mhr-close-icon]) {
  transform-origin: center;
  transition: rotate 160ms cubic-bezier(.2,.7,.2,1) !important;
}
body.hub[data-mhr-motion] :is(
  .hub-select > button[aria-expanded="true"],
  details[open] > summary
) > [data-mhr-chevron] {
  rotate: 90deg;
}
body.hub[data-mhr-motion="on"] .atelier-nav-group > summary > span {
  transition: rotate 160ms ease !important;
}
body.hub[data-mhr-motion] .atelier-nav-group:not([open]) > summary > span {
  rotate: -90deg;
}

body.hub[data-mhr-motion="on"] :is(
  .hub-select-popup, .notification-popover, .user-profile-popover,
  .atelier-search-results:not([hidden])
) {
  animation: mhr-menu-in 150ms cubic-bezier(.2,.7,.2,1) backwards !important;
}
body.hub[data-mhr-motion="on"] :is(dialog[open], .modal-box, .admin-edit-modal) {
  animation: mhr-dialog-in 190ms cubic-bezier(.2,.7,.2,1) backwards !important;
}
body.hub[data-mhr-motion="on"] :is(.pd-drawer, .bd-drawer)[open] {
  animation-name: mhr-drawer-in !important;
}
body.hub[data-mhr-motion="on"] dialog[open]::backdrop {
  animation: mhr-backdrop-in 160ms ease-out backwards;
}
body.hub[data-mhr-motion="on"] details[open] > :not(summary):not(script):not(style) {
  animation: mhr-disclosure-in 150ms ease-out backwards;
}

@keyframes mhr-menu-in {
  from { opacity: .25; translate: 0 -4px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mhr-dialog-in {
  from { opacity: .25; translate: 0 8px; scale: .995; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes mhr-drawer-in {
  from { opacity: .4; translate: 14px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mhr-backdrop-in {
  from { opacity: .4; }
  to { opacity: 1; }
}
@keyframes mhr-disclosure-in {
  from { opacity: .4; }
  to { opacity: 1; }
}

/* Immediate state changes remain available when either preference disables motion. */
body.hub:is([data-mhr-motion="off"], [data-hub-motion="false"]) :is(
  button, a.cc-button, a.bd-button, a.ac-primary, a.os-primary,
  [data-mhr-chevron], [data-mhr-close-icon], .atelier-nav-group > summary > span,
  .hub-select-popup, .notification-popover, .user-profile-popover,
  .atelier-search-results, dialog, .modal-box, .admin-edit-modal,
  details[open] > :not(summary)
) {
  animation: none !important;
  transition: none !important;
}
body.hub:is([data-mhr-motion="off"], [data-hub-motion="false"]) dialog::backdrop {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.hub :is(
    button, a.cc-button, a.bd-button, a.ac-primary, a.os-primary,
    [data-mhr-chevron], [data-mhr-close-icon], .atelier-nav-group > summary > span,
    .hub-select-popup, .notification-popover, .user-profile-popover,
    .atelier-search-results, dialog, .modal-box, .admin-edit-modal,
    details[open] > :not(summary)
  ) {
    animation: none !important;
    transition: none !important;
  }
  body.hub dialog::backdrop { animation: none !important; }
}