:root {
  --motion-fast: 140ms;
  --motion-mid: 200ms;
  --motion-slow: 220ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

button,
a,
input,
select,
textarea,
[role="button"],
[role="menuitem"],
[role="tab"],
[role="option"] {
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-mid) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.app-shell-group,
.app-shell-account-menu,
.app-select-menu,
.progress-dropdown,
.export-menu-list,
.dropdown-content,
.shell-modal,
.panel,
.card,
.shell-panel,
.hub-card,
.stat-card,
.quick-link-card,
.feature-card {
  transition: transform var(--motion-mid) var(--motion-ease),
    box-shadow var(--motion-mid) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}