/* ============================================================
   О НАС — стеклянный Атлант с вращающимся глобусом (28.09.2026)
   Слои: свечение → статуя → материки в сфере → орбита с огоньком.
   Статуя и материки — картинки gpt-image на белом, поэтому смешиваются
   multiply: белое пропадает, стекло ложится на фон страницы.
   ============================================================ */
.about__inner{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:clamp(28px, 3.6vw, 72px);
  align-items:center;
}
.about__titles{ margin-bottom:clamp(18px, 2vw, 30px); }
.about__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:620;
  font-stretch:100%;
  font-size:clamp(24px, 2.45vw, 42px);
  line-height:1.1;
  text-transform:uppercase;
}
.about__title em{ font-style:normal; color:var(--accent-1); }
.about__lead{
  margin:0 0 clamp(14px, 1.4vw, 22px);
  max-width:24ch;
  font-family:var(--font-display);
  font-weight:560;
  font-size:clamp(20px, 1.75vw, 30px);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--fg);
}
.about__text{
  margin:0 0 1.05em;
  max-width:52ch;
  font-size:clamp(14px, 1.02vw, 17px);
  line-height:1.72;
  color:var(--fg-lead);
}
.about__text:last-of-type{ margin-bottom:clamp(24px, 2.6vw, 42px); }

/* ------------------------------ сцена ------------------------------ */
.about__stage{
  position:relative;
  width:min(100%, 800px);
  margin-inline:auto;
  padding-block:clamp(10px, 2vw, 30px);
}
.about__atlas{
  position:relative;
  width:66%;
  margin:0 auto;
  aspect-ratio:1400 / 1749;
  isolation:isolate;
}
.about__statue{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  mix-blend-mode:multiply;
  pointer-events:none;
}
/* свечение за глобусом — дышит */
.about__halo{
  position:absolute; z-index:0;
  left:49.69%; top:22.63%;
  width:78%; aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(107,193,255,.42), rgba(28,120,186,.12) 55%, rgba(28,120,186,0));
  animation:about-breathe 6s ease-in-out infinite;
}
@keyframes about-breathe{ 50%{ transform:translate(-50%, -50%) scale(1.08); opacity:.75; } }

/* Материки внутри сферы. Координаты — сфера на statue-a.webp
   (центр .4969/.2263, радиус .2565 ширины), чуть внутрь от ободка. */
.about__globe{
  position:absolute; z-index:3;
  left:25.58%; top:3.33%;
  width:48.22%; aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  mix-blend-mode:multiply;
  /* к краю материки уходят в стекло, как на шаре, а не на плоской карте */
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
}
/* две карты подряд: сдвиг на половину = один оборот без шва (16:9 × 2) */
.about__lands{
  position:absolute; left:0; top:0;
  width:355.6%; height:100%;
  background-repeat:repeat-x;
  background-size:50% 100%;
  opacity:.9;
  animation:about-spin 55s linear infinite;
}
@keyframes about-spin{ to{ transform:translateX(-50%); } }
/* объём шара: блик сверху слева и тень к краю */
.about__globe::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.7), rgba(255,255,255,0) 34%),
    radial-gradient(closest-side, rgba(28,120,186,0) 60%, rgba(28,120,186,.28) 100%);
}

/* Орбита вокруг глобуса, наклонена. Задняя половина под статуей,
   передняя (нижняя в своей системе) — поверх: шар «внутри» кольца. */
.about__orbit, .about__orbit-front{
  position:absolute;
  left:49.69%; top:22.63%;
  width:130%; aspect-ratio:3.1 / 1;   /* 150% → 130%: карточки на концах вылезали за сцену */
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb), .38);
  transform:translate(-50%, -50%) rotate(-12deg);
  pointer-events:none;
}
.about__orbit{ z-index:1; }
.about__orbit-front{ z-index:4; clip-path:inset(50% 0 0 0); border-color:rgba(var(--accent-rgb), .5); }
.about__spark{
  position:absolute; left:0; top:0;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb), .55), 0 0 14px 4px rgba(107,193,255,.8);
  opacity:0;
}

/* ----------------------------- принципы ----------------------------- */
.about__points{ list-style:none; margin:0; padding:0; }
.about__point{
  position:absolute; z-index:5;
  display:flex; flex-direction:column; gap:2px;
  max-width:210px;
  padding:12px 16px 12px 30px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(var(--accent-rgb), .16);
  border-radius:var(--r-inner);
  box-shadow:0 1px 2px rgba(13,15,32,.04), 0 10px 28px rgba(28,120,186,.12);
  animation:about-float 7s ease-in-out infinite;
}
.about__point::before{                         /* метка, как узлы на карте внизу */
  content:""; position:absolute; left:13px; top:18px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-1);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), .15);
}
.about__point b{ font:600 clamp(14px, .98vw, 16px)/1.25 var(--font); color:var(--fg); }
.about__point span{ font-size:clamp(12.5px, .82vw, 13.5px); line-height:1.4; color:var(--fg-mute); }
.about__point--1{ left:0;    top:30%; animation-delay:-1s; }
.about__point--2{ right:0;   top:8%;  animation-delay:-3s; }
.about__point--3{ left:2%;   top:66%; animation-delay:-5s; }
.about__point--4{ right:0;   top:58%; animation-delay:-2s; }
@keyframes about-float{ 50%{ transform:translateY(-7px); } }

/* Орбита (> 1100px): about.js переносит список внутрь .about__atlas и сам ставит
   каждую карточку на эллипс (transform, z-index, прозрачность). Здесь только
   снимаем раскладку по углам и парение — движением теперь управляет орбита. */
.is-orbiting .about__points{ position:absolute; inset:0; z-index:auto; pointer-events:none; }
/* на ~1280px правая карточка в крайней точке доходила до полосы прокрутки —
   выход за края секции по горизонтали обрезаем, чтобы не мелькала прокрутка вбок */
.about{ overflow-x:clip; }
.is-orbiting .about__point{
  left:0; top:0; right:auto;
  width:max-content; max-width:205px;
  animation:none;
  pointer-events:auto;
  will-change:transform;
  /* переходы и задержки появления иначе тянут прозрачность за движением */
  transition:none !important;
  translate:none !important;
}
/* reveal двигает карточки свойством translate — с орбитой не спорит */
.is-orbiting .about__point--1, .is-orbiting .about__point--2,
.is-orbiting .about__point--3, .is-orbiting .about__point--4{ left:0; top:0; right:auto; }

/* появление: сцена проявляется целиком, принципы — по очереди */
.js .reveal .about__point{ opacity:0; translate:0 12px; transition:opacity .6s var(--ease), translate .6s var(--ease); }
.js .reveal.is-in .about__point{ opacity:1; translate:0 0; }
.js .reveal.is-in .about__point--1{ transition-delay:.35s; }
.js .reveal.is-in .about__point--2{ transition-delay:.5s; }
.js .reveal.is-in .about__point--3{ transition-delay:.65s; }
.js .reveal.is-in .about__point--4{ transition-delay:.8s; }

@media (prefers-reduced-motion:reduce){
  .about__halo, .about__lands, .about__point{ animation:none; }
  .about__spark{ display:none; }
}