/* ===== Motion system =====
   All non-essential animation lives here. Disabled by html[data-anim="off"] (user setting)
   and by the OS "reduce motion" preference. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-var-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: var(--font); }
body { font-feature-settings: "cv11", "ss01", "tnum"; }

/* --- screen enter --- */
.screen { animation: screen-in 260ms var(--ease) backwards; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- staggered list items --- */
.tx-wrap, .list-row, .wallet-card, .chip, .legend-row, .budget, .stat { animation: rise-in 360ms var(--ease) backwards; }
.tx-wrap:nth-child(1), .list-row:nth-child(1), .wallet-card:nth-child(1), .chip:nth-child(1), .legend-row:nth-child(1), .stat:nth-child(1) { animation-delay: 30ms; }
.tx-wrap:nth-child(2), .list-row:nth-child(2), .wallet-card:nth-child(2), .chip:nth-child(2), .legend-row:nth-child(2), .stat:nth-child(2) { animation-delay: 60ms; }
.tx-wrap:nth-child(3), .list-row:nth-child(3), .wallet-card:nth-child(3), .chip:nth-child(3), .legend-row:nth-child(3), .stat:nth-child(3) { animation-delay: 90ms; }
.tx-wrap:nth-child(4), .list-row:nth-child(4), .wallet-card:nth-child(4), .chip:nth-child(4), .legend-row:nth-child(4) { animation-delay: 120ms; }
.tx-wrap:nth-child(5), .list-row:nth-child(5), .wallet-card:nth-child(5), .chip:nth-child(5), .legend-row:nth-child(5) { animation-delay: 150ms; }
.tx-wrap:nth-child(6), .list-row:nth-child(6), .chip:nth-child(6), .legend-row:nth-child(6) { animation-delay: 180ms; }
.tx-wrap:nth-child(n+7), .list-row:nth-child(n+7), .chip:nth-child(n+7), .legend-row:nth-child(n+7) { animation-delay: 210ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero { animation: hero-in 420ms var(--ease) backwards; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.banner { animation: rise-in 400ms var(--ease) 120ms backwards; }

/* --- press feedback --- */
.tx-wrap, .list-row, .chip, .cat-cell, .keypad button, .btn, .icon-btn, .wallet-card, .legend-row, .budget, .swatch, .icon-grid button, .seg button, .tabbar a {
  transition: transform 140ms var(--ease), background var(--dur), color var(--dur), box-shadow var(--dur), border-color var(--dur), opacity var(--dur);
}
.tx:active, .list-row:active, .legend-row:active, .budget:active { transform: scale(.985); }
.cat-cell:active .ci { transform: scale(.9); }
.icon-btn:active, .swatch:active, .icon-grid button:active { transform: scale(.9); }

/* --- amount pop when a digit is entered --- */
.amount-display .val.pop { animation: pop 180ms var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* --- tab bar: sliding indicator + icon bounce --- */
.tabbar a.active .ic { animation: tab-bounce 380ms var(--ease); }
.tabbar { transition: background 320ms var(--ease), border-color 320ms, box-shadow 320ms, opacity 320ms; }
@keyframes tab-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-4px) scale(1.12); } 100% { transform: translateY(-1px) scale(1); } }
.fab { animation: fab-in 500ms var(--ease) 200ms backwards; }
@keyframes fab-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fab .ic { transition: transform 220ms var(--ease); }
.fab.open .ic { transform: rotate(45deg); }

/* --- sheet spring --- */
.sheet-backdrop.open .sheet { transition-timing-function: cubic-bezier(.22, 1.15, .36, 1); transition-duration: 380ms; }

/* --- toast --- */
.toast { animation: toast-in 260ms cubic-bezier(.22, 1.15, .36, 1); }
.toast.out { animation: toast-out 200ms var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* --- progress bars fill in --- */
.progress > i { animation: fill-in 700ms var(--ease) both; }
@keyframes fill-in { from { width: 0 !important; } }

/* --- skeleton shimmer (used while a screen loads) --- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- swipe to delete --- */
.tx-wrap { position: relative; overflow: hidden; }
.tx-wrap .tx { background: var(--surface); position: relative; z-index: 1; touch-action: pan-y; }
.tx-wrap .swipe-bg { opacity: 0; }
.tx-wrap.swiping .swipe-bg { opacity: 1; }
.tx-wrap .swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; background: var(--expense); color: #fff; font-weight: 600; font-size: var(--fs-s); gap: 8px; }
.tx-wrap .swipe-bg .ic { width: 20px; height: 20px; }

/* ===== Reduced motion / user setting ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
html[data-anim="off"] .tabbar .indicator { transition: none; }

/* redraws of an already-visible screen: no entry animations, content stays put */
.screen.redraw .tx-wrap, .screen.redraw .list-row, .screen.redraw .chip, .screen.redraw .stat, .screen.redraw .wallet-card, .screen.redraw .legend-row, .screen.redraw .hero, .screen.redraw .banner, .screen.redraw .budget, .screen.redraw .progress > i { animation: none !important; }

/* screen-to-screen view transitions (slide) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.25,.8,.25,1); }
html[data-vt-dir="fwd"]::view-transition-old(root) { animation-name: vt-out-left; }
html[data-vt-dir="fwd"]::view-transition-new(root) { animation-name: vt-in-right; }
html[data-vt-dir="back"]::view-transition-old(root) { animation-name: vt-out-right; }
html[data-vt-dir="back"]::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-16px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(16px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(16px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-16px); } }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { mix-blend-mode: plus-lighter; }
::view-transition-new(root) { mix-blend-mode: plus-lighter; }
.tabbar { view-transition-name: tabbar; }
#toast-root { view-transition-name: toast; }
#sheet-root { view-transition-name: sheets; }
::view-transition-old(toast), ::view-transition-new(toast), ::view-transition-old(sheets), ::view-transition-new(sheets), ::view-transition-old(glow), ::view-transition-new(glow) { animation: none; }
::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation-duration: 280ms; }
html[data-vt-dir] .screen { animation: none; }