/* Motion (opt-out via data-anim="off") */
html[data-anim="on"] .card,
html[data-anim="on"] .stat,
html[data-anim="on"] button,
html[data-anim="on"] .accordion,
html[data-anim="on"] .modal-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

html[data-anim="on"] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
}

html[data-anim="on"][data-theme="light"] .card:hover {
  box-shadow: 0 14px 26px rgba(12, 18, 32, 0.12);
}

html[data-anim="on"] button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

html[data-anim="on"] button:active {
  transform: translateY(1px);
}

html[data-anim="off"] .card,
html[data-anim="off"] .stat,
html[data-anim="off"] button,
html[data-anim="off"] .accordion,
html[data-anim="off"] .modal-card {
  transition: none;
}

/* Hard-stop any remaining motion (spinners, keyframes, incidental transitions) */
html[data-anim="off"] *,
html[data-anim="off"] *::before,
html[data-anim="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* Focus states */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.card:focus-visible,
.status-chip:focus-visible,
.accordion-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}