/* ═══════════════════════════════════════════════
   A.S. BUSINESS · Hero Ecosystem Engine v4
   Живой интеллект экосистемы · OpenAI + Apple + Stripe + premium sci-fi.
   Dark navy base · warm gold accents · glassmorphism.
   Namespaced under .ecosystem-engine

   Архитектура v4 (вариант A — CSS-вращение):
   - .ee-orbit-system  → вращается целиком (1 оборот / 150s)
   - .ee-node__counter → контр-вращается (текст всегда горизонтален)
   - .ee-core          → НЕ вращается (pulse / glow / energy rings / particles)
═══════════════════════════════════════════════ */

.ecosystem-engine {
  --ee-gold:       #C7BCA6;
  --ee-gold-warm:  #D4B483;
  --ee-gold-light: #E6E2DA;
  --ee-navy:       #0B1020;

  position: relative;
  width: 100%;
  max-width: 620px;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;
  transform: scale(1);
  transform-origin: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.ee-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ════════════ ВРАЩАЮЩИЕСЯ СИСТЕМЫ (две синхронные группы) ════════════
   ViewBox 600×600 → центр (300,300). Связи (links-system) и узлы
   (nodes-system) — две отдельные группы, обе вращаются за 150s
   синхронно (одинаковая анимация, нулевой delay) → визуально одно целое.
   Между ними в DOM: орбиты + ядро (правильный порядок слоёв). */
.ee-orbit-system {
  transform-box: view-box;
  transform-origin: 300px 300px;
  animation: ee-rotate-orbit 150s linear infinite;
  animation-delay: 0s;
  will-change: transform;
}

@keyframes ee-rotate-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* контр-вращение содержимого модулей: иконка + номер остаются
   горизонтальными (transform-origin = центр шара) */
.ee-node__counter {
  transform-box: fill-box;
  transform-origin: center;
  animation: ee-counter-rotate 150s linear infinite;
  animation-delay: 0s;
  will-change: transform;
}

/* контр-вращение подписи: ОТДЕЛЬНЫЙ слой, вращается вокруг ЦЕНТРА ШАРА
   (а не центра текста), поэтому подпись всегда строго под шаром и
   всегда горизонтальна. НЕ участвует в hover-scale. */
.ee-node__label-counter {
  transform-box: fill-box;
  transform-origin: center;
  animation: ee-counter-rotate 150s linear infinite;
  animation-delay: 0s;
  will-change: transform;
}

@keyframes ee-counter-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ════════════ ДЕКОРАТИВНЫЕ ЭЛЛИПТИЧЕСКИЕ ОРБИТЫ ════════════
   Энергетические поля глубины. Это НЕ траектории шаров — они
   вращаются независимо, со слегка разной скоростью/направлением,
   создавая ощущение многослойной живой AI-вселенной. */
.ee-orbits { transform-box: fill-box; transform-origin: center; }

.ee-orbit {
  fill: none;
  stroke: #D4B483;
  stroke-width: .6;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.ee-orbit--1 { opacity: .22; animation: ee-rotate-orbit 150s linear infinite; }
.ee-orbit--2 { opacity: .18; animation: ee-rotate-orbit 170s linear infinite reverse; }
.ee-orbit--3 { opacity: .20; animation: ee-rotate-orbit 130s linear infinite; }



/* ════════════ ОРБИТЫ ЯДРА (5 плоскостей, статичные) ════════════ */
.ee-core-orbits { transform-box: fill-box; transform-origin: center; }

.ee-corbit {
  fill: none;
  stroke: rgba(212,180,131,.22);
  stroke-width: 1;
  transition: stroke .4s ease;
}

.ee-core-orbits.is-active .ee-corbit {
  stroke: rgba(212,180,131,.5);
}

/* ════════════ ЯДРО (НЕ вращается) ════════════ */
.ee-core { cursor: default; }
.ee-core > * { transform-origin: center; transform-box: fill-box; }

.ee-core__glow {
  animation: ee-pulse 4s ease-in-out infinite;
}
@keyframes ee-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.ee-core__inner {
  animation: ee-pulse-inner 3.4s ease-in-out infinite;
}
@keyframes ee-pulse-inner {
  0%, 100% { opacity: .5; transform: scale(.96); }
  50%      { opacity: .9; transform: scale(1.04); }
}

.ee-core__ring {
  animation: ee-ring 6s ease-in-out infinite;
}
@keyframes ee-ring {
  0%, 100% { opacity: .35; }
  50%      { opacity: .85; }
}

/* энергетические кольца: медленно расходятся от ядра и гаснут */
.ee-core__energy {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.ee-core__energy--1 { animation: ee-energy 7s ease-out infinite; }
.ee-core__energy--2 { animation: ee-energy 7s ease-out infinite; animation-delay: 2.33s; }
.ee-core__energy--3 { animation: ee-energy 7s ease-out infinite; animation-delay: 4.66s; }

@keyframes ee-energy {
  0%   { transform: scale(.62); opacity: 0; }
  18%  { opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

.ee-core__sphere { filter: drop-shadow(0 8px 40px rgba(0,0,0,.55)); }
.ee-core__highlight { opacity: .85; }

.ee-core__mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px; font-weight: 600;
  fill: var(--ee-gold-light); letter-spacing: 1px;
}
.ee-core__brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  fill: var(--ee-gold-warm);
}
.ee-core__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px; font-weight: 500; letter-spacing: 3px;
  fill: rgba(199,188,166,.7);
}


/* ════════════ СВЯЗИ ════════════ */
.ee-link {
  stroke: rgba(212,180,131,.16);
  stroke-width: 1;
  transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease, opacity .3s ease;
}
.ee-link--inter {
  stroke: #D4B483;
  opacity: .22;                 /* 0.18–0.25 — интеллектуальная сеть */
}
.ee-link--dashed { stroke-dasharray: 4 7; }


.ee-link.is-active {
  stroke: #D4B483;
  opacity: 1;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(212,180,131,.7));
}


/* слой частиц поверх линий */
.ee-particles, .ee-core-particles { pointer-events: none; }

/* световые частицы по линиям */
.ee-flow {
  fill: var(--ee-gold-warm);
  filter: drop-shadow(0 0 5px rgba(212,180,131,.9));
  opacity: .95;
}

/* частицы вокруг ядра (по круговым орбитам) */
.ee-core-flow {
  fill: url(#eeCoreParticleGrad);
  filter: drop-shadow(0 0 4px rgba(212,180,131,.8));
}


/* ════════════ МОДУЛИ ════════════ */
.ee-node { cursor: pointer; }

/* visual-обёртка: ТОЛЬКО она масштабируется при hover (halo/ring/circle/
   shine/counter). Подпись (label-counter) вне этой обёртки → не масштабируется. */
.ee-node__visual {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}


/* мягкое внешнее свечение (видно на hover) */
.ee-node__halo {
  fill: rgba(212,180,131,.0);
  transition: fill .35s ease;
}

/* золотое кольцо */
.ee-node__ring {
  fill: none;
  stroke: rgba(212,180,131,.30);
  stroke-width: 1.5;
  transition: stroke .3s ease, filter .3s ease;
}

/* стеклянный шар (glass morphism) */
.ee-node__circle {
  fill: url(#eeNodeGrad);
  stroke: rgba(199,188,166,.28);
  stroke-width: 1;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45));
  transition: stroke .3s ease, filter .3s ease;
}

/* СТЕКЛЯННЫЙ БЛИК = точная уменьшенная копия .ee-core__highlight ядра
   (тот же градиент #eeHighlight, геометрия ×0.6 задаётся в JS).
   Контр-вращается вокруг ЦЕНТРА ШАРА, чтобы свет всегда падал из одной
   точки (как у counter), несмотря на вращение системы.
   Геометрия highlight (JS): cx=-13.2 cy=-18 rx=25.2 ry=16.8 (NODE_R=54).
   bbox highlight: x∈[-38.4,-12], y∈[-34.8,-1.2] → ширина 26.4, высота 33.6.
   Центр шара (0,0) относительно bbox (transform-box: fill-box):
     originX = 0 - (-38.4) = 38.4px
     originY = 0 - (-34.8) = 34.8px */
.ee-node__highlight {
  pointer-events: none;

  transform-box: fill-box;

  /* NODE_R=54 */
  transform-origin: 38.4px 34.8px;

  animation: ee-counter-rotate 150s linear infinite;
}

/* SVG-иконка (gold outline) — ГЛАВНЫЙ акцент внутри шара (34×34, stroke 2) */
.ee-node__icon {
  fill: none;
  stroke: var(--ee-gold-warm);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .3s ease, filter .3s ease;
}

/* номер внутри шара — уменьшенный, приглушённый (акцент = иконка) */
.ee-node__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px; font-weight: 600;
  fill: var(--ee-gold-warm);
  opacity: .75;
  text-anchor: middle; pointer-events: none;
}


