/* First-paint loading splash, shown in #root before the JS bundle mounts (#1338).
   Without it, #root is empty until React mounts (~1.9s on a cold throttled load),
   so the visitor stares at a blank themed screen that reads as "nothing loading".
   React's createRoot replaces #root's contents on mount, so the splash is removed
   the moment the app renders.

   A same-origin stylesheet (not an inline <style>) so a future `style-src 'self'`
   CSP (#278) covers it, mirroring theme-init.js (#284). It is render-blocking but
   tiny; the fonts load async (load-fonts.js) so this splash is never gated on the
   third-party font hop. Background is transparent so the theme bg set by
   theme-init.js / styles.css shows through in both light and dark. */

.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loading__mark {
  width: 56px;
  height: 56px;
  animation: app-loading-pulse 1.4s ease-in-out infinite;
}

@keyframes app-loading-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__mark {
    animation: none;
  }
}

.app-loading__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}