/* FişBox panel motion. Rule: motion confirms a state change (arrived, filled, done). 150-250 ms, no looping. */
:root {
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

@keyframes fb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
@keyframes fb-fill { from { background-color: #d8ecdf; } to { background-color: transparent; } }
@keyframes fb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Page enter */
.container > * { animation: fb-rise var(--motion-base) var(--motion-ease) both; }
.container > *:nth-child(2) { animation-delay: 40ms; }
.container > *:nth-child(3) { animation-delay: 80ms; }
.container > *:nth-child(n+4) { animation-delay: 120ms; }

/* Messages and warnings slide in once */
.notice, .warning, .error { animation: fb-rise var(--motion-base) var(--motion-ease) both; }

/* Status badges pop in */
.badge { animation: fb-pop var(--motion-base) var(--motion-ease) both; }

/* Review screen: fields appear one after another, as if the OCR just filled them */
.fields label { animation: fb-rise var(--motion-base) var(--motion-ease) both; }
.fields label:nth-child(1) { animation-delay: 60ms; }
.fields label:nth-child(2) { animation-delay: 100ms; }
.fields label:nth-child(3) { animation-delay: 140ms; }
.fields label:nth-child(4) { animation-delay: 180ms; }
.fields label:nth-child(5) { animation-delay: 220ms; }
.fields label:nth-child(n+6) { animation-delay: 260ms; }
.fields input[value]:not([value=""]) { animation: fb-fill 900ms ease-out 300ms both; }

/* Approve and next: the form slides away before the next receipt loads */
.review.is-leaving { opacity: 0; transform: translateX(-24px); transition: opacity var(--motion-base) ease-in, transform var(--motion-base) ease-in; }

/* Interactions */
.btn, button.btn { transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
input, select, textarea { transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 107, 79, .18); }
tbody tr { transition: background-color var(--motion-fast) ease; }
tbody tr:hover { background: #f1efe7; }
.nav a { transition: color var(--motion-fast) ease; }

/* Busy state (upload, export): subtle shimmer, button stays clickable-safe via JS flag */
.btn.is-busy { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 200% 100%; animation: fb-shimmer 1.2s linear infinite; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}