/*!
 * loader.css — 3D-анимация: «qveep» → qp-пропеллер (3 фазы).
 *
 * ГЕОМЕТРИЯ ПРОПЕЛЛЕРА:
 *   Хаб (точка раскрутки) = нижняя точка букв (хвостики q/p).
 *   Каждая лопасть отгибается ВНИЗ на 80° вокруг хаба → настоящий пропеллер.
 *
 * ФАЗА 1 (0.0–1.3s): слово «qveep» → v,e,e исчезают, q и p сходятся в «qp».
 * ФАЗА 2 (1.3–3.0s): qp-лопасть отгибается на 80°, раскрутка, +2 лопасти.
 * ФАЗА 3 (3.0s → ∞): пульсация с увеличением (infinite).
 */

/* ---------- Overlay ---------- */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(14, 15, 18, 0.96);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.loader-overlay.is-active { display: flex; opacity: 1; }
.loader-overlay.is-hiding { opacity: 0; pointer-events: none; }

/* ---------- Stage ---------- */
.loader-stage {
  width: min(90vw, 560px);
  text-align: center;
}

/* ---------- 3D-сцена с перспективой ---------- */
.loader-3d-scene {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  perspective: 1100px;
  perspective-origin: 50% 38%;
  position: relative;
}

/* ============================================================
 * ОБЪЁМНЫЕ БУКВЫ — гладкая заливка + сглаживание + мягкий glow
 * (вместо лесенчатого многослойного text-shadow)
 * ========================================================== */
.loader-letter,
.wl {
  font-family: "Space Grotesk", system-ui, "Roboto", sans-serif;
  font-weight: 700;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Гладкий объём: вертикальный градиент от белого к голубому */
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e4f7ff 28%,
    #7fdcff 62%,
    #00bfff 88%,
    #008fb3 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Мягкая подсветка + глубина (drop-shadow ровнее text-shadow) */
  filter:
    drop-shadow(0 5px 9px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 12px rgba(0, 191, 255, 0.85))
    drop-shadow(0 0 26px rgba(0, 191, 255, 0.4));
}

/* ============================================================
 * ФАЗА 1 — СЛОВО «qveep» → ЛОПАСТЬ «qp»
 * ========================================================== */

.loader-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 3;
  opacity: 0;
  animation:
    wordIn 0.45s ease-out 0.15s forwards,
    wordLayerOut 0.25s ease-in 1.25s forwards;
}
@keyframes wordIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wordLayerOut { to { opacity: 0; } }

.wl {
  font-size: 80px;
  display: inline-block;
  will-change: transform, opacity;
}

/* Буквы v, e, e — исчезают (удаляются) */
.wl-v  { animation: vanish 0.3s ease-in 0.55s forwards; }
.wl-e1 { animation: vanish 0.3s ease-in 0.65s forwards; }
.wl-e2 { animation: vanish 0.3s ease-in 0.75s forwards; }
@keyframes vanish {
  0%   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.6) translateY(8px); filter: blur(6px); }
}

/* q и p — сходятся к центру, образуя «qp» */
.wl-q { animation: qConverge 0.5s cubic-bezier(0.6, 0, 0.3, 1) 0.7s forwards; }
.wl-p { animation: pConverge 0.5s cubic-bezier(0.6, 0, 0.3, 1) 0.7s forwards; }
@keyframes qConverge {
  from { transform: translateX(0); }
  to   { transform: translateX(58px); }
}
@keyframes pConverge {
  from { transform: translateX(0); }
  to   { transform: translateX(-58px); }
}

/* ============================================================
 * ПРОПЕЛЛЕР — каркас из 3 уровней transform
 *   .loader-propeller : контейнер (preserve-3d)
 *   .loader-spin      : вращение rotateZ (ФАЗА 2 → 3)
 *   .loader-pulse     : пульсация scale (ФАЗА 3)
 *   .loader-blade     : лопасть, hab = нижняя точка букв
 * ========================================================== */

.loader-propeller,
.loader-spin,
.loader-pulse {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ---------- Лопасть «qp» ----------
 * НИЖНЯЯ ТОЧКА БУКВ = ХАБ (точка раскрутки).
 *   - bottom edge блока стоит в центре сцены (margin-top: -100% высоты);
 *   - transform-origin: 50% 100% → ось = нижний центр = хаб;
 *   - rotate(θ) расставляет 3 лопасти по кругу;
 *   - rotateX(80deg) отгибает буквы ВНИЗ на 80° → пропеллер. */
.loader-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 160px;
  margin-left: -105px;   /* центр по горизонтали над хабом */
  margin-top: -160px;    /* нижний край блока = центр сцены = хаб */
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: flex-end;  /* буквы прижаты к низу → хвостики у хаба */
  justify-content: center;
  opacity: 0;
  backface-visibility: visible;
  will-change: opacity, transform, filter;
}

.loader-letter {
  font-size: 112px;
  display: inline-block;
}
.loader-q { margin-right: -10px; }
.loader-p { margin-left: -10px; }

/* Угол каждой лопасти (через CSS-переменную для keyframes) */
.blade-1 { --angle: 0deg; }
.blade-2 { --angle: 120deg; }
.blade-3 { --angle: 240deg; }

/* ============================================================
 * ФАЗА 2 — ОТГИБ НА 80° + РАСКРУТКА + 2 НОВЫЕ ЛОПАСТИ
 * ========================================================== */

/* Лопасть 1 — рождается из сошедшихся q/p и отгибается вниз на 80° */
.loader-overlay.is-active .blade-1 {
  animation: bladeFold 0.5s cubic-bezier(0.5, 0, 0.3, 1) 1.25s forwards;
}
/* Лопасти 2 и 3 — материализуются (blur-in) уже отогнутыми во время раскрутки */
.loader-overlay.is-active .blade-2 {
  animation: bladeFold 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.9s forwards;
}
.loader-overlay.is-active .blade-3 {
  animation: bladeFold 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.05s forwards;
}
@keyframes bladeFold {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: rotate(var(--angle)) rotateX(0deg) scale(0.85);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: rotate(var(--angle)) rotateX(80deg) scale(1);
  }
}

/* Раскрутка: 2 оборота с ускорением, затем бесконечное равномерное вращение */
.loader-overlay.is-active .loader-spin {
  animation:
    spinUp 0.9s cubic-bezier(0.34, 0.05, 0.5, 1) 1.7s 2 forwards,
    spinLoop 0.7s linear 3.5s infinite;
}
@keyframes spinUp {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes spinLoop {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* ============================================================
 * ФАЗА 3 — ПУЛЬСАЦИЯ С УВЕЛИЧЕНИЕМ (infinite)
 * ========================================================== */

.loader-overlay.is-active .loader-pulse {
  animation: pulseScale 1.8s ease-in-out 3.0s infinite;
}
@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.55); }
}

/* ============================================================
 * ПОДПИСЬ «Загрузка...»
 * ========================================================== */

.loader-caption {
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.loader-dots {
  margin-top: 8px;
  display: inline-flex;
  gap: 6px;
}
.loader-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 191, 255, 0.8);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ---------- Адаптив для маленьких экранов ---------- */
@media (max-width: 560px) {
  .loader-3d-scene { width: 90vw; height: 90vw; }
  .wl { font-size: 56px; }
  .loader-letter { font-size: 76px; }
  .loader-blade {
    width: 150px; height: 115px;
    margin-left: -75px; margin-top: -115px;
  }
}