/* NAI v2 - motion: keyframes, transitions, view transitions.
   Duur en easing komen ALTIJD uit een token. */

/* ============================================================ Motion */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: .7; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes sweep {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(400%, 0, 0); }
}
@keyframes shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

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

@keyframes flash-in {
  0%   { background: var(--accent-soft); transform: translate3d(0, -4px, 0); opacity: 0; }
  40%  { opacity: 1; transform: none; }
  100% { background: transparent; }
}

.act-side {
  min-width: 44px; text-align: center; flex: none;
  padding: 3px 7px; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
.act-side.buy  { background: var(--good-soft); color: var(--good); border: 1px solid var(--good-border); }
.act-side.sell { background: var(--bad-soft);  color: var(--bad);  border: 1px solid var(--bad-border); }
.act-sym  { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.act-meta { color: var(--text-2); font-variant-numeric: tabular-nums; }
.act-pnl  { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act-time { color: var(--text-3); font-size: 12px; white-space: nowrap; flex: none; }


/* ============================================================================
   v2 - beweging die iets betekent
   ============================================================================
   Regels: alleen transform, opacity en kleur. Een animatie die de UI vertraagt
   is een bug, en alles hieronder valt stil bij prefers-reduced-motion omdat de
   duur-tokens dan op 0ms staan.
   ========================================================================= */

/* ---- Pagina komt binnen ------------------------------------------------- */
@view-transition { navigation: auto; }
.brand-mark { view-transition-name: brand-mark; }
.auth-card  { view-transition-name: auth-shell; }

.page, .auth-page {
  opacity: 1; transform: none;
  transition: opacity var(--t-page) var(--ease-out),
              transform var(--t-page) var(--ease-out);
}
@starting-style {
  .page, .auth-page { opacity: 0; transform: translateY(10px) scale(.99); }
}

/* ---- Kaarten komen gestaffeld op ---------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.card, .kpi { animation: rise var(--t-mid) var(--ease-out) backwards; }
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .card, .kpi { animation-delay: calc((sibling-index() - 1) * 40ms); }
}
@supports not (animation-delay: calc(sibling-index() * 1ms)) {
  .card:nth-child(1), .kpi:nth-child(1) { animation-delay:   0ms; }
  .card:nth-child(2), .kpi:nth-child(2) { animation-delay:  40ms; }
  .card:nth-child(3), .kpi:nth-child(3) { animation-delay:  80ms; }
  .card:nth-child(4), .kpi:nth-child(4) { animation-delay: 120ms; }
  .card:nth-child(5), .kpi:nth-child(5) { animation-delay: 160ms; }
  .card:nth-child(6), .kpi:nth-child(6) { animation-delay: 200ms; }
  .card:nth-child(7), .kpi:nth-child(7) { animation-delay: 240ms; }
  .card:nth-child(8), .kpi:nth-child(8) { animation-delay: 280ms; }
}

/* ---- Tabs: de pil glijdt, de inhoud schuift mee ------------------------- */
.tab-indicator, .tabs .on { view-transition-name: tab-indicator; }
:root:active-view-transition .tab { pointer-events: none; }

::view-transition-old(root) { animation: vt-out var(--t-fast) var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in  var(--t-mid)  var(--ease-out) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateX(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateX(6px); } }
:root.vt-back ::view-transition-old(root) { animation-name: vt-out-back; }
:root.vt-back ::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out-back { to   { opacity: 0; transform: translateX(6px); } }
@keyframes vt-in-back  { from { opacity: 0; transform: translateX(-6px); } }

/* ---- Knoppen bevestigen je klik ----------------------------------------- */
.btn, .icon-btn, .tab, .link-btn {
  transition: transform var(--t-tap) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn:active, .icon-btn:active, .link-btn:active { transform: scale(.97); }

/* ---- Een getal dat verandert flitst zijn richting ------------------------ */
@keyframes flash-up   { from { background: var(--flash-up); }   to { background: transparent; } }
@keyframes flash-down { from { background: var(--flash-down); } to { background: transparent; } }
.flash-up   { animation: flash-up   600ms var(--ease-out); border-radius: var(--r-xs); }
.flash-down { animation: flash-down 600ms var(--ease-out); border-radius: var(--r-xs); }

/* ---- Kaarten reageren op de muis ---------------------------------------- */
.card, .kpi { transition: transform var(--t-fast) var(--ease-out),
                          border-color var(--t-fast) var(--ease-out); }
.kpi:hover  { transform: translateY(-2px); border-color: var(--border-strong); }

/* ---- Een foute login schudt, en zoomt niet ------------------------------ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}
.auth-card.is-wrong { animation: shake 240ms var(--ease-in-out); }

/* ---- Skeletons in plaats van een leeg vlak ------------------------------ */
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton { position: relative; overflow: hidden; border-radius: var(--r-sm);
            background: var(--surface-2); color: transparent; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              color-mix(in oklch, var(--text) 7%, transparent), transparent);
  animation: shimmer 1.4s linear infinite;
}