/* ============================================================
   Карта США — общая часть для всех блоков с картой.

   Файл описывает саму карту и её движение; раскладку блока вокруг неё
   (заголовок, метрики, отступы секции) задаёт CSS страницы:
     главная                 — landing/css/main.css, блок «Metrics»;
     Health ProtectorGuard   — landing/css/health-protector-guard.css,
                               блок «Где доступно».

   Работает в паре с landing/js/us-map.js: до скрипта карта стоит на
   странице картинкой (видна и без JS), скрипт подменяет её инлайновым SVG
   и добавляет слои .map__base / .map__breath / .map__veil / .map__pop —
   к ним относится большая часть правил ниже.

   Цвета берутся из токенов страницы: --c-page (фон, им же приглушается
   карта) и --c-hover (тёмный оттенок штата под курсором). Оба объявлены и
   на главной, и на странице продукта. Цвета самих штатов лежат внутри
   файла карты (см. scripts/build_us_map.py).

   Ступени ширины — из макета: 647px на десктопе, 518 на планшете, 320 на
   мобильном. Уже 320px мелкие штаты Новой Англии сливаются, поэтому ниже
   карта не ужимается, а только вписывается в колонку по max-width.
   ============================================================ */
.us-map {
  width: 647px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 647 / 500;
}

@media (max-width: 1023px) {
  .us-map {
    width: 518px;
  }
}

@media (max-width: 767px) {
  .us-map {
    width: 320px;
  }
}

/* --- Подсветка штата под курсором ---------------------------
   Работает только после того, как us-map.js заменит <img> инлайновым
   SVG, и только на рабочих штатах (.state--lit).

   Штат под курсором рисуется дважды: снизу остаётся оригинал в общей
   стопке, сверху — его копия в слое .map__pop. Копия нужна из-за того,
   что в SVG нет z-index: увеличенный Техас без неё полез бы под соседей,
   а переставлять узлы на каждом наведении — дёргать дерево там, где
   достаточно одной копии. Копия крупнее оригинала, поэтому полностью его
   закрывает и приглушение стопки её не касается.

   Пролётов под копию два, и они меняются местами: переход от штата к
   штату идёт внахлёст — уходящий оседает и гаснет, приходящий подрастает.
   С одним пролётом смена была бы подменой картинки, то есть рывком.
   Контурам наложение идёт на пользу — в отличие от текста, они лежат в
   разных местах карты и не мешают друг другу читаться.

   Приглушение карты сделано не прозрачностью стопки, а вуалью — плашкой
   цвета страницы поверх неё. Результат тот же (полстопки поверх фона и
   полфона поверх стопки дают одно и то же), а цена разная: прозрачность
   группы заставляет браузер каждый кадр перерисовывать все двести
   контуров в отдельный буфер, вуаль же — одна плашка.

   Тени под копией нет намеренно: фильтр на SVG пересчитывается каждый
   кадр, а вместе с масштабированием — ещё и на новом размере. Подъём
   читается и без неё: цвет темнее, размер больше, остальное приглушено.

   Заливка копии перебивает <style> внутри самого SVG-файла (там правило
   .state--lit path), поэтому селектор нарочно длиннее.
   ----------------------------------------------------------- */
svg.us-map {
  /* Вылет увеличенного штата не должен срезаться рамкой viewBox. */
  overflow: visible;
}

.us-map .map__veil {
  fill: var(--c-page);
  opacity: 0;
  transition: opacity 260ms ease;
}

.us-map.is-active .map__veil {
  opacity: 0.45;
  transition-duration: 200ms;
}

.us-map .map__veil,
.us-map .map__pop,
.us-map .map__breath {
  pointer-events: none;
}

.us-map .map__pop-shape {
  /* fill-box: масштаб считается от центра самого штата, а не от карты. */
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(1);
  will-change: opacity, transform;
  transition: opacity 200ms ease, transform 200ms ease;
}

.us-map .map__pop-shape.is-on {
  opacity: 1;
  transform: scale(1.05);
  transition-duration: 140ms, 200ms;
}

.us-map .map__pop path {
  fill: var(--c-hover);
}

/* Дыхание: пока по карте не водят, случайный рабочий штат медленно
   набирает воздух — приподнимается и чуть увеличивается. Цветом дышать
   бесполезно: разница между рабочим оттенком и тёмным в мелком контуре
   почти не читается, а движение видно боковым зрением.

   Копия живёт ровно один вдох: us-map.js кладёт её в слой и убирает по
   окончании, поэтому анимация всегда начинается с нуля. */
@keyframes us-map-breath {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-4px) scale(1.05);
  }
}

.us-map .map__breath {
  transition: opacity 200ms ease;
}

.us-map.is-active .map__breath {
  /* Вдох на полпути не обрывается рывком, а уходит вместе с приглушением. */
  opacity: 0;
}

.us-map .map__breath-shape {
  transform-box: fill-box;
  transform-origin: center;
  animation: us-map-breath 3000ms cubic-bezier(0.37, 0, 0.35, 1) both;
}

.us-map .state--held {
  /* Оригинал молчит, пока его копия делает вдох: иначе из-под поднятой
     копии выглядывал бы его нижний край. Прячется он в кадре, где копия
     ещё лежит на нём один в один, поэтому подмена не видна. */
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  /* Спокойный режим: подсветка остаётся — это сведения, а не украшение, —
     но происходит мгновенно и без масштаба. Дыхание карты выключает сам
     us-map.js. */
  .us-map .map__veil,
  .us-map.is-active .map__veil,
  .us-map .map__pop-shape,
  .us-map .map__pop-shape.is-on {
    transition: none;
  }

  .us-map .map__pop-shape,
  .us-map .map__pop-shape.is-on {
    transform: none;
  }
}