/* 3D-сцена «Орбита» (hero и блок заявки): слои canvas, CSS-заглушка без WebGL, подписи на орбите, HUD.
   Рисует сцену assets/js/orbit/* */

/* высоту сцены задаёт heroLayout (--sh); запасные значения повторяют его формулы — без JS и до загрузки скрипта
   заголовок остаётся в первом экране и страница не прыгает (см. адаптив ≤959 / ≤639) */
/* десктоп: как в heroLayout — 690px, на невысоком окне не выше окна минус 270px (но не ниже 400px) */
.stage {
  --fh: clamp(400px,calc(100vh - 270px),690px);
  position: relative;
  height: var(--sh,var(--fh));
  z-index: 1;
}

.stage canvas,
.cta-stage canvas {
  position: absolute;
  display: block;
  pointer-events: none;
}

.st-back {
  z-index: 1;
}

.st-gl {
  z-index: 2;
}

.st-front {
  z-index: 3;
}

.st-floor {
  position: absolute;
  left: 50%;
  width: 980px;
  height: 190px;
  margin-left: -490px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,rgba(190,205,230,.07),rgba(190,205,230,.025) 55%,transparent 100%);
  z-index: 0;
}

.st-fallback {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  display: block;
  background: radial-gradient(circle at 33% 26%,rgba(255,255,255,.95) 0 4%,rgba(255,255,255,0) 14%),
    radial-gradient(circle at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,#F4F6F9 0%,#C3C8D0 25%,#6E737D 44%,#0D0E11 50%,#1B1C21 60%,#5B606A 80%,#C8CCD3 100%);
}

.stage[data-gl] .st-fallback,
.cta-stage[data-gl] .st-fallback {
  display: none;
}

/* без JS: сфера-заглушка по центру сцены; на десктопе — тот же центр и размер, что у ядра в heroLayout
   (центр min(318, H/2 − 3), диаметр ≈ 0.6085·S, S = min(750, W/1.9, (H − 174)/0.66)) */
.stage .st-fallback {
  left: 50%;
  top: calc(min(318px,var(--fh) / 2 - 3px) - min(228px,16vw,(var(--fh) - 174px) * .461));
  width: min(456px,32vw,(var(--fh) - 174px) * .922);
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.cta-stage .st-fallback {
  left: 50%;
  top: 50%;
  width: min(216px,46vw);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}

.labels {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.pill {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(9,10,13,.84);
  border: 1px solid rgba(255,255,255,.15);
  font: 500 13.5px/1 var(--f-disp);
  letter-spacing: .05em;
  color: #ECEEF2;
  white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9);
  will-change: transform,opacity;
  opacity: 0;
}

.pill i {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,#FFFFFF 0 16%,#DADDE2 58%,#1A1B1F 100%);
  box-shadow: 0 0 10px -1px #DADDE2;
}

.pill.pr i {
  background: transparent;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 10px -2px var(--accent);
}

.hud {
  position: absolute;
  top: 112px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.hud-k {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8D929B;
}

.hud-k b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%,#FFFFFF 0 16%,#DADDE2 58%,#1A1B1F 100%);
  box-shadow: 0 0 10px -1px #DADDE2;
}

.hud-k b.o {
  background: transparent;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 10px -2px var(--accent);
}

.hud-t {
  font: 500 17px/1.3 var(--f-disp);
  color: #E9EBEF;
  letter-spacing: .02em;
}

.cta-stage {
  position: relative;
  height: 380px;
  margin: 0 0 -10px -40px;
  max-width: calc(100% + 40px);
}

/* слой с подписями-«HUD» по краям сцены */
.hud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  max-width: 1440px;
  margin: 0 auto;
}

.hud--left {
  left: var(--gut);
}

.hud--right {
  right: var(--gut);
  align-items: flex-end;
  text-align: right;
}

@supports (height:100svh) {
  .stage {
    --fh: clamp(400px,calc(100svh - 270px),690px);
  }
}

@media (max-width:960px) {
  .hud {
    display: none;
  }
  .cta-stage {
    height: 320px;
    margin-left: -16px;
  }
}

@media (max-width:959px) {
  .stage {
    height: var(--sh,calc(72vw + 40px));
  }
  /* без JS: сфера-заглушка по размеру сцены (≈ как ядро в WebGL) */
  .stage .st-fallback {
    top: 46%;
    width: auto;
    height: 42%;
    transform: translate(-50%,-50%);
  }
}

@media (max-width:959px) and (orientation:landscape) {
  /* невысокий экран: сцена не выше окна минус место под заголовок, как в heroLayout (60px, а от ~750px ширины,
     где заголовок крупнее, — 12vw − 30px); сфера — под непрозрачной шапкой без JS */
  .stage {
    height: var(--sh,min(72vw + 40px,max(250px,100svh - max(60px,12vw - 30px))));
  }
  .stage .st-fallback {
    top: 48%;
    height: 42%;
  }
}

@media (max-width:639px) {
  .stage {
    height: var(--sh,calc(98vw + 40px));
  }
  .stage .st-fallback {
    top: 47%;
    height: 50%;
  }
}

@media (max-width:639px) and (orientation:landscape) {
  .stage {
    height: var(--sh,min(98vw + 40px,max(250px,100svh - 60px)));
  }
  .stage .st-fallback {
    top: 48%;
    height: 42%;
  }
}

@media (max-width:640px) {
  .pill {
    height: 26px;
    font-size: 11.5px;
    padding: 0 10px 0 8px;
    gap: 7px;
  }
}