/* подпись ВНЕ шара */
.ee-node__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600;
  fill: var(--ee-gold-light);
  text-anchor: middle; pointer-events: none;
  opacity: .9;
  transition: opacity .3s ease, fill .3s ease;
  paint-order: stroke;
  stroke: rgba(11,16,32,.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* HOVER / FOCUS подсветка — только node-hover, плавно.
   Масштабируется ТОЛЬКО visual-обёртка (шар + иконка + номер),
   подпись (label-counter) остаётся стабильной и горизонтальной. */
.ee-node:focus-visible { outline: none; }
.ee-node:hover .ee-node__visual,
.ee-node:focus-visible .ee-node__visual,
.ee-node.is-hover .ee-node__visual {
  transform: scale(1.06);
}
.ee-node:hover .ee-node__halo,
.ee-node:focus-visible .ee-node__halo,
.ee-node.is-hover .ee-node__halo {
  fill: rgba(212,180,131,.12);
}
.ee-node:hover .ee-node__ring,
.ee-node:focus-visible .ee-node__ring,
.ee-node.is-hover .ee-node__ring {
  stroke: var(--ee-gold-warm);
  filter: drop-shadow(0 0 20px rgba(212,180,131,.65));
}
.ee-node:hover .ee-node__circle,
.ee-node:focus-visible .ee-node__circle,
.ee-node.is-hover .ee-node__circle {
  stroke: var(--ee-gold-warm);
}
.ee-node:hover .ee-node__icon,
.ee-node:focus-visible .ee-node__icon,
.ee-node.is-hover .ee-node__icon {
  stroke: #fff;
  filter: drop-shadow(0 0 8px rgba(212,180,131,.6));
}
.ee-node:hover .ee-node__label,
.ee-node:focus-visible .ee-node__label,
.ee-node.is-hover .ee-node__label {
  opacity: 1; fill: #fff;
}

/* лёгкое затемнение остальных модулей при наведении на один
   (класс is-hovering ставится JS на nodes-system) */
.ee-nodes-system.is-hovering .ee-node:not(.is-hover) {
  opacity: .42;
  transition: opacity .35s ease;
}
.ee-nodes-system .ee-node {
  opacity: 1;
  transition: opacity .35s ease;
}
/* hover слегка замедляет вращение систем (без рывков) */
.ee-links-system.is-hovering,
.ee-nodes-system.is-hovering {
  animation-duration: 190s;
}


/* ════════════ SR ONLY ════════════ */
.ee-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ════════════ RESPONSIVE (mobile размер не наращиваем) ════════════ */
@media (max-width: 968px) {
  .ecosystem-engine {
    width: 100%; max-width: 460px; height: auto;
    aspect-ratio: 1 / 1; transform: none;
  }
}
@media (max-width: 768px) {
  /* Hero Ecosystem — центральный элемент мобильного первого экрана. */
  .ecosystem-engine {
    width: 100%;
    max-width: 95vw;
    padding: 0;
    transform: none;
    margin: auto;
  }

  /* орбиты — лёгкий декоративный фон (не перекрывают шары) */
  .ee-orbit--1 { opacity: .25; }
  .ee-orbit--2 { opacity: .20; }
  .ee-orbit--3 { opacity: .22; }
  .ee-corbit { stroke: rgba(212,180,131,.28); }
}


@media (max-width: 640px) {
  .ee-node__label { font-size: 14px; }
  .ee-core__brand { font-size: 16px; }
}
@media (max-width: 560px) {
  /* безопасно вписываем 520px-визуал в очень узкие экраны без обрезки glow */
  .ecosystem-engine { width: 92vw; height: 92vw; }
}



/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce) {
  .ee-orbit-system, .ee-node__counter, .ee-node__label-counter,
  .ee-orbit, .ee-corbit,
  .ee-core__glow, .ee-core__inner, .ee-core__ring, .ee-core__energy,
  .ee-node__visual, .ee-flow, .ee-core-flow {
    animation: none !important;
    transition: none !important;
  }
}