/* Заставка: пока собирается город, показываем, что именно и сколько.
   Отдельный файл, чтобы не мешать styles.css: палитра и шрифты те же. */

#splash {
  position: fixed; inset: 0; z-index: 40; display: grid; align-content: center; justify-items: center;
  gap: 16px; padding: 24px; background: var(--wall, #fff); color: var(--ink, #2c2f2a);
  font-family: var(--sans, system-ui, sans-serif); text-align: center;
  transition: opacity .55s ease; pointer-events: none;
}
#splash.gone { opacity: 0; }
#splash .mark { font-family: var(--serif, Georgia, serif); font-weight: 400; line-height: 1.06;
  font-size: clamp(30px, 5.4vw, 56px); margin: 0; }
#splash .place { color: var(--muted, #5f625c); font-size: 15px; max-width: 44ch; }
#splash .track { width: min(520px, 76vw); height: 3px; border-radius: 3px; overflow: hidden;
  background: var(--rule, #e4e1da); }
#splash .fill { height: 100%; width: 0; background: var(--sun, #b04f3e); transition: width .35s ease; }
#splash .count { color: var(--teal, #345a60); font-size: 14px; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; }
#splash .src { color: var(--faint, #737470); font-size: 12px; max-width: 52ch; line-height: 1.5; }
#splash .slow { color: var(--muted, #5f625c); font-size: 12.5px; }

/* Строка приложения показывает тот же процент — отодвигаем её вверх, чтобы она читалась как часть заставки.
   Класс ставит только splash.js: если он не загрузился, разметка остаётся прежней. */
body.splash-on #loading { transform: translate(-50%, -104px); }
.loading { transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  #splash, #splash .fill, .loading { transition: none; }
}