/* Движение на главной: шкала сезона растёт, карта рисуется, «когда» и «где» связаны.
   Всё под классами, которые ставит static/motion.js: не загрузился скрипт — страница просто
   статичная, ничего не спрятано. Только transform и opacity: вёрстка не сдвигается (CLS).
   Выключатель — HOME_MOTION=0 в окружении или ?motion=0 в адресе. */

/* 1. Шкала: полосы вытягиваются слева по очереди, даты проявляются, когда полоса дорисовалась */
.motion .tl[data-motion] .tl-bar {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 120ms);
}
.motion .tl[data-motion] .tl-dates { opacity: 0; transition: opacity .4s ease calc(var(--i, 0) * 120ms + 650ms); }
.motion .tl[data-motion].is-in .tl-bar { transform: none; }
.motion .tl[data-motion].is-in .tl-dates { opacity: 1; }

/* 2. Карта: земля проявляется, реки прочерчиваются, кольца расходятся от Москвы,
   точки загораются в порядке сезона и один раз пульсируют */
.motion .smap[data-motion] .smap-base { opacity: 0; transition: opacity .8s ease; }
.motion .smap[data-motion] .smap-rivers { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease-out .3s; }
.motion .smap[data-motion] .smap-ring {
  transform-box: view-box; transform-origin: var(--mx) var(--my); transform: scale(.15); opacity: 0;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(700ms + var(--i, 0) * 160ms),
              opacity 1s ease calc(700ms + var(--i, 0) * 160ms);
}
.motion .smap[data-motion] .smap-ring-label,
.motion .smap[data-motion] .smap-city,
.motion .smap[data-motion] .smap-city-label { opacity: 0; transition: opacity .6s ease 1.1s; }
.motion .smap[data-motion] .smap-point {
  opacity: 0; transform-box: view-box; transform-origin: var(--px) var(--py); transform: scale(.3);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) calc(1400ms + var(--i, 0) * 280ms),
              opacity .3s ease calc(1400ms + var(--i, 0) * 280ms);
}
.motion .smap[data-motion].is-in .smap-base,
.motion .smap[data-motion].is-in .smap-ring,
.motion .smap[data-motion].is-in .smap-ring-label,
.motion .smap[data-motion].is-in .smap-city,
.motion .smap[data-motion].is-in .smap-city-label,
.motion .smap[data-motion].is-in .smap-point { opacity: 1; transform: none; }
.motion .smap[data-motion].is-in .smap-rivers { stroke-dashoffset: 0; }
.motion .smap[data-motion] .smap-pulse { transform-box: fill-box; transform-origin: center; }
.motion .smap[data-motion].is-in .smap-pulse { animation: smap-pulse 1.3s ease-out calc(1500ms + var(--i, 0) * 280ms) 1; }
@keyframes smap-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* 3. «Когда» и «где» связаны: наводишь на фестиваль в шкале — его точка на карте ярче, и наоборот.
   Работает и при «уменьшить движение»: это подсветка, а не анимация */
.linked .tl-row, .linked .smap-point { transition: opacity .2s ease; }
.linked .tl.has-hot .tl-row:not(.is-hot),
.linked .smap.has-hot .smap-point:not(.is-hot),
/* после проявления карты правило .is-in .smap-point сильнее — перебиваем его явно */
.motion .smap[data-motion].is-in.has-hot .smap-point:not(.is-hot) { opacity: .35; }
.linked .smap-dot { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.linked .smap-point.is-hot .smap-dot { transform: scale(1.5); }
.linked .tl-row.is-hot .tl-name { text-decoration: underline; text-underline-offset: 4px; }

/* В общей точке каждый сектор связан со своей строкой и фестивалем на шкале. */
.linked .smap-cluster-row, .linked .smap-sector-link { transition: opacity .2s ease; }
.linked .smap.has-hot .smap-cluster.is-hot .smap-cluster-row:not(.is-hot),
.linked .smap.has-hot .smap-cluster.is-hot .smap-sector-link:not(.is-hot) { opacity: .35; }