/* Shared motion: entrances, hovers, and interaction feedback across the app. */

:root {
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- page-level entrances ---------- */

.page > .page-head,
.page > .detail-head,
.page > .back-link { animation: fadeUp .45s var(--ease-out) both; }

.summary { animation: fadeUp .5s var(--ease-out) .05s both; }

.account-grid > * { animation: fadeUp .45s var(--ease-out) both; }
.account-grid > *:nth-child(1) { animation-delay: .08s; }
.account-grid > *:nth-child(2) { animation-delay: .14s; }
.account-grid > *:nth-child(3) { animation-delay: .2s; }
.account-grid > *:nth-child(4) { animation-delay: .26s; }
.account-grid > *:nth-child(n+5) { animation-delay: .3s; }

.columns > * { animation: fadeUp .45s var(--ease-out) .22s both; }
.columns > *:nth-child(2) { animation-delay: .3s; }

.stat-grid > * { animation: fadeUp .4s var(--ease-out) both; }
.stat-grid > *:nth-child(1) { animation-delay: .04s; }
.stat-grid > *:nth-child(2) { animation-delay: .1s; }
.stat-grid > *:nth-child(3) { animation-delay: .16s; }
.stat-grid > *:nth-child(4) { animation-delay: .22s; }

.auth-card { animation: scaleIn .4s var(--ease-out) both; }
.alert { animation: fadeUp .35s var(--ease-out) both; }

/* Landing sections fade as they scroll past. */
.feature, .step, .faq details, .product { animation: fadeUp .5s var(--ease-out) both; }
.feature-grid > *:nth-child(1), .steps > *:nth-child(1) { animation-delay: .05s; }
.feature-grid > *:nth-child(2), .steps > *:nth-child(2) { animation-delay: .12s; }
.feature-grid > *:nth-child(3), .steps > *:nth-child(3) { animation-delay: .19s; }
.feature-grid > *:nth-child(4) { animation-delay: .26s; }

.hero-copy > * { animation: fadeUp .55s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: .04s; }
.hero-copy > *:nth-child(2) { animation-delay: .1s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .22s; }
.hero-copy > *:nth-child(5) { animation-delay: .28s; }
.hero-card { animation: scaleIn .6s var(--ease-out) .18s both; }
.hero-badge { animation: scaleIn .5s var(--ease-spring) .5s both; }

/* Transaction rows cascade in. */
.tx-list .tx-item { animation: fadeIn .35s ease both; }
.tx-list .tx-item:nth-child(1) { animation-delay: .02s; }
.tx-list .tx-item:nth-child(2) { animation-delay: .05s; }
.tx-list .tx-item:nth-child(3) { animation-delay: .08s; }
.tx-list .tx-item:nth-child(4) { animation-delay: .11s; }
.tx-list .tx-item:nth-child(5) { animation-delay: .14s; }
.tx-list .tx-item:nth-child(n+6) { animation-delay: .17s; }

/* Spending bars grow from zero on load. */
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.spend-fill { transform-origin: left center; animation: growBar .7s var(--ease-out) .3s both; }

/* ---------- hover and press feedback ---------- */

.account-card { transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--ease-out); }
.account-card:hover { transform: translateY(-3px); }

.feature, .product, .step {
  transition: box-shadow .25s ease, transform .25s var(--ease-out), border-color .2s ease;
}
.feature:hover, .product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.stat-card { transition: box-shadow .25s ease, transform .25s var(--ease-out); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                   box-shadow .25s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .16); }

.tx-item { transition: background-color .2s ease; }
.tx-list .tx-item:hover { background: #fafbfd; }

.tab, .nav a, .footer-links a { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* The value a number lands on matters more than the motion, so keep it subtle. */
.summary-value, .stat-card-value, .account-balance { animation: fadeIn .5s ease .15s both; }

/* ---------- flash messages ---------- */

@keyframes flashIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
.alert-success, .alert-error { animation: flashIn .4s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .account-card:hover, .feature:hover, .product:hover, .stat-card:hover { transform: none; }
}

/* Multi-currency totals on the dashboard summary. */
.summary-totals { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; align-items: baseline; }
.summary-totals .summary-value { margin-top: .2rem; }
.summary-code {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #a5c0dd;
  margin-left: .3rem;
  vertical-align: middle;
}

.section-note {
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .05em;
  color: var(--ink-subtle);
  background: #eef2f7;
  padding: .12rem .4rem;
  border-radius: 5px;
  margin-left: .3rem;
  vertical-align: middle;
}