/* ==========================================================================
   Konurat Construction — logo preloader
   Анимация сборки логотипа «KC» (в стиле референса Avangard):
   сегменты знака разворачиваются в 3D один за другим, затем выезжает текст,
   короткая пауза и оверлей растворяется, открывая сайт.
   ========================================================================== */

:root {
  --kc-bg:   #0e2e2b;   /* фон оверлея (цвет из логотипа) */
  --kc-gold: #cdb06c;   /* основное золото */
  --kc-hl:   #f3e3ad;   /* светлая «грань» во время разворота сегмента */
  --kc-size: min(78vw, 72vh, 600px);   /* ширина логотипа */

  /* Тайминги (секунды). Вся раскладка ускорена в 1,5 раза относительно
     первой версии: на 2,75 секунды посетитель успевал заскучать, а
     заставка — это приветствие, а не отдельный экран.

     Числа держатся вместе намеренно: это партитура, менять их надо всей
     колонкой, иначе текст поедет раньше, чем соберётся знак. Порядок
     событий — знак по сегментам, потом две строки названия, потом
     подпись, потом линии по бокам.

     ВАЖНО: END_AT в konurat-preloader.js — момент, когда оверлей
     начинает растворяться, и он обязан совпадать с концом этой
     колонки. Разойдутся — либо анимация оборвётся на середине, либо
     собранный логотип будет молча висеть лишнюю секунду. */
  --kc-piece-dur: .36s;
  --kc-d-kbar: .03s;
  --kc-d-ktop: .16s;
  --kc-d-kbot: .27s;
  --kc-d-ctop: .39s;
  --kc-d-cbot: .51s;
  --kc-d-line1: .73s;
  --kc-d-line2: .79s;
  --kc-d-sub:   .87s;
  --kc-d-rule:  .94s;
  --kc-fade-dur: .36s;
}

/* пока прелоадер активен — прячем скролл страницы */
html.kc-loading { overflow: hidden; }

.kc-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kc-bg);
  opacity: 1;
  overflow: hidden;
}
.kc-preloader.is-done {
  animation: kcFadeOut var(--kc-fade-dur) cubic-bezier(.4, 0, .6, 1) forwards;
  pointer-events: none;
}
@keyframes kcFadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* ---- контейнер логотипа: все слои — SVG с одинаковым viewBox ---- */
.kc-logo {
  position: relative;
  width: var(--kc-size);
  aspect-ratio: 581 / 467;      /* пропорции viewBox */
}
.kc-logo > svg,
.kc-mark,
.kc-mark > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- знак «KC»: 3D-разворот сегментов ---- */
.kc-mark {
  perspective: 1100px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
.kc-piece {
  will-change: transform;
  backface-visibility: visible;
  animation: kcUnfold var(--kc-piece-dur) cubic-bezier(.18, .75, .22, 1) both;
}
.kc-piece path {
  fill: var(--kc-gold);
  animation: kcFacet var(--kc-piece-dur) cubic-bezier(.3, .6, .3, 1) both;
}

/* каждая деталь крутится вокруг оси, проходящей через точку крепления
   (перпендикулярно направлению штриха) — эффект «раскладывающейся линейки» */
.kc-kbar { transform-origin: 23.49% 2.14%;  --kc-ax: 1; --kc-ay: 0;  --kc-from: -90deg; animation-delay: var(--kc-d-kbar); }
.kc-ktop { transform-origin: 26.51% 34.69%; --kc-ax: 1; --kc-ay: 1;  --kc-from:  90deg; animation-delay: var(--kc-d-ktop); }
.kc-kbot { transform-origin: 34.25% 39.40%; --kc-ax: 1; --kc-ay: -1; --kc-from: -90deg; animation-delay: var(--kc-d-kbot); }
.kc-ctop { transform-origin: 43.72% 31.69%; --kc-ax: 1; --kc-ay: 1;  --kc-from:  90deg; animation-delay: var(--kc-d-ctop); }
.kc-cbot { transform-origin: 43.72% 31.69%; --kc-ax: 1; --kc-ay: -1; --kc-from: -90deg; animation-delay: var(--kc-d-cbot); }
.kc-kbar path { animation-delay: var(--kc-d-kbar); }
.kc-ktop path { animation-delay: var(--kc-d-ktop); }
.kc-kbot path { animation-delay: var(--kc-d-kbot); }
.kc-ctop path { animation-delay: var(--kc-d-ctop); }
.kc-cbot path { animation-delay: var(--kc-d-cbot); }

@keyframes kcUnfold {
  0%   { transform: rotate3d(var(--kc-ax), var(--kc-ay), 0, var(--kc-from)); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: rotate3d(var(--kc-ax), var(--kc-ay), 0, 0deg); opacity: 1; }
}
@keyframes kcFacet {
  0%   { fill: var(--kc-hl); }
  40%  { fill: var(--kc-hl); }
  100% { fill: var(--kc-gold); }
}

/* ---- текст: выезжает слева с прозрачностью (как в референсе) ---- */
.kc-text g,
.kc-text path { fill: var(--kc-gold); }
.kc-text .kc-line {
  opacity: 0;
  transform: translateX(-3.5%);
  animation: kcSlide .36s cubic-bezier(.2, .7, .2, 1) forwards;
}
.kc-text .kc-line1 { animation-delay: var(--kc-d-line1); }
.kc-text .kc-line2 { animation-delay: var(--kc-d-line2); }
.kc-text .kc-sub   { animation-delay: var(--kc-d-sub); }
@keyframes kcSlide {
  to { opacity: 1; transform: translateX(0); }
}

/* линии по бокам подписи — вырастают от центра наружу */
.kc-text .kc-rule {
  transform-box: fill-box;
  transform: scaleX(0);
  animation: kcRule .33s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: var(--kc-d-rule);
}
.kc-text .kc-ruleL { transform-origin: 100% 50%; }
.kc-text .kc-ruleR { transform-origin: 0% 50%; }
@keyframes kcRule {
  to { transform: scaleX(1); }
}

/* ---- уменьшенное движение: показываем логотип сразу ---- */
@media (prefers-reduced-motion: reduce) {
  .kc-piece, .kc-piece path, .kc-text .kc-line, .kc-text .kc-rule {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
}