/* Static splash painted before any JavaScript (index.html, outside #app). It mirrors the welcome screen's layout,
   so when the welcome mounts and sets data-splash="done" the hand-over shows no jump. */
.sq-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(24px, 9vh, 96px)) 16px
    calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: linear-gradient(#cfe6ff, #e9e2ff 55%, #fff1f4);
  color: #2e2a3b;
  font: 650 1.0625rem/1.3 ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .sq-splash {
    background: linear-gradient(#2a2550, #1e1b2e);
    color: #f4f1fa;
  }
}

.sq-splash__title {
  margin: 0;
  font: 800 clamp(2.25rem, 9vw, 3.5rem) / 1.1 ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  text-align: center;
}

.sq-splash__logo {
  display: block;
  width: auto;
  max-width: min(78vw, 520px);
  height: auto;
  max-height: 22vh;
}

.sq-splash__group {
  align-self: end;
  width: auto;
  max-width: min(96vw, 900px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.sq-splash__status {
  display: flex;
  align-items: center;
  min-height: 64px;
  margin: 0;
}

:root[data-splash='done'] .sq-splash {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease-out,
    visibility 0s linear 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-splash='done'] .sq-splash {
    transition: none;
  }
}