/* Mirrored from solstice_tokens.dart: pre-Flutter UI cannot read Dart tokens. */
@font-face {
  font-family: Oswald;
  src: url('splash/Oswald.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --startup-bg: #FFF5E8;
  --startup-fg: #1A0E06;
  --startup-muted: #4A3020;
  --startup-accent: #FF7A00;
  --startup-end: #FFD000;
  --startup-halo: rgba(255, 122, 0, .14);
  --startup-brand: linear-gradient(90deg, #FF7A00, #FFB000, #FFD000);
}

@media (prefers-color-scheme: dark) {
  :root {
    --startup-bg: #0A0A0A;
    --startup-fg: #F5F5F5;
    --startup-muted: #C0A882;
    --startup-accent: #FF6B00;
    --startup-end: #FFE033;
    --startup-halo: rgba(255, 107, 0, .14);
    --startup-brand: linear-gradient(90deg, #FF6B00, #FF9A00, #FFE033);
  }
}

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

#splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  overflow: auto;
  background: var(--startup-bg);
  color: var(--startup-fg);
  font-family: Oswald, sans-serif;
  text-align: center;
}

.startup-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 408px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  margin: auto;
}

.startup-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(288px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}

.startup-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--startup-halo), transparent 72%);
}

.startup-mark picture { position: relative; display: block; line-height: 0; }
.startup-mark img { position: relative; display: block; width: 100%; height: auto; object-fit: contain; }
.startup-title { margin: 16px 0 12px; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .4px; background: var(--startup-brand); background-clip: text; -webkit-background-clip: text; color: transparent; }
.startup-tagline { margin: 0 0 32px; font-size: 14px; color: var(--startup-muted); }
.startup-track { width: 192px; height: 4px; margin: auto; overflow: hidden; border-radius: 999px; background: var(--startup-halo); }
.startup-track div { width: 45%; height: 100%; border-radius: inherit; background: #FF7A00; animation: startup-loading 1.5s ease-in-out infinite; }
#startup-status { margin: 16px 0 0; font-size: 14px; color: var(--startup-muted); }
#startup-reload { margin-top: 16px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 12px; background: var(--startup-accent); color: #1A0800; font: 500 16px Oswald, sans-serif; cursor: pointer; }
#startup-reload:focus-visible { outline: 2px solid var(--startup-fg); outline-offset: 4px; }
#splash.startup-failed .startup-track { display: none; }
#splash.startup-failed .startup-mark::before { animation: none; }

@keyframes startup-loading { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .startup-mark::before, .startup-track div { animation: none; }
  .startup-track div { width: 100%; }
}