/* =========================================================================
    Motion + loaders.
    Source: Electric Lime Visual Style Reference, Appendix C.
    Only change: hard-coded white replaced with var(--panel).
    ========================================================================= */
@keyframes fade-in   { from { opacity: 0; } }
@keyframes pop-in    { from { opacity: 0; transform: scale(0.95) translateY(6px); } }
@keyframes rise-in   { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes drop-in   { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pane-in   { from { opacity: 0; transform: translateY(6px); } }
@keyframes page-in   { from { opacity: 0; transform: translateY(12px); } }
@keyframes sheet-up  { from { transform: translateY(100%); } }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes shimmer   { to { background-position: -300% 0; } }
@keyframes orbit     { to { transform: rotate(360deg); } }
@keyframes blink     { 50% { opacity: 0.25; } }
@keyframes wave-bar  { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
@keyframes indet     { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@keyframes float     { 50% { transform: translateY(-8px); } }
@keyframes mesh-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.06); } 100% { transform: translate(-2%, 2%) scale(1); } }
@keyframes shake     { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes tick-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* stagger helper: style="--i: 0..n" on children */
.stagger > * { animation: rise-in var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* ---------- brand wave loader (lime bars, ink outline, every 3rd white) ---------- */
.wave-loader { display: inline-flex; align-items: center; gap: 3px; height: 30px; }
.wave-loader i { display: block; width: 7px; height: 100%; border-radius: 4px; background: var(--lime); border: 1.5px solid var(--ink); animation: wave-bar 1.4s ease-in-out infinite alternate; transform-origin: center; }
.wave-loader i:nth-child(3n + 1) { background: var(--panel); }
.wave-loader i:nth-child(5n + 1) { height: 55%; } .wave-loader i:nth-child(5n + 2) { height: 85%; }
.wave-loader i:nth-child(5n + 3) { height: 100%; } .wave-loader i:nth-child(5n + 4) { height: 70%; } .wave-loader i:nth-child(5n) { height: 90%; }
.wave-loader i:nth-child(1) { animation-delay: 0s } .wave-loader i:nth-child(2) { animation-delay: .11s } .wave-loader i:nth-child(3) { animation-delay: .22s }
.wave-loader i:nth-child(4) { animation-delay: .33s } .wave-loader i:nth-child(5) { animation-delay: .44s } .wave-loader i:nth-child(6) { animation-delay: 0s }
.wave-loader i:nth-child(7) { animation-delay: .11s } .wave-loader i:nth-child(8) { animation-delay: .22s } .wave-loader i:nth-child(9) { animation-delay: .33s }

/* ---------- spinner (inline, buttons, small areas) ---------- */
.spinner { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 20%, transparent); border-top-color: var(--accent-ink); animation: orbit 0.8s linear infinite; }
.spinner.lg { width: 28px; height: 28px; border-width: 3px; }

/* ---------- dots (typing / "thinking") ---------- */
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); animation: blink 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }

/* ---------- progress ---------- */
.progress-track { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.progress-fill { height: 100%; background: var(--lime); border-radius: 999px; transition: width 0.25s var(--ease); }
.progress.indeterminate .progress-fill { width: 35% !important; animation: indet 1.2s var(--ease) infinite; }
.progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- ring progress (svg) ---------- */
.ring circle.track { stroke: var(--panel-2); }
.ring circle.value { stroke: var(--lime); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.25s var(--ease); }

/* ---------- skeleton ---------- */
.skeleton { border-radius: var(--r-sm); background: linear-gradient(100deg, var(--panel-2) 30%, var(--hover) 50%, var(--panel-2) 70%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; }

/* ---------- reduced motion: everything collapses to near-instant ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}