/* Motion responds to actions; reading tables and changing tabs stay immediate. */
:root { --motion-ease: cubic-bezier(0.23, 1, 0.32, 1); }

button, .nav-link, .overall-card {
  transition: background-color 150ms ease, color 150ms ease,
    border-color 150ms ease, box-shadow 150ms ease;
}
.people-overall-row, .row, .wholesale-row {
  transition: background-color 100ms ease;
}
.field input, .field select, .export-controls select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.modal, .people-detail-modal, .modal-card, .people-detail-card,
.calendar-popover, .settings-menu-panel { overscroll-behavior: contain; }

/* A full-size fill is scaled instead of changing layout on every frame. */
.carrier-track > span {
  width: 100%;
  transform-origin: left center;
  transition: none;
}

.toast {
  opacity: 1;
  translate: 0 0;
  transition: opacity 200ms var(--motion-ease), display 200ms allow-discrete;
}
.toast[hidden] { opacity: 0; }
@starting-style {
  .toast:not([hidden]) { opacity: 0; }
  :root:not([data-input='keyboard']) .calendar-popover:not([hidden]),
  :root:not([data-input='keyboard']) .settings-menu[open] .settings-menu-panel { opacity: 0; }
}
.calendar-popover, .settings-menu-panel {
  transition: opacity 150ms var(--motion-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .header-actions button, .admin-actions button, .export-controls button,
  .carrier-arrival, .carrier-pending, .close, .people-detail-close, #connectTable {
    transition: background-color 150ms ease, color 150ms ease,
      border-color 150ms ease, box-shadow 150ms ease, scale 150ms ease-out;
  }
  .header-actions button:not(:disabled):not(:focus-visible):active,
  .admin-actions button:not(:disabled):not(:focus-visible):active,
  .export-controls button:not(:disabled):not(:focus-visible):active,
  .carrier-arrival:not(:disabled):not(:focus-visible):active,
  .carrier-pending:not(:disabled):not(:focus-visible):active,
  .close:not(:disabled):not(:focus-visible):active,
  .people-detail-close:not(:disabled):not(:focus-visible):active,
  #connectTable:not(:disabled):not(:focus-visible):active { scale: 0.96; }

  :root:not([data-input='keyboard']) .toast {
    transition: opacity 200ms var(--motion-ease), translate 200ms var(--motion-ease),
      display 200ms allow-discrete;
  }
  :root:not([data-input='keyboard']) .toast[hidden] { translate: 0 8px; }
  @starting-style {
    :root:not([data-input='keyboard']) .toast:not([hidden]) { translate: 0 8px; }
  }
}

/* Keyboard actions do not wait for motion; reduced-motion keeps all static cues. */
:root[data-input='keyboard'] .calendar-popover,
:root[data-input='keyboard'] .settings-menu-panel,
:root[data-input='keyboard'] .toast { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .toast {
    translate: none;
    transition: opacity 120ms var(--motion-ease), display 120ms allow-discrete !important;
  }
}
:root[data-input='keyboard'] .toast { transition: none !important; }