/* ── splash.css — splash screen, mascot, status text ────────────────────
   The splash covers the full screen on first paint.
   Dismissed via body.splash-done after login/session resolves.
   The mascot lives inside #splash-icon-wrap.
   #splash-status appears only when the server is unreachable/starting.
────────────────────────────────────────────────────────────────────────── */

#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease 0.1s;
}

/* Splash stays up while login card is visible — only fades on splash-done */
body.ready #splash      { pointer-events: none; }
body.splash-done #splash { opacity: 0; pointer-events: none; }

/* ── Mascot wrap ──────────────────────────────────────────────── */
/* Wrap handles the float animation when login card opens */
#splash-icon-wrap {
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Mascot is black-on-white SVG — inverted for dark splash */
#mascot-wrap {
  width: 160px;
  height: 160px;
  filter: invert(1);
  pointer-events: all; /* re-enable: #splash has pointer-events:none */
}

@media (prefers-color-scheme: light) {
  #mascot-wrap { filter: none; }
}

/* ── Status text — shown when server is unreachable/starting ──── */
#splash-status {
  position: absolute;
  bottom: calc(50% - 8rem);
  margin: 0;
  text-align: center;
  font-size: var(--text-xs);
  font-family: var(--font);
  color: var(--muted);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#splash-status.visible { opacity: 1; }

/* ── Login card open — mascot and status float up ─────────────── */
#splash.login-visible #splash-icon-wrap {
  transform: translateY(-100%);
}
#splash.login-visible #splash-status {
  transform: translateY(-100%);
}