/* The branded first paint (index.html), in the app's own colours: blush by day, plum night in dark mode. */
:root {
  color-scheme: light dark;
  --splash-background: #fff5f8;
  --splash-accent: #6e1f55;
  --splash-text: #2a1630;
}

@media (prefers-color-scheme: dark) {
  :root {
    --splash-background: #1a0f1a;
    --splash-accent: #ffaedb;
    --splash-text: #fff5f8;
  }
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--splash-background);
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--splash-background);
  color: var(--splash-text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  text-align: center;
}

#splash img {
  border-radius: 22px;
}

.splash-bar {
  position: relative;
  width: 96px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--splash-accent) 20%, transparent);
}

.splash-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 3px;
  background: var(--splash-accent);
  animation: splash-slide 1.2s ease-in-out infinite;
}

@keyframes splash-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-bar::after {
    animation: none;
    width: 100%;
  }
}

.splash-failed {
  display: none;
  margin: 0 24px;
}

#splash.failed .splash-bar {
  display: none;
}

#splash.failed .splash-failed {
  display: block;
}