/* boot.css: the first paint, before any of the app has parsed. The grounds are the same paper and near-black the
   app's tokens carry (src/index.css) and boot.js picks the theme before this stylesheet is applied. The splash
   shows the emblem, the same artwork the sign-in screen shows (src/styles/auth.css draws it from the same two
   files); index.html preloads the file that matches the system theme so it is on screen with the first frame. */
html { background: #f7f6f2; }
html[data-theme='dark'] { background: #141311; }
#splash { position: fixed; inset: 0; display: grid; place-items: center; }
#splash .emblem { width: 120px; height: 80px; background: url('/brand/emblem-light.png') center / contain no-repeat; animation: pulse 1.2s ease-in-out infinite; }
html[data-theme='dark'] #splash .emblem { background-image: url('/brand/emblem-dark.png'); }
#splash .slow { position: absolute; bottom: 48px; left: 0; right: 0; text-align: center; font: 13px Inter, system-ui, sans-serif; color: #948e84; opacity: 0; animation: slow 0s 4s forwards; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.94); } }
@keyframes slow { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #splash .emblem { animation: none; } }