/* ============================================================
   ГЕОГРАФИЯ РАБОТ (work-geo) – карта РФ (реальный GeoJSON) → фокус
   на ЦФО → паутина маршрутов от Ярославля. Overlay-плашки поверх
   карты с затемнением. Industrial / dark-tech, компактная высота.
   ============================================================ */

.work-geo{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(40px, 5vw, 72px) 0;

  --wg-accent:   #3aa0ff;
  --wg-accent-2: #8ddcff;
  --wg-land:     rgba(96,165,250,.10);
  --wg-land-bd:  rgba(125,211,252,.16);
  --wg-cfo:      rgba(56,189,248,.12);
  --wg-cfo-bd:   rgba(125,211,252,.36);
  --wg-yar:      rgba(120,200,255,.30);
  --wg-yar-bd:   rgba(186,230,253,.72);
  --wg-grid:     rgba(124,182,255,.06);
  --wg-panel:    rgba(10,22,39,.74);
  --wg-panel-bd: rgba(125,211,252,.18);
  --wg-text:     var(--text);
  --wg-muted:    var(--text-soft, rgba(226,232,240,.72));
}
:root[data-theme="light"] .work-geo{
  --wg-accent:   #2563eb;
  --wg-accent-2: #0ea5e9;
  --wg-land:     rgba(37,99,235,.08);
  --wg-land-bd:  rgba(37,99,235,.18);
  --wg-cfo:      rgba(37,99,235,.12);
  --wg-cfo-bd:   rgba(37,99,235,.42);
  --wg-yar:      rgba(37,99,235,.26);
  --wg-yar-bd:   rgba(37,99,235,.7);
  --wg-grid:     rgba(37,99,235,.06);
  --wg-panel:    rgba(255,255,255,.82);
  --wg-panel-bd: rgba(37,99,235,.18);
  --wg-muted:    rgba(15,23,42,.66);
}

.work-geo__bg{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(720px 460px at 64% 26%, color-mix(in srgb, var(--wg-accent) 18%, transparent), transparent 60%),
    radial-gradient(620px 420px at 8% 96%, color-mix(in srgb, var(--wg-accent-2) 16%, transparent), transparent 65%);
}
.work-geo__grid{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(transparent 31px, var(--wg-grid) 32px),
    linear-gradient(90deg, transparent 31px, var(--wg-grid) 32px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 50%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 30%, #000 50%, transparent 100%);
}

.work-geo__content{ position:relative; z-index:1; }

/* интро – компактное, по центру */
.work-geo__intro{ max-width:760px; margin:0 auto clamp(18px,2.4vw,30px); text-align:center; }
.work-geo__kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--wg-accent-2); padding:7px 15px; margin-bottom:13px; border-radius:999px;
  border:1px solid var(--wg-panel-bd);
  background: color-mix(in srgb, var(--wg-accent) 9%, transparent);
}
.work-geo__kicker-dot{ width:7px; height:7px; border-radius:50%; background: var(--wg-accent-2);
  box-shadow:0 0 12px var(--wg-accent-2); animation: wgPulse 2.4s ease-in-out infinite; }
.work-geo__intro h2{ margin:0 0 10px; font-size:clamp(24px,3.3vw,40px); font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.work-geo__intro p{ margin:0 auto; max-width:680px; color:var(--wg-muted); font-size:clamp(14px,1.3vw,16px); line-height:1.55; font-weight:600; }

/* СЦЕНА: карта без рамки + overlay поверх */
.work-geo__stage{
  position:relative;
  min-height: clamp(380px, 46vw, 540px);
  display:grid; align-items:center;
}
.work-geo__map{
  position:absolute; inset:50% auto auto 50%;
  width: min(1080px, 96%); height:auto;
  transform: translate(-54%, -50%);
  overflow: visible; z-index:1;
  opacity:0; transition: opacity .9s ease;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--wg-accent) 16%, transparent));
}
.work-geo.is-revealed .work-geo__map{ opacity:1; }

