/* Загрузочный экран. Показывается один раз за сессию (решает маленький скрипт в <head>).
   Без JS, при повторном заходе и при «уменьшить движение» экран не появляется вовсе.
   Логотип в горизонтальной версии: знак раскрывается слева направо, буквы поднимаются,
   затем логотип улетает на своё место в шапке, а фон уходит вверх. */

.preloader {
  display: none;
}
/* .is-running добавляет скрипт: экран остаётся на месте, пока фон не доедет вверх,
   даже когда html уже потерял класс preloading (логотип в шапке показывается раньше) */
html.preloading .preloader,
.preloader.is-running {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: all;
}
.preloader.is-leaving {
  pointer-events: none;
}
html.preloading {
  overflow: hidden;
}
/* настоящий логотип в шапке ждёт, пока на него приземлится логотип с загрузочного экрана */
html.preloading .site-header .logo {
  visibility: hidden;
}

/* ---------- Фон: чёрный и фирменный градиент ---------- */
.pl-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  border-radius: 0 0 var(--radius-photo) var(--radius-photo);
  transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1);
}
.preloader.is-leaving .pl-bg {
  transform: translateY(-102%);
}
/* слой больше экрана и медленно дрейфует: живой «меш» без тяжёлого блюра */
.pl-mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 48% at 16% 84%, var(--ember-glow) 0%, rgb(253 140 10 / 0) 72%),
    radial-gradient(52% 62% at 8% 96%, var(--sunset-blaze) 0%, rgb(249 88 0 / 0) 76%),
    radial-gradient(44% 52% at 92% 8%, rgb(160 60 0 / 0.65) 0%, rgb(160 60 0 / 0) 72%),
    radial-gradient(34% 42% at 74% 72%, rgb(249 88 0 / 0.4) 0%, rgb(249 88 0 / 0) 72%);
  will-change: transform;
  animation: pl-drift 7s ease-in-out infinite alternate;
}
@keyframes pl-drift {
  0% { transform: translate3d(-3%, 2%, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.12) rotate(6deg); }
}

/* ---------- Логотип ---------- */
.pl-logo {
  --w: clamp(200px, 22vw, 340px);
  position: relative;
  z-index: 1;
  width: var(--w);
  aspect-ratio: 120 / 50;
  color: var(--pure-white);
  will-change: transform;
}
.pl-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* знак: лучи «раскрываются» слева направо, как в ролике про ребрендинг */
.pl-mark {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: pl-sweep 1.1s 0.2s cubic-bezier(0.65, 0, 0.25, 1) forwards;
}
@keyframes pl-sweep {
  to { clip-path: inset(0 0 0 0); }
}
/* надпись: буквы поднимаются по очереди */
.pl-l {
  opacity: 0;
  transform: translateY(45%);
  transform-box: fill-box;
  animation: pl-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.75s + var(--i) * 0.09s);
}
@keyframes pl-rise {
  to { opacity: 1; transform: none; }
}