/* The screen shown while the app opens (docs/TODO.md item 35).

   Markup in index.html and rules here, so it is painted by the parser before a
   line of JavaScript has run — which is the whole point. Capacitor's splash
   plugin would cover the native side only, and ohmmy.app would still show
   white; this is one thing on both, and it is the web page's own answer.

   Nothing here waits for anything: the page is HTML plus two small local
   stylesheets, and the 176 KB of curriculum that used to be the wait is now a
   module loaded after the first paint rather than markup parsed before it. */
#boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:15px;
  background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;}
/* applySettings() has not run, so there is no data-theme yet and the palette
   is still the light one. A dark phone would get the white flash this screen
   exists to remove, so before the app has decided, the system decides — which
   is what the default 'system' setting resolves to anyway. System colours
   rather than a second copy of the dark palette: duplicated hexes here would
   be a second place for the theme to be changed and missed. */
@media(prefers-color-scheme:dark){
  html:not([data-theme]) #boot{color-scheme:dark;background:Canvas;color:CanvasText;}
}
#boot svg{width:46px;height:46px;}
.boot-name{font-family:'Space Grotesk',system-ui,sans-serif;font-size:19px;font-weight:700;}
.boot-track{width:132px;height:4px;border-radius:4px;overflow:hidden;}
.boot-fill{width:38%;height:100%;border-radius:4px;background:var(--amber);
  animation:boot-slide 1.15s ease-in-out infinite;}
@keyframes boot-slide{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
/* Said only if it has actually taken too long. The reduced-motion rule below
   deliberately does not touch this one: a moving bar is decoration, and a
   sentence explaining why nothing is happening is not. */
.boot-slow{max-width:17rem;margin:0;text-align:center;font-size:12.5px;line-height:1.5;
  color:var(--ink-soft);opacity:0;animation:boot-say 1ms linear 8s forwards;}
@keyframes boot-say{to{opacity:1}}
/* html[data-motion] is set by applySettings, which by definition has not run
   yet, so this reads the system preference directly. */
@media(prefers-reduced-motion:reduce){
  .boot-fill{animation:none;width:100%;}
}