:root {
  --somma-ease: cubic-bezier(.22, 1, .36, 1);
  --somma-enter: 420ms;
}

@keyframes somma-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes somma-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stockifier-wordmark { animation: somma-enter 360ms var(--somma-ease) 100ms backwards; }
.stockifier-links { animation: somma-enter 360ms var(--somma-ease) 220ms backwards; }
.brand { animation: somma-fade 320ms ease-out 60ms backwards; }
.topbar { animation: somma-fade 320ms ease-out 100ms backwards; }
.page-heading .eyebrow { animation: somma-enter var(--somma-enter) var(--somma-ease) 80ms backwards; }
.page-heading h1 { animation: somma-enter var(--somma-enter) var(--somma-ease) 140ms backwards; }
.page-heading p { animation: somma-enter var(--somma-enter) var(--somma-ease) 200ms backwards; }
.balance-card { animation: somma-enter var(--somma-enter) var(--somma-ease) 180ms backwards; }
.agent-card { animation: somma-enter var(--somma-enter) var(--somma-ease) 250ms backwards; }
.metrics { animation: somma-enter var(--somma-enter) var(--somma-ease) 310ms backwards; }
.view:not([hidden]) > .panel { animation: somma-enter 360ms var(--somma-ease) 120ms backwards; }
#view-wallet > .panel { animation-delay: 370ms; }
dialog[open] { animation: somma-enter 200ms var(--somma-ease) 30ms backwards; }
dialog[open]::backdrop { animation: somma-fade 160ms ease-out; }

.primary, .secondary, .account, .sidebar nav a, .stockifier-links a {
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
    color 160ms ease-out, transform 180ms var(--somma-ease);
}
.primary:active, .secondary:active, .account:active, .stockifier-links a:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .stockifier-wordmark, .stockifier-links, .brand, .topbar,
  .page-heading .eyebrow, .page-heading h1, .page-heading p,
  .balance-card, .agent-card, .metrics, .view:not([hidden]) > .panel,
  dialog[open], dialog[open]::backdrop { animation: none; }
  .primary, .secondary, .account, .sidebar nav a, .stockifier-links a { transition: none; }
}