@keyframes page-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(9px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drawer-acctual-enter {
  from { opacity: .5; transform: translateX(38px); }
  to { opacity: 1; transform: translateX(0); }
}

.page-canvas { animation: page-enter var(--motion-slow) var(--ease-enter) both; }
.metric-card, .compact-metrics, .panel { animation: card-enter var(--motion-slow) var(--ease-enter) both; }
.metric-card:nth-child(2), .panel:nth-child(2) { animation-delay: 35ms; }
.metric-card:nth-child(3), .panel:nth-child(3) { animation-delay: 70ms; }
.metric-card:nth-child(4), .panel:nth-child(4) { animation-delay: 105ms; }
.button, .nav-item, .source-switcher, .source-option, tbody tr, .icon-button { transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.dialog.drawer[open] { animation: drawer-acctual-enter var(--motion-base) var(--ease-enter); }
.dialog[open]::backdrop { animation: backdrop-in var(--motion-base) ease-out both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.activity-symbol[data-status="running"] .ti { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

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