/* OpenLock cold-start splash.
*
* Shown from the very first paint (the static #splash markup lives in index.html)
* until app.js boots and removes it. This file sits at the site root and is loaded
* via a same-origin in , so it paints BEFORE the content-hashed JS/CSS
* bundle finishes loading — which is what kills the blank-white flash on a cold PWA
* launch. CSP-safe: an external stylesheet, no inline styles anywhere.
*
* Design note: the splash is ALWAYS the dark brand design (matches the app's default
* dark theme + the manifest background_color, so it blends with the OS splash). The
* animations below are purely additive — the logo and wordmark sit visible at rest, so
* the splash always SHOWS even if the animation engine is disabled; motion is a bonus,
* never a prerequisite for content appearing. */
#splash {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: #0f1115; /* matches manifest background_color + the OS splash on Android */
color: #f1f2f5;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
env(safe-area-inset-left);
opacity: 1;
transition: opacity 0.32s ease;
-webkit-tap-highlight-color: transparent;
/* Safety net: if the JS bundle never boots (blocked/broken), don't trap the user
behind a frozen splash forever — fade it away after a long grace period so the
app shell (or the