/*
 * Экран загрузки. Владелец, 04.09: прежний React-прелоадер (Preloader.tsx)
 * стартовал только после загрузки всего JS-бандла — на 3G это ~4–8 секунд
 * ДО появления героя, то есть он замедлял сайт вместо того, чтобы маскировать
 * загрузку, плюс печатал русские подписи чертежа на англоязычной странице.
 * Здесь — статичная разметка прямо в index.html, вне React, и чистый CSS:
 * первый кадр появляется с первым пейнтом, без ожидания бандла.
 *
 * Спиннер «Hatch» — библиотека ldrs (uiball.com/ldrs), взят с сохранённой
 * владельцем страницы как есть (структура и @keyframes дословно), название
 * классов и цвет — свои, чтобы не столкнуться с .container/.line — общими
 * именами, уже занятыми в проекте (Tailwind .container и другие).
 */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefec;
  transition: opacity 0.4s ease;
}
:root[data-theme='dark'] #preloader {
  background: #08080a;
}
#preloader.pl-out {
  opacity: 0;
  pointer-events: none;
}

.pl-hatch {
  --uib-size: 40;
  --uib-color: #c43100;
  --uib-speed: 3.5s;
  --uib-stroke: 4.5;
  --uib-mult: calc(var(--uib-size) / var(--uib-stroke));
  --uib-stroke-px: calc(var(--uib-stroke) * 1px);
  --uib-size-px: calc(var(--uib-size) * 1px);
  position: relative;
  height: var(--uib-size-px);
  width: var(--uib-size-px);
}
:root[data-theme='dark'] .pl-hatch {
  --uib-color: #8fa8ff;
}

.pl-hatch-line {
  position: absolute;
  top: calc(50% - var(--uib-stroke-px) / 2);
  left: calc(50% - var(--uib-stroke-px) / 2);
  width: var(--uib-stroke-px);
  height: var(--uib-stroke-px);
  background-color: var(--uib-color);
  animation: pl-hatch-center var(--uib-speed) ease infinite;
}

.pl-hatch::before,
.pl-hatch::after {
  content: '';
  position: absolute;
  width: var(--uib-stroke-px);
  height: var(--uib-stroke-px);
  background-color: var(--uib-color);
  animation: pl-hatch-explore var(--uib-speed) ease infinite;
}
.pl-hatch::after {
  animation-delay: calc(var(--uib-speed) * -0.5);
}

@keyframes pl-hatch-center {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: scaleX(1) scaleY(1);
  }
  12.5%,
  62.5% {
    transform: scaleX(var(--uib-mult)) scaleY(1);
  }
  37.5%,
  87.5% {
    transform: scaleX(1) scaleY(var(--uib-mult));
  }
}

@keyframes pl-hatch-explore {
  0%,
  100% {
    transform: scaleX(1) scaleY(1) translate(0%, 0%);
    transform-origin: top left;
    top: 0;
    left: 0;
  }
  12.5% {
    transform: scaleX(var(--uib-mult)) scaleY(1) translate(0%, 0%);
    transform-origin: top left;
    top: 0;
    left: 0;
  }
  12.50001% {
    transform: scaleX(var(--uib-mult)) scaleY(1) translate(0%, 0%);
    transform-origin: top right;
    top: 0;
    left: initial;
    right: 0;
  }
  25% {
    transform: scaleX(1) scaleY(1) translate(0%, 0%);
    transform-origin: top right;
    top: 0;
    left: initial;
    right: 0;
  }
  37.5% {
    transform: scaleX(1) scaleY(var(--uib-mult)) translate(0%, 0%);
    transform-origin: top right;
    top: 0;
    left: initial;
    right: 0;
  }
  37.5001% {
    transform: scaleX(1) scaleY(var(--uib-mult)) translate(0%, 0%);
    transform-origin: bottom right;
    top: initial;
    bottom: 0;
    left: initial;
    right: 0;
  }
  50% {
    transform: scaleX(1) scaleY(1) translate(0%, 0%);
    transform-origin: bottom right;
    top: initial;
    bottom: 0;
    left: initial;
    right: 0;
  }
  62.5% {
    transform: scaleX(var(--uib-mult)) scaleY(1) translate(0%, 0%);
    transform-origin: bottom right;
    top: initial;
    bottom: 0;
    left: initial;
    right: 0;
  }
  62.5001% {
    transform: scaleX(var(--uib-mult)) scaleY(1) translate(0%, 0%);
    transform-origin: bottom left;
    top: initial;
    bottom: 0;
    left: 0;
  }
  75% {
    transform: scaleX(1) scaleY(1) translate(0%, 0%);
    transform-origin: bottom left;
    top: initial;
    bottom: 0;
    left: 0;
  }
  87.5% {
    transform: scaleX(1) scaleY(var(--uib-mult)) translate(0%, 0%);
    transform-origin: bottom left;
    top: initial;
    bottom: 0;
    left: 0;
  }
  87.5001% {
    transform: scaleX(1) scaleY(var(--uib-mult)) translate(0%, 0%);
    transform-origin: top left;
    top: 0;
    left: 0;
  }
}