/* ── Keyframes ─────────────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

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

/* ── Utility animation classes ─────────────────────────────────── */

.fade-in {
  animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fade-in-fast {
  animation: fadeInFast 0.2s ease both;
}

/* Stagger helper — apply via inline style animation-delay */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }

/* ── Dashboard section reveal ──────────────────────────────────── */
.dashboard-section {
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#section-overview { animation-delay: 0.0s; }
#section-prices   { animation-delay: 0.05s; }
#section-balances { animation-delay: 0.10s; }
#section-vortex   { animation-delay: 0.15s; }
#section-pyron    { animation-delay: 0.20s; }
#section-dapps    { animation-delay: 0.25s; }

/* ── Hover lift effect on position cards ──────────────────────── */
.position-card {
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}
.position-card:hover {
  transform: translateY(-2px);
}

/* ── Price row pulse on first load ─────────────────────────────── */
.price-row.updated {
  animation: pricePulse 0.6s ease;
}
@keyframes pricePulse {
  0%   { background: rgba(104, 211, 145, 0.15); }
  100% { background: var(--bg-input); }
}

/* ── Total badge count-up effect ───────────────────────────────── */
.total-badge {
  transition: opacity 0.3s ease;
}

/* ── Dashboard show animation ──────────────────────────────────── */
#dashboard[hidden] { display: none !important; }
#dashboard:not([hidden]) {
  animation: fadeIn 0.4s ease both;
}