/* Jank (public/js/chaos.js): splash, cookie banner, help strip, ticker and a spinning loading word.
   Like the rest of Southbag, it ignores prefers-reduced-motion. */

/* ── Splash (Banking's loader) ─────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 5000; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; background: #000; color: #eee; transition: opacity 0.5s ease-out; }
.splash.leaving { opacity: 0; }
.splash img { width: min(720px, 92vw); height: min(405px, 52vw); box-shadow: none; }
.splash-track { width: min(720px, 92vw); height: 6px; background: #333; box-shadow: none; }
.splash-bar { width: 0; height: 100%; background: var(--sb-blue); box-shadow: none; transition: width 0.12s linear; }
.splash-status { color: #ccc; margin: 0; }
html.splash-open, html.splash-open body { overflow: hidden; }

/* ── Cookie banner ─────────────────────────────────────────────────── */
.cookie-banner { position: fixed; left: 16px; bottom: 16px; z-index: 900; width: min(440px, calc(100vw - 32px)); padding: 14px 16px; border: 3px ridge var(--sb-ridge); background: var(--sb-paper); transform: rotate(-0.6deg); }
.cookie-banner h3 { margin: 0 0 4px; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; box-shadow: none; }
@media (max-width: 600px) { .cookie-banner .btn-large { font-size: 1.1rem; padding: 0.45rem 1rem; } }
.cookie-list { max-height: 50vh; overflow-y: auto; columns: 2 220px; font-size: 0.85rem; box-shadow: none; }
.cookie-row { display: block; transform: none; margin: 2px 0; break-inside: avoid; }

/* ── Help strip and ticker ─────────────────────────────────────────── */
.help-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 6px 12px; border-bottom: 2px dashed #000; box-shadow: none; }
:root[data-theme='dark'] .help-strip { border-bottom-color: var(--sb-hairline); }
@media (max-width: 600px) { .help-strip .btn-large { font-size: 1rem; padding: 0.35rem 0.9rem; } }
.ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--sb-hairline); background: var(--sb-paper-nav); font-size: 0.8rem; box-shadow: none; }
.ticker-track { display: inline-flex; gap: 4rem; padding: 3px 0 3px 100%; box-shadow: none; }
.ticker-track span { box-shadow: none; }

/* Service Table's spinner: the word spins, around its left edge. */
.loading .spin { display: inline-block; transform-origin: left center; }

/* ── Motion ────────────────────────────────────────────────────────── */
/* Sidebar links move in from the left one after another, slowly and linearly, on the first page. */
@keyframes nav-arrive { from { translate: -115% 0; } to { translate: 0 0; } }
.south-nav.arriving { overflow: hidden; }
.south-nav.arriving li { animation: nav-arrive 1.2s linear both; animation-delay: calc(var(--i, 0) * 0.15s); }
@keyframes chaos-ticker { to { transform: translateX(-100%); } }
.ticker-track { animation: chaos-ticker 60s linear infinite; }
.help-strip button:nth-child(3) { animation: quiet-blink 2.4s linear infinite; }
.loading .spin { animation: spin 1.4s linear infinite; }