/* ==========================================================================
   MEDIA BOX — «СОЦИАЛЬНЫЕ ПЛОЩАДКИ»: КАРТА ПЛОЩАДОК (p-platforms.css)
   --------------------------------------------------------------------------
   Подключается только на platforms.html — после pages.css / screens.css
   и перед future.css. У этой страницы самый «космический» ДИЗАЙН на сайте.
   Только оформление: в текстах страницы никаких «галактик», «орбит»
   и «планет» — обычные слова (решение владельца 03.10.2026).

   Блоки:
     .gx-hero    — шапка страницы с глубоким космосом и туманностью
     .gx-map     — карта: ядро Media Box, орбиты, планеты-площадки,
                   звёздные лучи «гиперпространства»
     .gx-legend  — легенда статусов (работает / в разработке)
     .gx-soon    — площадки в разработке (Facebook, Threads)
     .gx-route   — траектория трафика: аккаунты → источник → заявка
     .gx-tools   — инструменты перевода аудитории

   Как устроено вращение: каждая орбита (.gx-orbit) крутится целиком
   (transform: rotate), а «тело» планеты (.gx-planet__body) крутится
   в обратную сторону с той же скоростью — поэтому значок и подпись
   всегда остаются ровными. Только transform — без нагрузки на процессор.
   Пауза вне экрана — класс .is-paused на [data-live] (platforms.js),
   reduced motion — внизу файла.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Шапка: глубокий космос (усиливает общий .page-hero)
   -------------------------------------------------------------------------- */

.gx-hero {
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* Туманность за всей шапкой */
.gx-hero::after {
  top: -320px;
  right: -260px;
  width: 980px;
  height: 980px;
  background:
    radial-gradient(closest-side, rgba(194, 92, 255, .16), rgba(123, 92, 255, .10) 45%, rgba(56, 217, 255, .05) 70%, transparent);
}

.gx-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  font-size: .9375rem;
  color: var(--text-muted);
}

.gx-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gx-legend__dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
}

.gx-legend__dot--on {
  background: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(52, 224, 161, .16), 0 0 12px rgba(52, 224, 161, .8);
}

.gx-legend__dot--soon {
  border: 1.5px dashed rgba(200, 180, 255, .8);
}


/* --------------------------------------------------------------------------
   Карта площадок
   -------------------------------------------------------------------------- */

.gx-map {
  --planet: clamp(44px, 6.4vw, 60px);
  position: relative;
  /* 84 %: у внешней орбиты остаётся место под планеты и их подписи */
  width: min(84%, 520px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  isolation: isolate;
}

/* Звёздные лучи «гиперпространства»: тонкие радиальные штрихи,
   медленно вращаются и растворяются к краю */
.gx-map__warp {
  position: absolute;
  inset: -12%;
  z-index: -2;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(190, 220, 255, .0) 0deg 4deg,
      rgba(190, 220, 255, .22) 4deg 4.35deg,
      rgba(190, 220, 255, .0) 4.35deg 9deg,
      rgba(220, 190, 255, .16) 9deg 9.25deg,
      rgba(190, 220, 255, .0) 9.25deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 30%, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 30%, #000 55%, transparent 100%);
  opacity: .55;
  animation: gx-spin 140s linear infinite;
}

/* Туманность: цветные облака вокруг ядра */
.gx-map__nebula {
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(40% 34% at 30% 36%, rgba(56, 217, 255, .20), transparent 70%),
    radial-gradient(38% 30% at 70% 64%, rgba(194, 92, 255, .22), transparent 70%),
    radial-gradient(30% 30% at 50% 50%, rgba(123, 92, 255, .28), transparent 70%);
  animation: gx-breathe 12s var(--ease-in-out) infinite alternate;
}

/* Орбиты: кольца разного размера */
.gx-orbit {
  position: absolute;
  border: 1px solid rgba(150, 190, 255, .18);
  border-radius: 50%;
  animation: gx-spin var(--t, 30s) linear infinite;
  animation-delay: var(--d, 0s);
}

.gx-orbit--1 { inset: 27%; --t: 22s; --d: -4s; border-color: rgba(56, 217, 255, .28); }
.gx-orbit--2 { inset: 17%; --t: 34s; --d: -20s; border-color: rgba(123, 140, 255, .24); }
.gx-orbit--3 { inset: 7%;  --t: 48s; --d: -9s;  border-color: rgba(194, 92, 255, .22); }
/* Внешняя пунктирная орбита — площадки в разработке: две планеты напротив
   друг друга (Facebook — на «верхушке», Threads — .gx-planet--opposite).
   Задержка -30s из 90s = поворот на 120°: Facebook стартует справа снизу
   («на 4 часа»), Threads — слева сверху («на 10 часов»), в свободных частях
   карты. Менять --d вместе с телом ниже. */
.gx-orbit--4 { inset: -3%; --t: 90s; --d: -30s; border: 1px dashed rgba(200, 180, 255, .3); }

/* Планета: стоит на «верхушке» своей орбиты */
.gx-planet {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--planet);
  height: var(--planet);
  margin: calc(var(--planet) / -2) 0 0 calc(var(--planet) / -2);
}

