/* =========================================================
   preloader.css — заставка до готовности страницы.
   Тот же пилон, что в hero, но собран на CSS: никакого canvas,
   чтобы заставка не отнимала кадры у сцены, которую ждём.
   Анимации только по transform/opacity — их считает композитор.
   ========================================================= */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 45%, var(--hero-glow), transparent 70%),
    var(--bg);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__box {
  display: grid;
  justify-items: center;
  gap: 26px;
}

/* ---------- Пилон ---------- */
.pylon {
  position: relative;
  width: 86px;
  height: 116px;
  animation: pylon-float 3.2s ease-in-out infinite;
}

/* ореол под кристаллом */
.pylon::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--blue-rgb) / .35), transparent 62%);
  filter: blur(6px);
  animation: pylon-glow 3.2s ease-in-out infinite;
}

/* грань кристалла: силуэт вырезан clip-path, как у пилонов в сцене */
.pylon__face {
  position: absolute;
  inset: 0;
}
.pylon__face--l {
  clip-path: polygon(50% 0, 50% 100%, 18% 88%, 0 38%);
  background: linear-gradient(160deg, rgb(var(--blue-lt-rgb) / .85), rgb(var(--blue-rgb) / .25));
}
.pylon__face--r {
  clip-path: polygon(50% 0, 100% 38%, 82% 88%, 50% 100%);
  background: linear-gradient(200deg, rgb(var(--violet-rgb) / .9), rgb(var(--violet-rgb) / .3));
}

/* светящееся ребро по оси */
.pylon__edge {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--ink), rgb(var(--paint) / .15));
  box-shadow: 0 0 12px rgb(var(--blue-lt-rgb) / .9);
}

/* блик, стекающий сверху вниз */
.pylon__scan {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 38%, 82% 88%, 50% 100%, 18% 88%, 0 38%);
  background: linear-gradient(180deg, transparent 35%, rgb(var(--paint) / .55) 50%, transparent 65%);
  background-size: 100% 260%;
  animation: pylon-scan 2.1s linear infinite;
}

/* платформа-гексагон */
.pylon__base {
  position: absolute;
  left: 50%; bottom: -22px;
  width: 108px; height: 40px;
  transform: translateX(-50%);
  border: 1px solid rgb(var(--blue-lt-rgb) / .45);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  opacity: .55;
}

/* ---------- Название и полоса ---------- */
.preloader__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--ink);
}

.preloader__bar {
  position: relative;
  display: block;
  width: 160px;
  height: 2px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.preloader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--blue-lt), var(--violet), transparent);
  animation: preloader-run 1.25s ease-in-out infinite;
}

/* =========================================================
   Пока заставка на экране, вступительные анимации hero стоят
   на паузе — иначе они отыграют «в стол», за перекрытым экраном.
   ========================================================= */
body:not(.is-ready) .nav,
body:not(.is-ready) .hero__canvas,
body:not(.is-ready) .word > span,
body:not(.is-ready) .hero__eyebrow,
body:not(.is-ready) .hero__sub,
body:not(.is-ready) .hero__actions,
body:not(.is-ready) .hero__hint,
body:not(.is-ready) .card {
  animation-play-state: paused;
}

@keyframes pylon-float {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}
@keyframes pylon-glow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes pylon-scan {
  from { background-position: 0 -160%; }
  to   { background-position: 0 160%; }
}
@keyframes preloader-run {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
  .pylon, .pylon::before, .pylon__scan, .preloader__bar i { animation: none; }
  .preloader { transition: none; }
}