/* Zikra motion: short feedback, readable content and no layout shifts. */
.site-preloader { display: none; }
.preloader-pending .site-preloader {
    display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center;
    background: var(--paper, #141820); color: var(--ink, #edf1f7);
    animation: preloader-safety-hide 0s 3.6s forwards;
}
.preloader-brand { text-align: center; padding: 28px; width: min(360px, 100%); }
.preloader-emblem { position: relative; display: grid; place-items: center; width: 114px; height: 114px; margin: 0 auto 26px; }
.preloader-emblem img { display: block; width: 76px; height: 76px; object-fit: contain; animation: logo-breathe 1.8s ease-in-out infinite; }
.preloader-ring { position: absolute; inset: 0; border: 2px solid var(--line, #364052); border-top-color: #ff7130; border-right-color: #ff7130; border-radius: 50%; animation: loader-turn 1.4s linear infinite; }
.preloader-name { margin: 0 0 10px; font-size: 25px; font-weight: 700; letter-spacing: 3px; line-height: 1.4; }
.preloader-name span { color: var(--accent-ink, #ffad81); font-weight: 350; }
.preloader-caption { color: var(--muted, #a6b1c2); font-size: 13px; margin: 0 0 26px; }
.preloader-track { display: block; overflow: hidden; width: 120px; height: 3px; margin: 0 auto; border-radius: 20px; background: var(--line, #364052); }
.preloader-track > span { display: block; width: 45%; height: 100%; background: #ff7130; border-radius: inherit; animation: loading-track 1.2s ease-in-out infinite; }
.site-navigation-progress { display: none; position: fixed; z-index: 10001; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; pointer-events: none; }
.navigation-pending .site-navigation-progress { display: block; }
.site-navigation-progress::before { content: ''; display: block; width: 35%; height: 100%; background: #ff7130; animation: loading-track 1s ease-in-out infinite; }
[data-motion-busy] { opacity: .75; cursor: progress; }
.motion-ready main > .page-title { animation: content-arrive 280ms ease-out; }
.motion-ready .cards > *, .motion-ready .settings-grid > .panel, .motion-ready .record-grid .record, .motion-ready .accounts-grid .account { animation: content-arrive 320ms ease-out; }
.motion-ready .cards > :nth-child(2), .motion-ready .settings-grid > :nth-child(2), .motion-ready .record-grid .record:nth-child(2) { animation-delay: 35ms; }
.motion-ready .cards > :nth-child(3), .motion-ready .settings-grid > :nth-child(3), .motion-ready .record-grid .record:nth-child(3) { animation-delay: 70ms; }
.motion-ready .cards > :nth-child(n+4), .motion-ready .settings-grid > :nth-child(n+4) { animation-delay: 100ms; }
button, .button { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
@media (hover: hover) {
    button:hover, .button:hover { transform: translateY(-1px); }
    .business-cards .panel:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #0000000a; }
    .invoice-row:hover { border-color: var(--accent-ink); }
    tbody tr:hover { background: var(--soft); }
}
button:active, .button:active { transform: translateY(0) scale(.985); }
.business-cards .panel, .invoice-row { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
input, select, textarea { transition: border-color 150ms ease, box-shadow 150ms ease; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px #ff713018; }
tbody tr { transition: background-color 150ms ease; }
.app-dialog[open] { animation: dialog-arrive 180ms ease-out; }
.notice, .error { animation: status-arrive 220ms ease-out; }
.step a, .step { transition: color 160ms ease, border-color 160ms ease; }
@keyframes content-arrive { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-arrive { from { opacity: .3; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes status-arrive { from { opacity: .4; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-breathe { 0%, 100% { transform: scale(.97); opacity: .8; } 50% { transform: scale(1); opacity: 1; } }
@keyframes loader-turn { to { transform: rotate(360deg); } }
@keyframes loading-track { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes preloader-safety-hide { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
    .site-preloader *, .site-navigation-progress::before, .motion-ready main *, .app-dialog, .app-dialog * { animation: none !important; transition: none !important; }
    .preloader-pending .site-preloader { animation: preloader-safety-hide 0s 3.6s forwards; }
    button:hover, .button:hover, button:active, .button:active, .business-cards .panel:hover { transform: none; }
    .preloader-track > span { width: 100%; }
}
@media print { .site-preloader, .site-navigation-progress { display: none !important; } }
.motion-ready .cards > *, .motion-ready .settings-grid > .panel, .motion-ready .record-grid .record, .motion-ready .accounts-grid .account { animation-fill-mode: backwards; }