/* слои карты */
.geo-russia-path{ fill: var(--wg-land); stroke: var(--wg-land-bd); stroke-width:.7; stroke-linejoin:round; }
.geo-cfo-path{ fill: var(--wg-cfo); stroke: var(--wg-cfo-bd); stroke-width:1; stroke-linejoin:round;
  opacity:0; transition: opacity .8s ease; }
.geo-yar-path{ fill: var(--wg-yar); stroke: var(--wg-yar-bd); stroke-width:1.4; stroke-linejoin:round;
  opacity:0; transition: opacity .8s ease .1s; filter:url(#geoGlow); }
.work-geo.is-map-revealed .geo-cfo-path,
.work-geo.is-map-revealed .geo-yar-path{ opacity:1; }

/* ==== маршруты-паутина: рисуются по очереди и НЕ исчезают (вся сеть видна) ==== */
.geo-route{
  fill:none; stroke:url(#geoLineGradient); stroke-width:1.15; stroke-linecap:round;
  opacity:0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wg-accent-2) 22%, transparent));
}
/* прорисовка (медленно, длительность задаётся из JS через --route-duration) */
.geo-route.is-drawing{ opacity:.95; animation: geoRouteDraw var(--route-duration, 800ms) cubic-bezier(.19,1,.22,1) forwards; }
/* нарисованный маршрут – спокойный фон сети, остаётся видимым */
.geo-route.is-complete{ opacity:.34; stroke-dashoffset:0; }
/* активная связь – ярче и толще, остальные не пропадают */
.geo-route.is-active{
  opacity:1; stroke-width:1.85; stroke-dashoffset:0;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--wg-accent-2) 46%, transparent))
          drop-shadow(0 0 22px color-mix(in srgb, var(--wg-accent-2) 18%, transparent));
}

