/* ══════════════════  Motion  ══════════════════
   Loaded after style.css and workspace.css, so it only has to add movement,
   never restate a look. Everything here is short (under half a second) and eases
   out: an interface that keeps you waiting on its own animations reads as
   slow. motion.js handles the parts CSS can't reach on its own (sliding tab
   indicators, and exit animations for things the app removes outright). */

:root {
  --m-out: cubic-bezier(.22, 1, .36, 1);      /* quick start, soft landing */
  --m-spring: cubic-bezier(.34, 1.36, .64, 1); /* a hair of overshoot */
  --m-fast: .14s;
  --m-base: .22s;
  --m-slow: .32s;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes m-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-page-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes m-pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes m-dialog { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes m-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes m-toast-out { to { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes m-badge { from { opacity: 0; transform: scale(.4); } }
@keyframes m-copied { 40% { transform: scale(1.08); } }
@keyframes m-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ── Pages and tabs ───────────────────────────────────────────────────────
   Switching views re-shows the section (display: none -> block), which
   restarts these, so every tab change gets a staggered rise. The stagger
   caps at the fifth block so long pages never wait on it. */
.view.active { animation: m-fade .3s ease-out; }
.view.active > * { animation: m-page-in .45s var(--m-out) backwards; }
.view.active > :nth-child(2) { animation-delay: 50ms; }
.view.active > :nth-child(3) { animation-delay: 100ms; }
.view.active > :nth-child(4) { animation-delay: 150ms; }
.view.active > :nth-child(n+5) { animation-delay: 200ms; }

.subview.active,
.wallet-pane,
#form-2fa,
details[open] > :not(summary) { animation: m-fade-up var(--m-base) var(--m-out) backwards; }

/* Disclosure "+" turns into a close mark instead of just sitting there. */
details > summary > [aria-hidden="true"]:last-child {
  display: inline-block;
  transition: transform var(--m-base) var(--m-out);
}
details[open] > summary > [aria-hidden="true"]:last-child { transform: rotate(45deg); }

/* ── Tab indicators ───────────────────────────────────────────────────────
   motion.js adds .m-ink to each tab strip and slides it to the active tab.
   Until the script runs (or if it doesn't) the original per-tab marks stay. */
.m-has-ink { position: relative; }
.m-ink {
  position: absolute; left: 0; top: 0; z-index: 0;
  pointer-events: none;
  transition: transform var(--m-slow) var(--m-out), width var(--m-slow) var(--m-out), height var(--m-slow) var(--m-out), opacity var(--m-fast) ease;
}
.m-ink.m-still { transition: none; }

/* Underline tabs: wallet panes and order types. */
.workspace-tabs.m-has-ink > button.active::after,
.order-type-tabs.m-has-ink > button.active::after { opacity: 0; }
.m-ink.m-underline { top: auto; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* Pill tabs: sidebar nav and the Advanced sub-tabs. The pill is drawn by the
   ink, so the active button itself goes transparent while it rides under. */
.nav-list.m-has-ink > .nav,
.nav-list.m-has-ink > * > .nav,
.subnav.m-has-ink > .subnav-btn { position: relative; z-index: 1; }
.nav-list.m-has-ink .nav.active,
.nav-list.m-has-ink .nav.active:hover,
.subnav.m-has-ink > .subnav-btn.active { background-color: transparent; }
.nav-list.m-has-ink .nav::before { opacity: 0; }
.m-ink.m-pill { border-radius: 10px; background: var(--surface-3); }
.subnav .m-ink.m-pill { border-radius: 7px; }
.nav-list .m-ink.m-pill::before {
  content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px; background: var(--accent);
}

/* ── Buttons and pressables ───────────────────────────────────────────────
   Hover eases in; a press gives a small, quick squeeze and springs back. */
.btn, .icon-btn, .sel-btn, .chip, .subnav-btn, .copy-btn, .link-btn, .nav,
.workspace-tabs > button, .order-type-tabs > button, .t-close, .dialog-close,
.profile-dropdown button, .shortcut, .funds-link, .activity-footer {
  transition:
    background-color var(--m-fast) ease, border-color var(--m-fast) ease,
    color var(--m-fast) ease, box-shadow var(--m-base) ease, opacity var(--m-fast) ease,
    filter var(--m-fast) ease, transform var(--m-base) var(--m-spring);
}
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .sel-btn:active,
.chip:active:not(:disabled), .copy-btn:active, .subnav-btn:active,
.t-close:active, .dialog-close:active, .funds-link:active {
  transform: scale(.96);
  transition-duration: 60ms;
}
.nav:active, .profile-dropdown button:active, .shortcut:active,
.workspace-tabs > button:active, .order-type-tabs > button:active { transform: scale(.98); transition-duration: 60ms; }
.btn.loading { transition: opacity var(--m-base) ease; }
.copy-btn.copied { animation: m-copied .3s var(--m-out); }

/* Rows and cards you can click drift their arrow toward where they lead. */
.order-item, .activity-entry, .notif-item, .search-item, .review-card, .sel-opt,
tbody tr.clickable, .acct-row {
  transition: background-color var(--m-fast) ease, border-color var(--m-fast) ease, color var(--m-fast) ease;
}
.shortcut-arrow, .order-chevron, .funds-link span, .activity-footer span,
.overview-actions .btn span[aria-hidden] {
  display: inline-block;
  transition: transform var(--m-base) var(--m-out);
}
.shortcut:hover .shortcut-arrow, .funds-link:hover span, .activity-footer:hover span { transform: translateX(3px); }
.order-item:hover .order-chevron, .overview-actions .btn:hover span[aria-hidden] { transform: translate(2px, -2px); }
.card, .kpi, .liq-card, .mkt, .settings-group, .account-disclosure, .volume-disclosure {
  transition: border-color var(--m-base) ease, background-color var(--m-base) ease, box-shadow var(--m-base) ease;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
input, textarea, select, .search-wrap {
  transition: border-color var(--m-fast) ease, background-color var(--m-fast) ease, box-shadow var(--m-base) ease;
}

/* ── Switches ─────────────────────────────────────────────────────────────
   The thumb springs across, and stretches while held, like a real toggle. */
.sw-track { transition: background-color var(--m-base) ease, border-color var(--m-base) ease; }
.sw-thumb { transition: transform var(--m-slow) var(--m-spring), width var(--m-base) var(--m-out), background-color var(--m-base) ease; }
.sw input:active:not(:disabled) ~ .sw-thumb { width: 22px; }
.sw input:checked:active:not(:disabled) ~ .sw-thumb { transform: translateX(14px); }

/* ── Popovers ─────────────────────────────────────────────────────────── */
.sel-menu:not(.hidden), .search-results:not(.hidden) { animation: m-pop var(--m-base) var(--m-out); transform-origin: top center; }
.notif-panel:not(.hidden) { animation: m-pop var(--m-base) var(--m-out); transform-origin: top right; }
.profile-dropdown:not(.hidden) { animation: m-pop-up var(--m-base) var(--m-out); transform-origin: bottom center; }
.m-leaving, .m-leaving * { pointer-events: none !important; animation: none !important; }

/* Count badges pop in when they first appear. */
.nav-count:not(.hidden), #notif-badge:not(.hidden) { animation: m-badge var(--m-slow) var(--m-spring); }

/* ── Dialogs ──────────────────────────────────────────────────────────── */
.modal-root:not(.hidden) { animation: m-fade var(--m-base) ease-out; }
.modal-root .modal { animation: m-dialog var(--m-slow) var(--m-out); }

/* ── Toasts ───────────────────────────────────────────────────────────────
   In from below with a slight lift; out to the side. motion.js closes the
   gap the leaving toast leaves, so the stack slides rather than jumps. */
.toast-stack > .toast, .toast-stack > div { animation: m-toast-in var(--m-slow) var(--m-out); }
.toast-stack > .toast.out, .toast-stack > div.out { animation: m-toast-out .2s ease-in forwards; }

/* ── Mobile drawer ────────────────────────────────────────────────────── */
.sidebar { transition: transform var(--m-slow) var(--m-out); }
.backdrop { transition: opacity var(--m-base) ease; }

/* ── Sign-in and setup ────────────────────────────────────────────────── */
.login-card { animation: m-fade-up .4s var(--m-out) backwards; }
.auth-story-content { animation: m-fade-up .5s var(--m-out) 60ms backwards; }
.error-box:not(.hidden) { animation: m-shake .32s ease-out; }

/* ── Theme switch ─────────────────────────────────────────────────────────
   motion.js sets this class for a moment around a theme change, so the
   whole page crossfades instead of flashing to the other palette. */
html.m-theme-swap, html.m-theme-swap *, html.m-theme-swap *::before, html.m-theme-swap *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   Reduce, don't remove. With the OS "animation effects" setting off (common
   on Windows), style.css and workspace.css switch every animation off, which
   made the panel feel broken. Movement stays off here, but things still fade
   in and out and colours still ease, so state changes remain visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .view.active, .subview.active, .wallet-pane, #form-2fa, details[open] > :not(summary),
  .sel-menu:not(.hidden), .search-results:not(.hidden), .notif-panel:not(.hidden),
  .profile-dropdown:not(.hidden), .modal-root:not(.hidden), .toast-stack > div,
  .login-card, .nav-count:not(.hidden), #notif-badge:not(.hidden) { animation: m-fade .25s ease-out !important; }
  .toast-stack > div.out { animation: m-fade-out .2s ease-in forwards !important; }
  .btn, .icon-btn, .sel-btn, .chip, .subnav-btn, .copy-btn, .link-btn, .nav,
  .workspace-tabs > button, .order-type-tabs > button, .t-close, .dialog-close,
  .profile-dropdown button, .shortcut, .order-item, .activity-entry, .notif-item,
  .search-item, .sel-opt, .sw-track, .sw-thumb, input, .backdrop {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  }
  .m-ink { transition: opacity .15s ease !important; }
}