/* The start screen (index.html's static splash, and components/Splash.tsx,
   which draws the same markup once React runs).

   A plain same-origin file rather than part of theme.css: it has to style the
   splash before the bundle — and, in dev, before Vite has injected any CSS at
   all. Self-contained for the same reason: the theme tokens may not exist yet,
   so every var() carries its own fallback.

   The mark is exactly 96 px and exactly centred, because that is where the
   backend draws it on the iPhone launch images (services/branding.py,
   SPLASH_MARK_CSS): the launch image hands over to this page without the logo
   moving. The name and the spinner hang below it so they never push it. */

.hodo-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  /* White: the manifest's background_color, which Android paints its launch
     screen in and the iPhone launch images use. */
  background: #FFFFFF;
  color: #0B0F19;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: 1;
  transition: opacity 180ms ease-out;
}

[data-mode="dark"] .hodo-splash {
  background: #0B0F19;
  color: #F4F4F6;
}

.hodo-splash--out {
  opacity: 0;
  pointer-events: none;
}

.hodo-splash-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* AppLogo's 10 px radius on 36, scaled. */
  border-radius: 27px;
  background: var(--primary, #4F46E5);
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

/* An uploaded logo is drawn as it is, like on the launch images. */
.hodo-splash-mark--logo {
  background: transparent;
  border-radius: 0;
}

.hodo-splash-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hodo-splash-name {
  position: absolute;
  top: calc(50% + 68px);
  left: 16px;
  right: 16px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hodo-splash-spinner {
  position: absolute;
  top: calc(50% + 116px);
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  box-sizing: border-box;
  border: 3px solid rgba(127, 127, 140, 0.25);
  border-top-color: var(--primary, #4F46E5);
  border-radius: 50%;
  animation: hodo-splash-spin 0.8s linear infinite;
}

/* The maker's line, as in the footer (ui/Credit.tsx) but one size up: on an
   otherwise empty screen 11 px reads as dust. */
.hodo-splash-credit {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: var(--fg-muted, #5B5F6B);
  user-select: none;
}

[data-mode="dark"] .hodo-splash-credit {
  color: var(--fg-muted, #B7BAC4);
}

@keyframes hodo-splash-spin {
  to { transform: rotate(360deg); }
}

/* Before React runs, theme-boot.js overrides these two with the cached app
   name and logo; with nothing cached, the shipped name stands. */
.hodo-splash-mark[data-boot]::after { content: "H"; }
.hodo-splash-name[data-boot]::after { content: "Hodorouter"; }

/* No fade, and a spinner that turns slowly rather than not at all: it is the
   only thing saying the app is still working. */
@media (prefers-reduced-motion: reduce) {
  .hodo-splash { transition: none; }
  .hodo-splash-spinner { animation-duration: 2.4s; }
}