/* Shared motion tokens + tasteful app-wide animation */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 140ms;
  --motion-med: 220ms;
  --motion-slow: 420ms;
  --motion-page: 480ms;
  --stagger: 48ms;
}

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-nav-item {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-backdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Page sections: staggered entrance */
.page-enter > * {
  animation: motion-rise var(--motion-page) var(--ease-out) both;
}

.page-enter > *:nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
.page-enter > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.page-enter > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.page-enter > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.page-enter > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.page-enter > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.page-enter > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.page-enter > *:nth-child(8) { animation-delay: calc(var(--stagger) * 7); }
.page-enter > *:nth-child(n + 9) { animation-delay: calc(var(--stagger) * 8); }

/* Nested grids inside the first paint */
.page-enter .summary-strip > *,
.page-enter .stat-chips > *,
.page-enter .task-list > *,
.page-enter .account-list > *,
.page-enter .rules-list > * {
  animation: motion-rise var(--motion-slow) var(--ease-out) both;
}

.page-enter .summary-strip > *:nth-child(1),
.page-enter .stat-chips > *:nth-child(1),
.page-enter .task-list > *:nth-child(1),
.page-enter .account-list > *:nth-child(1),
.page-enter .rules-list > *:nth-child(1) { animation-delay: calc(var(--stagger) * 2); }

.page-enter .summary-strip > *:nth-child(2),
.page-enter .stat-chips > *:nth-child(2),
.page-enter .task-list > *:nth-child(2),
.page-enter .account-list > *:nth-child(2),
.page-enter .rules-list > *:nth-child(2) { animation-delay: calc(var(--stagger) * 3); }

.page-enter .summary-strip > *:nth-child(3),
.page-enter .stat-chips > *:nth-child(3),
.page-enter .task-list > *:nth-child(3),
.page-enter .account-list > *:nth-child(3),
.page-enter .rules-list > *:nth-child(3) { animation-delay: calc(var(--stagger) * 4); }

.page-enter .summary-strip > *:nth-child(4),
.page-enter .stat-chips > *:nth-child(4),
.page-enter .task-list > *:nth-child(4),
.page-enter .account-list > *:nth-child(4),
.page-enter .rules-list > *:nth-child(4) { animation-delay: calc(var(--stagger) * 5); }

.page-enter .summary-strip > *:nth-child(n + 5),
.page-enter .stat-chips > *:nth-child(n + 5),
.page-enter .task-list > *:nth-child(n + 5),
.page-enter .account-list > *:nth-child(n + 5),
.page-enter .rules-list > *:nth-child(n + 5) { animation-delay: calc(var(--stagger) * 6); }

/* Scroll reveal utility (opt-in) */
.motion-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive surfaces */
.btn {
  transition:
    transform var(--motion-fast) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft),
    border-color var(--motion-med) var(--ease-soft),
    opacity var(--motion-med) var(--ease-soft),
    box-shadow var(--motion-med) var(--ease-soft),
    color var(--motion-med) var(--ease-soft);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(62, 207, 142, 0.22);
}

.account-row,
.summary-link,
.rules-item,
.task-item,
.stat-chip,
.panel,
.to-budget-card {
  transition:
    transform var(--motion-med) var(--ease-soft),
    border-color var(--motion-med) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft),
    box-shadow var(--motion-med) var(--ease-soft);
}

.account-row:hover,
a.summary-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.account-row.static-row:hover {
  transform: none;
  box-shadow: none;
}

.rules-item:hover,
.task-item:hover {
  border-color: rgba(62, 207, 142, 0.28);
  background: rgba(15, 28, 26, 0.72);
}

.panel:hover {
  border-color: rgba(232, 242, 239, 0.18);
}

.brand {
  transition: color var(--motion-med) var(--ease-soft);
}

.site-header {
  transition:
    border-bottom-color var(--motion-med) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft),
    box-shadow var(--motion-med) var(--ease-soft);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.site-nav a {
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.site-nav a:hover {
  transform: translateY(-1px);
}

.nav-toggle {
  transition:
    background-color var(--motion-med) var(--ease-soft),
    border-color var(--motion-med) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.nav-toggle:active {
  transform: scale(0.96);
}

@media (max-width: 899px) {
  .site-nav.is-open > a,
  .site-nav.is-open > .nav-logout {
    animation: motion-nav-item var(--motion-med) var(--ease-out) both;
  }

  .site-nav.is-open > a:nth-child(1) { animation-delay: 0ms; }
  .site-nav.is-open > a:nth-child(2) { animation-delay: 28ms; }
  .site-nav.is-open > a:nth-child(3) { animation-delay: 56ms; }
  .site-nav.is-open > a:nth-child(4) { animation-delay: 84ms; }
  .site-nav.is-open > a:nth-child(5) { animation-delay: 112ms; }
  .site-nav.is-open > a:nth-child(6) { animation-delay: 140ms; }
  .site-nav.is-open > a:nth-child(7) { animation-delay: 168ms; }
  .site-nav.is-open > a:nth-child(8) { animation-delay: 196ms; }
  .site-nav.is-open > .nav-logout { animation-delay: 224ms; }
}

.segmented a,
.toolbar a {
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft),
    border-color var(--motion-med) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.segmented a:hover,
.toolbar a:hover {
  transform: translateY(-1px);
}

.field input,
.field select,
.field textarea,
.tx-search input,
.tx-filter select,
.cell-form select {
  transition:
    border-color var(--motion-med) var(--ease-soft),
    box-shadow var(--motion-med) var(--ease-soft),
    background-color var(--motion-med) var(--ease-soft);
}

.soft-details > summary {
  transition: color var(--motion-med) var(--ease-soft);
}

.soft-details[open] > summary {
  transition: color var(--motion-med) var(--ease-soft), margin-bottom var(--motion-med) var(--ease-soft);
}

/* Tables */
.tx-table tbody tr {
  transition: background-color var(--motion-fast) var(--ease-soft);
}

.tx-table tbody tr:hover {
  background: rgba(62, 207, 142, 0.06);
}

.status-pill {
  transition:
    background-color var(--motion-med) var(--ease-soft),
    border-color var(--motion-med) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

/* Modals — open + progressive close where supported */
.app-modal {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity var(--motion-med) var(--ease-out),
    transform var(--motion-med) var(--ease-out),
    overlay var(--motion-med) allow-discrete,
    display var(--motion-med) allow-discrete;
}

.app-modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .app-modal[open] {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

.app-modal::backdrop {
  background: rgba(5, 10, 9, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition:
    opacity var(--motion-med) var(--ease-soft),
    overlay var(--motion-med) allow-discrete,
    display var(--motion-med) allow-discrete;
}

.app-modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .app-modal[open]::backdrop {
    opacity: 0;
  }
}

/* Toast stack aligns with motion tokens — see toast.css */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-med: 0ms;
    --motion-slow: 0ms;
    --motion-page: 0ms;
    --stagger: 0ms;
  }

  .page-enter > *,
  .page-enter .summary-strip > *,
  .page-enter .stat-chips > *,
  .page-enter .task-list > *,
  .page-enter .account-list > *,
  .page-enter .rules-list > *,
  .site-nav.is-open > a,
  .site-nav.is-open > .nav-logout,
  .toast,
  .toast.is-leaving {
    animation: none !important;
  }

  .motion-reveal {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .app-modal,
  .app-modal::backdrop {
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .btn:active:not(:disabled),
  .account-row:hover,
  a.summary-link:hover,
  .site-nav a:hover,
  .segmented a:hover,
  .toolbar a:hover {
    transform: none;
  }
}