/* ============================================================
   utils.css: Animations, utility classes, responsive overrides
   ============================================================ */

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anim   { animation: fade-up 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.anim-1 { animation-delay: 0.04s; }
.anim-2 { animation-delay: 0.10s; }
.anim-3 { animation-delay: 0.16s; }
.anim-4 { animation-delay: 0.22s; }
.anim-5 { animation-delay: 0.28s; }

/* ── Utilities ──────────────────────────────────────────────── */
.d-none      { display: none !important; }
.btn--full    { width: 100%; justify-content: center; }
.ml-auto     { margin-left: auto; }
.mt-sm       { margin-top: 0.375rem; }
.mt-md       { margin-top: 1rem; }
.mt-lg       { margin-top: 1.5rem; }
.mb-sm       { margin-bottom: 0.6rem; }
.mb-md       { margin-bottom: 1rem; }
.text-teal   { color: var(--teal); }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text-3); }
.text-danger { color: var(--danger); }
.text-green  { color: var(--success); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .dash-layout  { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .action-grid  { grid-template-columns: 1fr 1fr; }
    .stat-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .action-grid { grid-template-columns: 1fr; }
    .stat-grid--4, .stat-grid--3, .stat-grid--2 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .topbar       { padding: 0 1rem; }
    .stat-grid--4, .stat-grid--3, .stat-grid--2 { grid-template-columns: 1fr; }
    .account-type-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stat    { padding: 1.5rem; }
    .hero-stat__value { font-size: 2.2rem; }
    .chip-grid    { grid-template-columns: 1fr 1fr; }
}