/* Shown before Flutter loads, so it cannot read app/lib/theme/tokens.dart; values mirror HbColors. */
:root {
  --cream: #FAF7F2;
  --paper: #FFFFFF;
  --navy: #0A2F42;
  --slate: #4B5B67;
  --primary: #156082;
  --hairline: #DDE6EB;
  --dark-bg: #08131A;
  --mist: #E8F1F5;
}

body { margin: 0; background: var(--cream); }

#startup {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  box-sizing: border-box;
  background: var(--cream);
  color: var(--navy);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  text-align: center;
}

#startup .logo {
  width: min(64vw, 240px);
  height: min(64vw, 240px);
  box-sizing: border-box;
  padding: 6%;
  border-radius: 24px;
  background: var(--paper);
}

/* The strip holds nine 480px frames side by side; the window shows one at a time. */
#startup .frame { width: 100%; height: 100%; overflow: hidden; direction: ltr; }
#startup .reveal { display: block; width: 900%; height: 100%; max-width: none; }

/* Two seconds in all: eight steps over 1.6 s, then the finished mark holds until 2 s.
   startup.js keeps the overlay up for the same REVEAL_MS. */
#startup[data-motion="play"] .reveal {
  animation: labib-reveal 2s steps(8, jump-end) forwards;
}

@keyframes labib-reveal {
  0% { transform: translateX(0); }
  80%, 100% { transform: translateX(calc(-100% * 8 / 9)); }
}

#startup .status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 360px;
  min-height: 120px;
}

#startup .status > * { display: none; margin: 0; }
#startup[data-state="loading"] .loading,
#startup[data-state="loading"] .bar,
#startup[data-state="slow"] .slow,
#startup[data-state="slow"] .bar,
#startup[data-state="stalled"] .slow,
#startup[data-state="stalled"] .bar,
#startup[data-state="stalled"] #startup-retry,
#startup[data-state="failed"] .failed,
#startup[data-state="failed"] #startup-retry { display: block; }

#startup .slow,
#startup .loading[lang="en"],
#startup .failed[lang="en"] { color: var(--slate); }

#startup .bar {
  position: relative;
  width: 160px;
  height: 4px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hairline);
}

#startup .bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 2px;
  background: var(--primary);
  animation: labib-progress 1.4s ease-in-out infinite;
}

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

#startup-retry {
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

#startup-retry:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  body, #startup { background: var(--dark-bg); }
  #startup { color: var(--mist); }
  #startup .slow,
  #startup .loading[lang="en"],
  #startup .failed[lang="en"] { color: var(--mist); }
  #startup-retry:focus-visible { outline-color: var(--mist); }
}

@media (prefers-reduced-motion: reduce) {
  #startup .reveal { animation: none !important; transform: translateX(calc(-100% * 8 / 9)); }
  #startup .bar::after { animation: none; width: 100%; opacity: 0.4; }
}