/* КАРТА-2: карта городов в секции #geo лендинга.
   Разметка — templates/landing/geo_fragment.html (SSI-включение).
   Токены --ec-* лендинга, шрифт — основной (Golos Text), не PT Serif эталона.
   Огоньки — «розовое золото» (эталон v13, решение PO 16.09.2026):
   сердцевина #fff6ee, свечение #fff0e4 → #f0b39a → #d9705e, ореол #c9584a.
   Пятна — шкала эталона #9fcab8 → #0b5c44 (рисует JS карточки 3).
   Города стоят на местах без JS и не прячутся — скрытого контента нет. */

.geo-map { margin-top: 32px; }

.geo-lead {
  font-family: 'PT Serif', serif;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ec-text);
  margin: 0;
}

.geo-sub {
  font-size: 16px;
  color: var(--ec-text-2);
  margin: 6px 0 16px;
}

.geo-stage {
  position: relative;
  height: min(74vh, 700px);
  min-height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ec-bg);
  box-shadow: inset 0 0 0 1px var(--ec-border);
}

.geo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y pinch-zoom;
}

.geo-svg .heat circle { mix-blend-mode: multiply; }
/* КАРТА-4 (решение PO 17.09.2026): на тач-устройствах (класс is-touch ставит
   geo.js по navigator.maxTouchPoints) — без смешивания слоёв и без дыхания
   огоньков, вспышки остаются. На время жеста анимации стоят. */
.geo-stage.is-touch .geo-svg .heat circle { mix-blend-mode: normal; }
.geo-stage.is-touch .geo-svg .light .bloom { animation: none; }
.geo-stage.is-gesture .geo-svg .light .bloom,
.geo-stage.is-gesture .geo-ghint * { animation-play-state: paused; }
.geo-svg.dragging { cursor: grabbing; }

/* Контур (КАРТА-3b): рисует geo.js после ленивой загрузки. Цвета — эталон v13. */
.geo-svg .land  { fill: #e4ece6; stroke: #b9cbbf; stroke-width: .7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.geo-svg .lake  { fill: #d5e5ec; stroke: none; }
.geo-svg .river { fill: none; stroke: #a8c4d4; stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

.geo-svg .light { cursor: pointer; }
.geo-svg .light .bloom {
  fill: url(#bloom);
  transform-box: fill-box;
  transform-origin: center;
  animation: geo-breathe 3.6s ease-in-out infinite;
}
.geo-svg .light .glow { fill: url(#glow); transform-box: fill-box; transform-origin: center; }
.geo-svg .light .core { fill: #fff6ee; }

.geo-svg .city[data-fresh="1"] .light .glow  { transform: scale(1.25); }
.geo-svg .city[data-fresh="1"] .light .bloom { opacity: .95; }
.geo-svg .city[data-fresh="2"] .light .glow  { transform: scale(1.5); }
.geo-svg .city[data-fresh="2"] .light .bloom { transform: scale(1.25); }
.geo-svg .city[data-fresh="3"] .light .glow  { transform: scale(1.8); }
.geo-svg .city[data-fresh="3"] .light .bloom { transform: scale(1.5); }

.geo-svg .city:nth-child(3n) .light .bloom   { animation-delay: -1.2s; }
.geo-svg .city:nth-child(3n+1) .light .bloom { animation-delay: -2.4s; }

.geo-svg .city text.name {
  font: 400 15px/1 'Golos Text', sans-serif;
  fill: var(--ec-text);
  paint-order: stroke;
  stroke: var(--ec-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: start;
  dominant-baseline: central;
  transition: opacity .25s;
}
.geo-svg .city.is-quiet text.name { opacity: 0; }

@keyframes geo-breathe {
  0%, 100% { opacity: .75; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

.geo-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: rgba(217, 112, 94, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 4px 14px rgba(217, 112, 94, .28);
  font: 400 13px/1.2 'Golos Text', sans-serif;
  padding: 6px 9px;
  border-radius: 7px;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
}
.geo-tip.show { opacity: 1; }

.geo-last { position: absolute; left: 14px; top: 14px; z-index: 2; }
.geo-last button {
  border: 0;
  border-radius: 10px;
  background: var(--ec-green-600);
  color: #fff;
  font: 600 14px/1 'Golos Text', sans-serif;
  padding: 11px 14px;
  box-shadow: 0 1px 2px rgba(26, 43, 36, .08), 0 6px 20px rgba(26, 43, 36, .08);
  cursor: pointer;
}
.geo-last button:hover { background: var(--ec-green-900); }

.geo-controls {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.geo-controls button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--ec-surface);
  color: var(--ec-text);
  font: 400 22px/1 'Golos Text', sans-serif;
  box-shadow: 0 1px 2px rgba(26, 43, 36, .08), 0 6px 20px rgba(26, 43, 36, .08);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.geo-controls button:hover { color: var(--ec-green-600); }
.geo-controls button:focus-visible,
.geo-last button:focus-visible { outline: 2px solid var(--ec-green-400); outline-offset: 2px; }
.geo-controls button.home { font-size: 15px; }

.geo-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  background: var(--ec-surface);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 1px 2px rgba(26, 43, 36, .08), 0 6px 20px rgba(26, 43, 36, .08);
  font-size: 12.5px;
  color: var(--ec-text-3);
  line-height: 1.3;
}
.geo-legend .bar {
  height: 9px;
  width: 130px;
  border-radius: 5px;
  margin: 5px 0 4px;
  background: linear-gradient(90deg, #9fcab8, #7fb9a2 45%, #0b5c44);
}
.geo-legend .ends { display: flex; justify-content: space-between; }

/* Жестовая подсказка — эталон v15 (решение PO 16.09.2026, текстовой нет):
   матовое стекло в центре сцены; тач — щипок со сдвигом, мышь — рука тянет.
   Показ и угасание — geo.js; reduced-motion — не показывается. */
.geo-ghint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(26, 43, 36, .10), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.geo-ghint.show { opacity: 1; }
/* Погасшая подсказка не анимируется — в покое ноль перерисовок (КАРТА-4). */
.geo-ghint:not(.show) * { animation-play-state: paused; }
.geo-ghint .ring { fill: none; stroke: none; }
.geo-ghint .f { fill: var(--ec-green-600); opacity: .9; }
.geo-ghint .chev { stroke: var(--ec-green-600); opacity: .55; }
.geo-ghint .hand { display: none; }
@keyframes geo-pinch-a { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-11px, -11px); } 70% { transform: translate(-11px, -11px) translate(8px, 0); } }
@keyframes geo-pinch-b { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(11px, 11px); } 70% { transform: translate(11px, 11px) translate(8px, 0); } }
.geo-ghint .f1 { animation: geo-pinch-a 2.2s ease-in-out infinite; }
.geo-ghint .f2 { animation: geo-pinch-b 2.2s ease-in-out infinite; }
@keyframes geo-drag { 0% { transform: translate(-9px, 0); } 50% { transform: translate(9px, 0); } 100% { transform: translate(-9px, 0); } }
.geo-ghint .grab { animation: geo-drag 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .geo-ghint .pinch { display: none; }
  .geo-ghint .hand { display: block; }
}

@media (max-width: 640px) {
  .geo-stage { height: 62vh; border-radius: 12px; }
  .geo-svg .city text.name { font-size: 14px; }
  .geo-lead { font-size: 19px; }
}

@media (min-width: 960px) {
  .geo-lead { font-size: 26px; }
  .geo-sub { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .geo-svg .light .bloom { animation: none; }
  .geo-ghint { display: none; }
}