/* Shown from the first paint until the app renders over it: plain HTML and
   this file, no script. The app replaces #app's contents, and with them this. */
@font-face { font-family: Bricolage; src: url('/fonts/BricolageGrotesque.ttf'); font-display: swap; }
html { background: #f7f0df; }
.splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(circle at 80% 0, #fff9e9 0, transparent 35%), #f7f0df; color: #1f2428; }
.splash img { width: 136px; height: auto; animation: splash-breathe 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.splash b { font: 700 30px/1 Bricolage, system-ui, sans-serif; letter-spacing: -0.01em; }
.splash i { position: relative; width: 120px; height: 3px; overflow: hidden; border-radius: 3px; background: #1f24281a; }
.splash i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: #e8a916; animation: splash-slide 1.1s ease-in-out infinite; }
@keyframes splash-breathe { 50% { transform: scale(1.035); } }
@keyframes splash-slide { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .splash img, .splash i::after { animation: none; } .splash i::after { left: 30%; } }
/* The compact wallet (toolbar popup, phone app) is dark. */
html:has(.splash.dark) { background: #15181b; }
.splash.dark { background: #15181b; color: #f8f2e4; }
.splash.dark i { background: #ffffff1f; }