/*
 * Прелоадер — тот же, что у Арины: тёмный экран, из центра вширь растёт
 * линия, внизу счётчик 0 → 100 %. На 100 % линия разворачивается вертикально
 * и вытягивается на всю высоту экрана, а тёмные шторки разъезжаются от неё в
 * стороны. Логика — js/preloader.js.
 *
 * Показывается только при классе rh-preload на <html> (его ставит скрипт в
 * <head>): без JS прелоадера нет вовсе, а если скрипт упадёт, страховочная
 * анимация уберёт его через 10 секунд.
 */

.rh-pre {
  display: none;
}

.rh-preload .rh-pre {
  --pre-ease: cubic-bezier(0.77, 0, 0.18, 1);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  animation: rh-pre-failsafe 0s linear 10s forwards;
}

@keyframes rh-pre-failsafe {
  to {
    visibility: hidden;
  }
}

/* Шторки — левая и правая половины, с нахлёстом по шву */
.rh-pre__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: #0b0d12;
  transition: transform 0.6s var(--pre-ease);
}

.rh-pre__half--l {
  left: 0;
}

.rh-pre__half--r {
  right: 0;
}

/* Линия: длина по горизонтали — ширина экрана, растёт по --p (0…1) */
.rh-pre__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 2px;
  margin: -1px 0 0 -50vw;
  background: #8fdcff;
  box-shadow:
    0 0 10px rgba(143, 220, 255, 0.6),
    0 0 26px rgba(143, 220, 255, 0.25);
  transform: rotate(0deg) scaleX(var(--p, 0));
}

.rh-pre__count {
  position: absolute;
  left: 40px;
  bottom: 32px;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(56px, 6.7vw, 120px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s;
}

/* 100 %: линия встаёт вертикально и дотягивается до верха и низа экрана.
   --len — высота экрана в долях его ширины, ставит скрипт */
.rh-pre.is-turning .rh-pre__line {
  transform: rotate(90deg) scaleX(var(--len, 1));
  transition: transform 0.6s var(--pre-ease);
}

.rh-pre.is-turning .rh-pre__count {
  opacity: 0;
}

/* …и шторки разъезжаются в стороны от неё */
.rh-pre.is-opening .rh-pre__half--l {
  transform: translateX(-100%);
}

.rh-pre.is-opening .rh-pre__half--r {
  transform: translateX(100%);
}

.rh-pre.is-opening .rh-pre__line {
  opacity: 0;
  transition:
    transform 0.6s var(--pre-ease),
    opacity 0.3s;
}

@media (max-width: 640px) {
  .rh-pre__count {
    left: 20px;
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rh-pre__half,
  .rh-pre__line,
  .rh-pre.is-turning .rh-pre__line {
    transition: none !important;
  }
}