/* Заставка на время загрузки.

   Страница прячется целиком, пока скрипт не подставит язык, тему и данные, —
   иначе видно, как русский текст сменяется выбранным языком, а карточки
   доезжают пустыми. Работает без JS: стиль вешается на html и снимается
   классом ready. */

html:not(.ready) body { visibility: hidden; animation: loaderGiveUp 0s linear 8s forwards; }

html:not(.ready)::before {
  content: "STALGUIDE";
  animation: loaderHide 0s linear 8s forwards;
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: var(--bg, #060809);
  color: var(--tx3, #5c686b);
  font-family: var(--f-disp, "Oswald", sans-serif);
  font-size: 15px;
  letter-spacing: .42em;
  text-indent: .42em;
  padding-top: 132px; /* уводим подпись из-под рамки, чтобы они не наезжали друг на друга */
}

/* угловые скобы — тот же приём, что у рамок на страницах */
html:not(.ready)::after {
  content: "";
  position: fixed;
  z-index: 9001;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -66px 0 0 -38px;
  border: 1px solid var(--line2, #2e3639);
  border-top: 2px solid var(--a, #f55464);
  animation: loaderTurn 1.1s cubic-bezier(.5, .1, .4, .9) infinite, loaderHide 0s linear 8s forwards;
}

@keyframes loaderTurn {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(.88); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Исчезает мягко, но анимируем не сам body: любая анимация на нём создаёт
   контекст наложения, и зерно фона (body::before с mix-blend-mode) начинает
   смешиваться внутри слоя — фон становится заметно шумнее. */
html.ready body > *:not(#tip) { animation: loaderShow .28s ease both; }

/* Если скрипт страницы не выполнился — заставка снимается сама через восемь
   секунд. Без этого мёртвый JS означал бы навсегда пустую страницу. */
@keyframes loaderHide {
  to { opacity: 0; visibility: hidden; }
}

@keyframes loaderGiveUp {
  to { visibility: visible; }
}

@keyframes loaderShow {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.ready)::before, html:not(.ready)::after, html.ready body > *:not(#tip) { animation: none; }
}