/* световой импульс по линии */
.geo-spark{ fill:#eaf6ff; opacity:0; filter:url(#geoGlow); }
.geo-spark.lit{ opacity:.9; }

/* ==== города ==== */
.geo-city{ cursor:pointer; opacity:0; }
.geo-city.is-visible{ opacity:1; animation: geoIgnite .6s ease forwards; }
.geo-city__halo{
  fill: color-mix(in srgb, var(--wg-accent) 5%, transparent);
  stroke: color-mix(in srgb, var(--wg-accent-2) 12%, transparent);
  stroke-width: .45;
  opacity: .28;
  transform-box:fill-box; transform-origin:center;
  transition: fill .3s ease, stroke .3s ease, opacity .3s ease, transform .3s ease;
}
.geo-city__dot{
  fill: rgba(191,239,255,.95);
  filter:
    drop-shadow(0 0 1.2px color-mix(in srgb, var(--wg-accent-2) 34%, transparent))
    drop-shadow(0 0 3px color-mix(in srgb, var(--wg-accent) 9%, transparent));
}
.geo-city.is-active .geo-city__halo,
.geo-city:hover .geo-city__halo{
  fill: color-mix(in srgb, var(--wg-accent-2) 9%, transparent);
  stroke: color-mix(in srgb, var(--wg-accent-2) 30%, transparent);
  opacity: .52;
  transform: scale(1.12);
}
.geo-city.is-active .geo-city__dot,
.geo-city:hover .geo-city__dot{
  fill:#fff;
  filter:
    drop-shadow(0 0 1.8px rgba(255,255,255,.44))
    drop-shadow(0 0 4px color-mix(in srgb, var(--wg-accent-2) 16%, transparent));
}
.geo-city--minor .geo-city__halo{ opacity:.22; }
.geo-city--major .geo-city__halo,
.geo-city--key .geo-city__halo{ opacity:.26; }

/* ЯРОСЛАВЛЬ – спокойный яркий хаб: мягкое «дыхание», без стробоскопа */
.geo-city--hub .geo-city__dot{
  fill:#fff;
  filter:
    drop-shadow(0 0 1.8px rgba(255,255,255,.50))
    drop-shadow(0 0 5px color-mix(in srgb, var(--wg-accent-2) 18%, transparent));
}
.geo-city--hub .geo-city__halo{
  fill: color-mix(in srgb, var(--wg-accent-2) 7%, transparent);
  stroke: color-mix(in srgb, var(--wg-accent-2) 24%, transparent);
  opacity:.34;
}
.geo-city--hub.lit .geo-city__halo{ animation: geoHubBreath 3800ms ease-in-out infinite; }
.geo-city__ring{ fill:none; stroke: var(--wg-accent-2); stroke-width:.45; opacity:0; transform-box:fill-box; transform-origin:center; }
.geo-city--hub.lit .geo-city__ring{ animation: geoHubRing 4200ms ease-out infinite; }

/* ==== выноски (leader lines): тонкие, светлые, видны только с подписью ==== */
.geo-leader{
  stroke: color-mix(in srgb, var(--wg-accent-2) 55%, transparent);
  stroke-width:.45; opacity:0; pointer-events:none;
  transition: opacity .4s ease;
}
.geo-city.has-leader.geo-city--key .geo-leader,
.geo-city.has-leader.geo-city--major .geo-leader,
.geo-city.has-leader.geo-city--hub .geo-leader{ opacity:.42; }
.geo-city.has-leader.is-label-visible .geo-leader{ opacity:.34; }
.geo-city.has-leader.is-active .geo-leader,
.geo-city.has-leader:hover .geo-leader{ opacity:.72; stroke-width:.55; }

/* ==== подписи: 3 уровня. Деликатная типографика, лёгкая обводка ==== */
.geo-city__label{
  fill: var(--wg-text); font-size:4.3px; font-weight:700;
  paint-order: stroke; stroke: rgba(3,8,18,.7); stroke-width:1.1px; stroke-linejoin:round;
  opacity:0; pointer-events:none; transition: opacity .42s ease;
}
.geo-city__sub{
  fill: var(--wg-accent-2); font-size:3.1px; font-weight:600;
  paint-order: stroke; stroke: rgba(3,8,18,.7); stroke-width:.9px; stroke-linejoin:round;
  opacity:0; pointer-events:none; transition: opacity .42s ease;
}
/* СВЕТЛАЯ ТЕМА: единая логика подписей.
   В тёмной теме hub/active подписи становятся белыми (fill:#fff) — на светлой
   карте это давало невидимый/мерцающий текст. Здесь приводим ВСЕ состояния
   к тёмному инку + тонкая белая обводка-гало (paint-order: stroke из базы). */
:root[data-theme="light"] .geo-city__label,
:root[data-theme="light"] .geo-city__sub,
:root[data-theme="light"] .geo-city--hub .geo-city__label,
:root[data-theme="light"] .geo-city--minor .geo-city__label,
:root[data-theme="light"] .geo-city.is-active .geo-city__label{
  stroke: rgba(255,255,255,.92);
  stroke-width: .9px;
  paint-order: stroke;
}
:root[data-theme="light"] .geo-city__label,
:root[data-theme="light"] .geo-city--hub .geo-city__label,
:root[data-theme="light"] .geo-city.is-active .geo-city__label{ fill: #16203a; }
:root[data-theme="light"] .geo-city--minor .geo-city__label{ fill: rgba(22,32,58,.82); }
:root[data-theme="light"] .geo-city__sub{ fill: #0e7490; }
/* тултип в светлой теме — белый чип с тёмным текстом (вместо тёмного) */
:root[data-theme="light"] .work-geo__tip{
  color: #16203a;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(20,40,90,.18);
}
:root[data-theme="light"] .work-geo__tip small{ opacity:.62; }
/* хаб – крупнее остальных, но не гигант */
.geo-city--hub .geo-city__label{ font-size:6px; font-weight:800; fill:#fff; }
/* second-уровень минорных – мельче и спокойнее */
.geo-city--minor .geo-city__label{ font-size:3.7px; font-weight:600; fill: color-mix(in srgb, var(--wg-text) 86%, transparent); }

/* Видимость: is-visible / is-label-visible закрепляют появившийся город.
   is-active только усиливает текущий узел и подпись. */
.work-geo.is-hub-ready .geo-city--hub .geo-city__label,
.work-geo.is-hub-ready .geo-city--hub .geo-city__sub{ opacity:1; }
.work-geo.is-network-complete .geo-city--key .geo-city__label{ opacity:.92; }
.work-geo.is-network-complete .geo-city--major .geo-city__label{ opacity:.92; }
.geo-city.is-active .geo-city__label,
.geo-city.is-label-visible .geo-city__label,
.geo-city:hover .geo-city__label{ opacity:1; transform: translateY(0); }
/* активный город – подпись и обводка ярче поверх остальных */
.geo-city.is-active .geo-city__label{ fill:#fff; }

/* tooltip */
.work-geo__tip{
  position:absolute; z-index:6; pointer-events:none; transform: translate(-50%,-118%);
  padding:7px 11px; border-radius:10px; white-space:nowrap;
  font-size:12.5px; font-weight:800; color:#fff;
  background: rgba(8,14,28,.94); border:1px solid var(--wg-panel-bd);
  box-shadow:0 10px 26px rgba(2,8,23,.5);
}
.work-geo__tip small{ display:block; font-weight:600; opacity:.72; font-size:11px; margin-top:1px; }

/* OVERLAY справа поверх карты */
.work-geo__overlay{
  position:relative; z-index:4;
  width:min(380px,100%); margin-left:auto; padding:22px;
}
.work-geo__shade{
  position:absolute; inset:-34px -26px -34px -40px; z-index:-1; border-radius:30px;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--wg-accent) 16%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--wg-panel) 92%, transparent), color-mix(in srgb, var(--wg-panel) 58%, transparent));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
          mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.work-geo__kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
.work-geo__kpi{ padding:12px 13px; border-radius:14px; border:1px solid var(--wg-panel-bd);
  background: var(--wg-panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.work-geo__kpi strong{ display:block; color:var(--wg-accent-2); font-size:19px; font-weight:1000; line-height:1; }
.work-geo__kpi span{ display:block; margin-top:4px; color:var(--wg-muted); font-size:12px; font-weight:700; line-height:1.2; }

/* стопка карточек городов – премиальная плавная смена (fade + slight slide) */
.work-geo__cards{ position:relative; min-height:118px; margin-bottom:13px; }
.work-geo__card{
  position:absolute; inset:0; display:grid; align-content:center; gap:5px;
  padding:16px 18px; border-radius:16px; text-decoration:none; color:var(--wg-text);
  border:1px solid var(--wg-panel-bd); background: var(--wg-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0; transform: translateY(10px) scale(.98); pointer-events:none; z-index:1;
  transition: opacity .56s cubic-bezier(.19,1,.22,1), transform .56s cubic-bezier(.19,1,.22,1),
              border-color .56s ease, box-shadow .56s ease;
}
.work-geo__card.is-active{
  opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:3;
  border-color: color-mix(in srgb, var(--wg-accent) 45%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--wg-accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
}
/* уходящая карточка держится сверху и плавно опускается */
.work-geo__card.is-leaving{ z-index:2; opacity:0; transform: translateY(8px) scale(.98); }
.work-geo__card.is-entering{ z-index:3; }
.work-geo__card-region{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--wg-accent-2); }
.work-geo__card strong{ font-size:24px; font-weight:1000; line-height:1; }
.work-geo__card-note{ color:var(--wg-muted); font-size:13px; font-weight:700; line-height:1.35; }
.work-geo__card.is-hub .work-geo__card-region{ color:#ffd479; }

.work-geo__actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

/* SEO-строка с городами */
.work-geo__seo{
  margin: clamp(14px,2vw,24px) auto 0; max-width:920px; text-align:center;
  font-size:12.5px; line-height:1.7; color:var(--wg-muted);
}
.work-geo__seo a{ color: color-mix(in srgb, var(--wg-accent-2) 80%, var(--wg-text)); text-decoration:none; font-weight:700; }
.work-geo__seo a:hover{ text-decoration:underline; }

/* ===== анимации ===== */
@keyframes wgPulse{ 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes geoRouteDraw{ from{stroke-dashoffset:var(--len)} to{stroke-dashoffset:0} }
/* ВАЖНО: только opacity. CSS transform на .geo-city заменил бы SVG-атрибут
   transform="translate(x,y)" и увёл бы точку города в (0,0) за пределы viewBox. */
@keyframes geoIgnite{ from{opacity:0} to{opacity:1} }
/* мягкое «дыхание» хаба – медленно, без стробоскопа */
@keyframes geoHubBreath{ 0%,100%{opacity:.26;transform:scale(.96)} 50%{opacity:.52;transform:scale(1.14)} }
@keyframes geoHubRing{ 0%{opacity:.22;transform:scale(.84)} 70%{opacity:0;transform:scale(1.24)} 100%{opacity:0;transform:scale(1.24)} }

/* ===== адаптив ===== */
@media (max-width: 980px){
  .work-geo__stage{ min-height:auto; display:block; }
  .work-geo__map{ position:relative; inset:auto; width:100%; transform:none; margin:0 auto; }
  .work-geo__overlay{ width:100%; margin:-30px auto 0; padding:18px; }
  .work-geo__shade{ inset:-18px -14px; -webkit-mask-image:none; mask-image:none; border-radius:22px; }
}
@media (max-width: 560px){
  .work-geo{ padding:48px 0; }
  .work-geo__kpis{ grid-template-columns:1fr 1fr; }
  /* На мобиле подписи компактнее, но уже проявленные города не пропадают. */
  .geo-city__label{ display:none; }
  .work-geo.is-network-complete .geo-city--key .geo-city__label,
  .work-geo.is-network-complete .geo-city--major .geo-city__label{ opacity:.74; }
  .geo-city--hub .geo-city__label,
  .geo-city.is-label-visible .geo-city__label,
  .geo-city.is-active .geo-city__label{ display:block; opacity:.82; }
  .geo-city.geo-city--key.is-label-visible .geo-city__label,
  .geo-city.geo-city--major.is-label-visible .geo-city__label{ font-size:3.4px; opacity:.76; }
  .geo-city.geo-city--minor.is-label-visible .geo-city__label{ font-size:2.9px; opacity:.52; }
  .geo-city.is-active .geo-city__label{ opacity:1; }
  .geo-city__sub{ display:none; }
  .geo-leader{ opacity:0 !important; }
  .geo-city.is-label-visible.has-leader .geo-leader{ opacity:.16 !important; }
  .geo-city.is-active.has-leader .geo-leader{ opacity:.54 !important; }
  .geo-city--hub .geo-city__label{ font-size:5.4px; opacity:1; }
  .geo-city.is-active .geo-city__label{ font-size:4.8px; }
  .work-geo__cards{ min-height:108px; }
  .work-geo__actions{ grid-template-columns:1fr; }
}

/* ===== reduced motion: сразу готовая сеть, мягкий статичный хаб ===== */
@media (prefers-reduced-motion: reduce){
  .work-geo__map{ transition: opacity .3s ease; }
  .geo-route, .geo-city, .work-geo__card, .geo-cfo-path, .geo-yar-path{ transition: opacity .3s ease !important; }
  .geo-route.is-drawing{ animation:none !important; opacity:.34; stroke-dashoffset:0 !important; }
  .geo-route.is-complete{ opacity:.34; }
  .geo-city.is-visible{ animation:none !important; opacity:1; }
  .geo-spark{ display:none !important; }
  .geo-city--hub.lit .geo-city__halo,
  .geo-city--hub.lit .geo-city__ring,
  .work-geo__kicker-dot{ animation:none !important; }
  .geo-city--hub .geo-city__halo{ opacity:.8; }       /* мягкий статичный glow */
}