/* ======================================================
   Galatea hero orbit component
   Источник: mobile часть 2 / intermediate orbit final.
   SVG оставлен в HTML, CSS и JS вынесены отдельно.
   ====================================================== */

.galatea-orbit-stage {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1200 / 800;
  overflow: visible;
  --woman-width: 60%;
  --woman-top: 57%;
  --woman-left: 48.6%;
  transform: translateY(-4%);
  margin-inline: auto;
}

.galatea-orbit-stage .hero-woman {
  position: absolute;
  left: var(--woman-left);
  top: var(--woman-top);
  width: var(--woman-width);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.98;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.28));
  -webkit-mask-image: radial-gradient(ellipse 43% 48% at 50% 47%, rgba(0,0,0,1) 54%, rgba(0,0,0,0.96) 66%, rgba(0,0,0,0.78) 79%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 43% 48% at 50% 47%, rgba(0,0,0,1) 54%, rgba(0,0,0,0.96) 66%, rgba(0,0,0,0.78) 79%, rgba(0,0,0,0) 100%);
}

.galatea-orbit-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

.galatea-orbit-stage .orbit-main,
.galatea-orbit-stage .orbit-tail {
  fill: none;
  stroke: #e7d8bf;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  vector-effect: non-scaling-stroke;
}

.galatea-orbit-stage .bead {
  stroke: rgba(255, 248, 239, 0.78);
  stroke-width: 0.26;
  opacity: 1;
  filter: none;
  shape-rendering: geometricPrecision;
}

.galatea-orbit-stage .big-pearl {
  pointer-events: none;
  filter: url(#bigPearlGlow);
}

.galatea-orbit-stage .big-pearl-core {
  fill: url(#bigPearlGradient);
  stroke: rgba(255, 247, 231, 0.86);
  stroke-width: 1.2;
}

.galatea-orbit-stage .big-pearl-highlight {
  fill: rgba(255, 255, 252, 0.62);
  filter: blur(0.45px);
}

.galatea-orbit-stage .big-pearl-soft-shadow {
  fill: rgba(120, 80, 57, 0.10);
  filter: blur(1.6px);
}

.galatea-orbit-stage .orbit-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.galatea-orbit-stage .orbit-label {
  position: absolute;
  color: #f2dcc0;
  font-size: clamp(13px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.72),
    0 0 8px rgba(239, 211, 164, 0.26),
    0 0 18px rgba(239, 211, 164, 0.12);
}

.galatea-orbit-stage .label-18 {
  left: 26.0%;
  top: 32.0%;
  transform: translate(-60%, -60%);
}

.galatea-orbit-stage .label-no-experience {
  left: 12.8%;
  top: 69.0%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.galatea-orbit-stage .label-free {
  left: 34.5%;
  top: 97.2%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.galatea-orbit-stage .label-support {
  left: 58.2%;
  top: 103.0%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 180px;
}

.galatea-orbit-stage .label-home {
  left: 80.0%;
  top: 90.4%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.galatea-orbit-stage .label-no-english {
  left: 72.0%;
  top: 35.8%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.galatea-orbit-stage .helper {
  fill: #ff6b6b;
  opacity: 0;
}

@media (max-width: 760px) {
  .galatea-orbit-stage {
    width: min(390px, calc(100vw - 8px));
    --woman-width: 62%;
    --woman-top: 57%;
    --woman-left: 48.6%;
    transform: translateY(-7%);
  }

  .galatea-orbit-stage .orbit-label {
    font-size: clamp(11px, 3.25vw, 13px);
    line-height: 1.05;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.76),
      0 0 6px rgba(239, 211, 164, 0.24),
      0 0 12px rgba(239, 211, 164, 0.10);
  }

  .galatea-orbit-stage .label-18 { left: 25.8%; top: 32.0%; }
  .galatea-orbit-stage .label-no-experience { left: 12.6%; top: 68.8%; }
  .galatea-orbit-stage .label-free { left: 34.5%; top: 97.0%; }
  .galatea-orbit-stage .label-support { left: 58.4%; top: 103.0%; width: 120px; }
  .galatea-orbit-stage .label-home { left: 80.0%; top: 90.2%; }
  .galatea-orbit-stage .label-no-english { left: 72.0%; top: 35.8%; }
}

@media (max-width: 380px) {
  .galatea-orbit-stage {
    width: min(370px, calc(100vw - 6px));
  }

  .galatea-orbit-stage .orbit-label {
    font-size: 11px;
  }
}