/**
 * Полноэкранный прелоадер натальной карты (макет клиента, standalone-HTML → в тему).
 * Показывается после клика «Построить карту» на ~4 сек — иллюзия расчёта + UX-опора.
 * Шрифты только темовые — Forum (заголовочный) и Manrope (текстовый).
 */

#natal-preloader {
  --gold: #d6b26e;
  --ink:  #f4efe6;

  position: fixed;
  inset: 0;
  z-index: 100060; /* выше cs-sheet-picker'ов (100050), ниже общих модалок сайта */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vmin, 26px);
  background: radial-gradient(circle at 50% 42%, #16173d 0%, #0b0b24 45%, #050510 100%);
  font-family: 'Manrope', sans-serif;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
#natal-preloader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#natal-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.np-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: np-twinkle var(--d, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes np-twinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1);  }
}

.np-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(260px, 58vmin, 400px);
  height: clamp(260px, 58vmin, 400px);
}
.np-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.np-ring .track { fill: none; stroke: rgba(214, 178, 110, .14); stroke-width: 2; }
.np-ring .bar   { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round;
                  transition: stroke-dashoffset .25s ease; }

.np-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(214, 178, 110, .16);
  border-radius: 50%;
  animation: np-spin linear infinite;
}
.np-orbit .planet { position: absolute; left: 50%; border-radius: 50%; }
@keyframes np-spin { to { transform: rotate(360deg); } }

.np-core {
  position: relative; z-index: 2;
  width:  clamp(40px, 9vmin, 56px);
  height: clamp(40px, 9vmin, 56px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9b0, #d6a24e 62%, #9d6820);
  box-shadow: 0 0 28px rgba(214, 162, 78, .7), 0 0 60px rgba(214, 162, 78, .32);
  display: flex; align-items: center; justify-content: center;
  animation: np-pulse 3s ease-in-out infinite;
}
.np-core span { font-size: clamp(18px, 4vmin, 24px); color: #3a2606; }
@keyframes np-pulse {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1;  }
}

.np-text { position: relative; z-index: 2; text-align: center; }
.np-pct {
  font-family: 'Forum', serif;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(34px, 8vmin, 46px);
  color: var(--ink);
}
.np-pct b { font-weight: 600; }
.np-pct .sym { font-size: .5em; color: var(--gold); }
.np-step {
  margin-top: 9px;
  font-size: clamp(13px, 2.4vmin, 15px);
  letter-spacing: .02em;
  color: rgba(244, 239, 230, .62);
}
/* Логотип вместо текстовой подписи — клон из шапки, перекрашенный в белый.
   Заливку задаём и на path, и на .aast0: класс приходит из спрайта. */
.np-brand {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.np-brand svg {
  width: clamp(112px, 22vmin, 152px);
  height: auto;
  display: block;
}
.np-brand svg path,
.np-brand svg .aast0 { fill: #ffffff; }
/* Фолбэк, если логотип в шапке не найден */
.np-brand--text {
  display: block;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* ═══════════════════════════════════════════════════════════════════
   Память iOS (2026-08-12): прелоадер не удаляется из DOM после показа
   (natal-preloader.js создаёт его один раз через ensureDom), а гасится
   только opacity+visibility. В WKWebView `visibility:hidden` НЕ ставит
   CSS-анимации на паузу — 26-44 звезды, 3 орбиты и ядро продолжают
   крутить композитор вслепую поверх уже построенной карты (самый
   тяжёлый по памяти момент: ~900 узлов SVG + 4200 DOM в результате).
   Ровно эта схема убивала вкладку на /love/ 29.07 — см. memory
   no-infinite-gpu-layers и ios-safari-reload-fix.
   Правило: пока прелоадер не показан — анимации paused; когда отработал
   и погас — поддерево выгружается из рендер-дерева целиком.
   Блок в конце файла намеренно: override должен идти после определений.
   ═══════════════════════════════════════════════════════════════════ */
#natal-preloader:not(.is-visible) .np-star,
#natal-preloader:not(.is-visible) .np-orbit,
#natal-preloader:not(.is-visible) .np-core {
  animation-play-state: paused;
}

/* .is-parked ставит natal-preloader.js через 400 мс после скрытия —
   то есть когда fade-out уже доиграл и резкого пропадания не видно. */
@supports (content-visibility: hidden) {
  #natal-preloader.is-parked { content-visibility: hidden; }
}