/* ── Заставка загрузки ─────────────────────────────────────
   Знак сайта во весь экран: батарейка стоит по центру, делает
   одно движение влево, из-под неё выползает название, полоски
   заряжаются от красной к зелёной, в конце одна вспышка.

   Устройство сцены. Ячейка и окно надписи лежат в одном блоке
   .ld__pin, который и двигается. Окно начинается от левого края
   ячейки и тянется вправо; строка внутри него стартует из-под
   корпуса. Корпус непрозрачный и выше по слою, поэтому буквы
   именно выползают из-за него, а не проезжают поверх. */

.ld {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--brand, #5d6238);
  overflow: hidden;
}

.ld__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── батарейка ──
   Стоит ровно по центру экрана и делает одно движение влево.
   Ни всплытия, ни масштаба: лишние движения мешают читать знак,
   а сдвиг вправо выглядит ошибкой. */

.ld__pin {
  position: relative;
  flex: none;
  color: #f4f5e8;
  transition: transform .34s cubic-bezier(.45, 0, .2, 1);
}

.ld--open .ld__pin { transform: translateX(var(--shift, 0)); }

/* Пропорции те же, что у .logo__cell в шапке, только крупнее.
   Величины в rem, а не в em: em считались бы от собственного
   font-size, и радиус превращал бы ячейку в овал. */
.ld__cell {
  position: relative;
  z-index: 2;
  width: 10.4rem;
  height: 15.2rem;
  border: 11px solid currentColor;
  border-radius: 3.3rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 1.3rem;
  padding: 0 1.75rem;
  /* Непрозрачный фон: буквы прячутся за корпусом, а не
     просвечивают сквозь него. */
  background: var(--brand, #5d6238);
}

/* клемма сверху */
.ld__cell::before {
  content: "";
  position: absolute;
  top: -2.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.2rem;
  height: 2.2rem;
  background: currentColor;
  border-radius: .8rem .8rem 0 0;
}

/* ── полоски заряда ──
   Загораются снизу вверх и меняют цвет от красного к зелёному.
   Анимацией, а не из JS: на странице с трёхмерными моделями
   главный поток замирает, и все три вспыхивали разом. */

.ld__bar {
  display: block;
  height: 1.55rem;
  border-radius: .85rem;
  background: rgba(244, 245, 232, .24);
}

.ld__bar:nth-child(1) { --c: #e2543f; }   /* нижняя — красная */
.ld__bar:nth-child(2) { --c: #f0c24a; }   /* средняя — жёлтая */
.ld__bar:nth-child(3) { --c: #c6f24e; }   /* верхняя — зелёная */

.ld--open .ld__bar { animation: ldLit .22s ease forwards; }

/* Заряд начинается после того, как надпись доехала:
   сдвиг .34 + пауза .1 + выезд .42 = .86 с. */
.ld--open .ld__bar:nth-child(1) { animation-delay: .9s; }
.ld--open .ld__bar:nth-child(2) { animation-delay: 1.25s; }
.ld--open .ld__bar:nth-child(3) { animation-delay: 1.6s; }

@keyframes ldLit {
  to {
    background: var(--c);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 55%, transparent);
  }
}

/* ── вольтаж ──
   Цифры над плюсовой клеммой: показывают, как батарея набирает
   напряжение от 10 до 14 вольт по мере заряда. Появляются
   вместе с первой полоской. */

.ld__volt {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4.2rem);
  transform: translateX(-50%);
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  color: #f4f5e8;
  opacity: 0;
  transition: opacity .3s ease;
}

.ld--open .ld__volt {
  opacity: 1;
  transition-delay: .85s;
}

.ld__volt i {
  font-style: normal;
  margin-left: .2em;
  opacity: .65;
}

/* ── надпись ──
   Окно неподвижно и начинается от левого края ячейки. Строка
   внутри едет слева направо, выползая из-под корпуса. */

.ld__word {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(10.4rem + 2.4rem + var(--w, 40rem));
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 1;
}

.ld__line {
  display: block;
  /* Строка начинается за правым краем ячейки. */
  padding-left: calc(10.4rem + 2.4rem);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: #fff;
  /* Задержка равна сдвигу плюс пауза 0.1 с: строка трогается
     только после остановки батарейки. */
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.35, 0, .2, 1) .44s;
}

.ld--open .ld__line { transform: translateX(0); }

.ld__line sup { font-size: .5em; vertical-align: super; }

/* LAB второй строкой, как в логотипе */
.ld__line b { display: block; font-weight: inherit; }

/* ── финал ──
   Батарея зарядилась — экран уходит. Без вспышки: она осталась
   от молнии, а без молнии белый кадр ничего не означал и
   читался как лишнее моргание. */

.ld--off {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

@media (prefers-reduced-motion: reduce) {
  .ld__pin,
  .ld__line { transition: none; }
  .ld--open .ld__bar { animation: none; background: var(--c); }
  .ld--off { transition: opacity .2s ease; }
}