/* A quiet interaction rhythm. Existing drawer/chart behaviour stays independent. */
:root {
  --sc-motion-fast: 140ms;
  --sc-motion-panel: 180ms;
  --sc-motion-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-app-shell :is(a.sc-btn, button.sc-btn, a.btn, button.btn, .sc-sidebar-link, .sc-search-btn),
  :is(#app, .oapp, .setwrap, .aiwrap) :is(a.btn, button.btn, a.sc-btn, button.sc-btn) {
    transition: background-color var(--sc-motion-fast) ease, border-color var(--sc-motion-fast) ease,
      color var(--sc-motion-fast) ease, box-shadow var(--sc-motion-fast) ease, transform var(--sc-motion-fast) var(--sc-motion-ease);
  }
  .sc-app-shell :is(a.sc-btn, button.sc-btn, a.btn, button.btn):not(:disabled):not([aria-disabled="true"]):active,
  :is(#app, .oapp, .setwrap, .aiwrap) :is(a.btn, button.btn, a.sc-btn, button.sc-btn):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px);
  }
  :is(#app, .oapp, .setwrap, .aiwrap) :is(.cfilter__btn, .sfilter__btn, .seg__btn, .obar__btn),
  .sc-app-shell :is([role="tab"], .sc-section-navigation__link, .sc-attendance-tabs a, .jp-tabs a) {
    transition: background-color var(--sc-motion-panel) ease, border-color var(--sc-motion-panel) ease,
      color var(--sc-motion-panel) ease, box-shadow var(--sc-motion-panel) ease;
  }
  .sc-app-shell :is(input, textarea, select) {
    transition: border-color var(--sc-motion-fast) ease, box-shadow var(--sc-motion-fast) ease;
  }
}
/* Reduced motion also covers the standalone mobile application's older effects. */
@media (prefers-reduced-motion: reduce) {
  [data-sc-motion], .sc-message--success, .smsg--success,
  .otab, .result-icon, .spinner, .okpi__card,
  .sc-app-shell :is(.sc-btn, .btn, [role="tab"], .sc-section-navigation__link, .sc-attendance-tabs a, .jp-tabs a) {
    animation: none !important;
    transition: none !important;
  }
  .okpi__card:active { transform: none !important; }
}