/*
 * Pre-hydration app loader. Rendered in the SSR'd shell (#app-loader) so it
 * paints on the very first frame — before the JS bundle and the lazy theme
 * chunk load — and is removed once React mounts. Bridges the otherwise-blank
 * gap on every full page boot (e.g. the Become -> /dashboard hard redirect),
 * using the same logo as the in-app loaders so there is no visual jump.
 */
#app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Static, dead-centered logo — matches the in-app loader (pages/become) so it
 * stays put across the hydration boundary and the Become -> /dashboard reboot.
 * No animation: a fading/pulsing logo reads as flicker over the short window. */
#app-loader img {
  width: auto;
  height: 160px;
}

/* Optional caption, rendered by the shell only on /become (see __root.tsx).
 * Mirrors the Mantine <Title order={4}> in pages/become pixel-for-pixel
 * (Poppins 20/24, weight 600, positioned below the centered logo) so that when
 * Become hydrates on top, the text does not shift — no toggle/flicker. */
#app-loader .app-loader-text {
  position: absolute;
  top: calc(50% + 96px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--mantine-color-text, #121214);
}