/* Вторая планета на той же орбите — напротив (внизу) */
.gx-planet--opposite {
  top: 100%;
}

/* «Тело» крутится в обратную сторону — значок и подпись всегда ровные */
.gx-planet__body {
  position: absolute;
  inset: 0;
  display: block;
  animation: gx-spin var(--t, 30s) linear infinite reverse;
  animation-delay: var(--d, 0s);
}

.gx-orbit--1 .gx-planet__body { --t: 22s; --d: -4s; }
.gx-orbit--2 .gx-planet__body { --t: 34s; --d: -20s; }
.gx-orbit--3 .gx-planet__body { --t: 48s; --d: -9s; }
.gx-orbit--4 .gx-planet__body { --t: 90s; --d: -30s; }

.gx-planet__ball {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .45),
    inset 4px 5px 10px rgba(255, 255, 255, .25),
    0 0 26px -2px var(--glow, rgba(56, 217, 255, .6));
}

.gx-planet__ball .icon {
  width: 46%;
  height: 46%;
}

.gx-planet--instagram { --glow: rgba(225, 48, 108, .7); }
.gx-planet--instagram .gx-planet__ball {
  background: radial-gradient(circle at 30% 25%, #ffb36b 0%, #e1306c 45%, #7b2ff7 100%);
}

.gx-planet--tiktok { --glow: rgba(37, 244, 238, .65); }
.gx-planet--tiktok .gx-planet__ball {
  background: radial-gradient(circle at 30% 25%, #4a5568 0%, #11131c 60%, #000 100%);
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .5),
    inset 4px 5px 10px rgba(255, 255, 255, .18),
    -3px 0 0 -1px rgba(37, 244, 238, .8),
    3px 0 0 -1px rgba(254, 44, 85, .8),
    0 0 26px -2px rgba(37, 244, 238, .55);
}

.gx-planet--youtube { --glow: rgba(255, 0, 51, .65); }
.gx-planet--youtube .gx-planet__ball {
  background: radial-gradient(circle at 30% 25%, #ff8a9b 0%, #ff0033 50%, #8a001c 100%);
}

/* Площадки в разработке — «призрачные», без свечения */
.gx-planet--soon .gx-planet__ball {
  color: rgba(230, 220, 255, .85);
  background: radial-gradient(circle at 30% 25%, rgba(140, 130, 200, .45), rgba(40, 36, 80, .6) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(200, 180, 255, .45);
  opacity: .8;
}

.gx-planet--facebook .gx-planet__ball .icon { color: #8fb4ff; }

.gx-planet__name {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 8px;
  border: 1px solid rgba(150, 190, 255, .2);
  border-radius: 6px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--text);
  background: rgba(5, 8, 20, .82);
  white-space: nowrap;
}

.gx-planet--soon .gx-planet__name {
  color: #cbbdff;
  border-style: dashed;
}

/* Ядро — Media Box в центре карты */
.gx-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}

.gx-core__mark {
  position: absolute;
  inset: 0;
  border-radius: 28%;
  background: conic-gradient(from 200deg, #38d9ff, #7b5cff, #c25cff, #38d9ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 0 50px 4px rgba(56, 217, 255, .45),
    0 0 110px 20px rgba(123, 92, 255, .35);
}

/* Силуэт телефона внутри ядра — как в логотипе */
.gx-core__mark::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 34%;
  width: 32%;
  height: 56%;
  border: 3px solid #06101f;
  border-radius: 8px;
  background: rgba(255, 255, 255, .22);
}

.gx-core__ring {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 1px solid rgba(56, 217, 255, .5);
  opacity: 0;
  animation: gx-pulse 3.2s var(--ease-out) infinite;
}

.gx-core__ring--2 {
  animation-delay: 1.6s;
}

.gx-core__name {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6f6ff;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(56, 217, 255, .7);
}

@keyframes gx-spin {
  to { transform: rotate(360deg); }
}

@keyframes gx-breathe {
  from { transform: scale(.94) rotate(0deg); opacity: .8; }
  to   { transform: scale(1.06) rotate(12deg); opacity: 1; }
}

@keyframes gx-pulse {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Карта вне экрана / вкладка скрыта — всё замирает (platforms.js) */
.gx-map.is-paused *,
.gx-map.is-paused *::before,
.gx-map.is-paused *::after {
  animation-play-state: paused !important;
}

@media (max-width: 1023.98px) {
  .gx-map {
    width: min(78%, 440px);
    margin-top: 28px;
    margin-bottom: 24px;
  }
}

@media (max-width: 479.98px) {
  .gx-map {
    --planet: 38px;
    width: 74%;
  }

  .gx-planet__name {
    font-size: .625rem;
  }
}


/* Три карточки в сетке на две колонки: последняя (YouTube) — на всю ширину */
@media (min-width: 640px) {
  .plats > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Площадки в разработке
   -------------------------------------------------------------------------- */

.gx-soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px dashed rgba(200, 180, 255, .3);
  border-radius: var(--radius-lg);
  background: rgba(123, 92, 255, .04);
}

@media (min-width: 900px) {
  .gx-soon {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
}

.gx-soon__title {
  margin-top: 12px;
  font-size: 1.25rem;
}

.gx-soon__text {
  margin-top: 8px;
  font-size: .9375rem;
  color: var(--text-muted);
}

/* Карточки площадок (сейчас Facebook и Threads) встают в ряд сами (auto-fit),
   на узком экране — одна под другой. */
.gx-soon__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.gx-soon__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .02);
}

.gx-soon__item b {
  color: var(--text);
}

.gx-soon__logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px dashed rgba(200, 180, 255, .45);
  border-radius: 50%;
  color: #cbbdff;
}

.gx-soon__logo .icon {
  width: 20px;
  height: 20px;
}

.gx-soon__logo--facebook { color: #8fb4ff; }


/* --------------------------------------------------------------------------
   Траектория трафика
   -------------------------------------------------------------------------- */

.gx-route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 1000px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .gx-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  /* Луч, по которому летит трафик */
  .gx-route::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, rgba(56, 217, 255, .1), rgba(56, 217, 255, .6), rgba(194, 92, 255, .7), rgba(52, 224, 161, .7));
  }

  /* «Комета» бежит по лучу */
  .gx-route::after {
    content: '';
    position: absolute;
    top: 33px;
    left: 8%;
    width: 60px;
    height: 12px;
    border-radius: 12px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(56, 217, 255, .6) 45%, transparent);
    animation: gx-comet 4.5s var(--ease-in-out) infinite;
  }
}

@keyframes gx-comet {
  0%   { transform: translateX(0);      opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(780px);  opacity: 0; }
}

.gx-route__stop {
  position: relative;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.gx-route__num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(56, 217, 255, .45);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--bg);
}

.gx-route__stop--goal {
  border-color: rgba(52, 224, 161, .4);
}

.gx-route__stop--goal .gx-route__num {
  border-color: rgba(52, 224, 161, .6);
  color: var(--accent-3);
}

.gx-route__title {
  margin-top: 14px;
  font-size: 1.125rem;
}

.gx-route__text {
  margin-top: 6px;
  font-size: .9375rem;
  color: var(--text-muted);
}

.gx-tools {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  text-align: center;
}

.gx-tools__title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
}

.gx-tools__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.gx-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
}


/* --------------------------------------------------------------------------
   Reduced motion: карта стоит неподвижно, лучи и кометы выключены
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gx-map__warp,
  .gx-map__nebula,
  .gx-orbit,
  .gx-planet__body,
  .gx-core__ring {
    animation: none !important;
  }

  .gx-core__ring,
  .gx-route::after {
    display: none;
  }
}