/**
 * Static HTML shell before Vite bundles JS.
 * Palette: sortable.splash (#504AED from icon edges), sortable.text.primary, sortable.highlight (spinner).
 */

.sortable-splash-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: #504aed;
  transition: opacity 0.3s ease-out;
}

.sortable-splash-shell--hide {
  opacity: 0;
  pointer-events: none;
}

.sortable-splash-safe {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  min-height: min(100dvh, 100vh);
  width: 100%;
}

.sortable-splash-logo {
  width: 7.5rem;
  height: 7.5rem;
  max-width: min(7.5rem, 32vw);
  max-height: min(7.5rem, 32vw);
  object-fit: contain;
  display: block;
}

.sortable-splash-title {
  margin: 0;
  font-family:
    'Space Grotesk',
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f9fafb;
  text-align: center;
}

.sortable-splash-spinner {
  margin-top: 0.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 3px solid rgba(249, 250, 251, 0.22);
  border-top-color: #a78bfa;
  animation: sortable-splash-spin 0.75s linear infinite;
}

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