/**
 * Splash screen: fullscreen overlay with title and progress bar.
 * See docs/plans/app-style-wrap-fsd-refactor.md
 */

.splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--color-bg, #0a0a0a);
  color: var(--color-text, #fff);
  font-family: var(--font-sans, system-ui, sans-serif);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out), visibility var(--motion-duration-slow) var(--motion-ease-out);
}

.splash.splash--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-text, #fff);
}

.splash__progress-wrap {
  width: min(17.5rem, 80vw);
  height: 0.25rem;
  background: var(--color-border, #2a2a2a);
  border-radius: 0.125rem;
  overflow: hidden;
}

.splash__progress-bar {
  height: 100%;
  width: calc(var(--splash-progress, 0) * 1%);
  background: var(--color-accent, #00ff88);
  border-radius: 0.125rem;
  transition: width var(--motion-duration-fast) var(--motion-ease-out);
}

.splash__percent {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}