/* Motion changes only paint and transforms; existing layout geometry stays intact. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
html { scroll-behavior: smooth; }
body button, body a, body input, body select, body .card, body .balance-badge {
    transition: transform .3s var(--motion-ease), box-shadow .3s var(--motion-ease),
        border-color .2s ease, background-color .25s ease, color .2s ease, filter .2s ease;
}
body header { box-shadow: 0 10px 36px #0002; }
body .tab-content { animation: section-arrive .48s var(--motion-ease); }
body .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, #334155); }
body .card:focus-within { border-color: color-mix(in srgb, var(--accent, #6366f1) 65%, #334155); }
body .modal-box { animation: dialog-arrive .42s var(--motion-ease); max-height: calc(100dvh - 40px); overflow-y: auto; }
body .modal-overlay { animation: veil-arrive .25s ease; }
body button:focus-visible, body a:focus-visible { outline: 2px solid var(--accent, #818cf8); outline-offset: 4px; }
body button:disabled { transform: none; }
body button[aria-busy="true"] { cursor: progress; opacity: .65; }
body .goal-fill { transition: width .9s var(--motion-ease); }
body .goal-fill::after { animation: shimmer 3.8s ease-in-out infinite; }
body .loading-skeleton { animation: skeleton-light 1.6s ease-in-out infinite; }
@keyframes skeleton-light { to { background-position: -200% 0; } }
@keyframes section-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes veil-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (hover: none) { body .card:hover, body .balance-badge:hover, body .tab-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body *, body *::before, body *::after { animation: none !important; transition: none !important; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body .card { background-image: radial-gradient(420px circle at var(--light-x, 50%) var(--light-y, 0%), color-mix(in srgb, var(--accent, #6366f1) 9%, transparent), transparent 75%); }
    body .card:hover { background-image: radial-gradient(420px circle at var(--light-x, 50%) var(--light-y, 0%), color-mix(in srgb, var(--accent, #6366f1) 17%, transparent), transparent 75%); }
}