/* BBeautiful — шов перехода: слой тёплой световой заливки при входе
   на страницу города. Страница открывается «в свете», свет гаснет
   после загрузки. Градиент 1:1 совпадает с заливкой открытия ворот
   (js/hero-gates.js + .valinta__tayte в valinta.css) — стык бесшовный,
   без чёрного мигания. Подключается заглушками и страницами филиалов
   независимо от их темы. */

.kaupunki-sivu__tayte {
  position: fixed;
  inset: 0;
  z-index: 60;                 /* над любым контентом страницы */
  background: radial-gradient(120% 120% at 50% 50%,
    #f4e3c2 0%, #e2c391 55%, #caa267 100%);
  pointer-events: none;
  animation: kaupunki-tayte-hiipuu .7s ease-out .1s forwards;
}

@keyframes kaupunki-tayte-hiipuu {
  to { opacity: 0; }
}

/* Обратная сторона того же шва: уход со страницы филиала на выбор
   города. Тот же градиент и та же длительность, что у заливки входа,
   поэтому на стыке кадров разрыва не видно. Свет растёт из точки
   ссылки (--x/--y ставит js/kaupunkisiirtyma.js) — переход читается
   как приближение к ней, хотя саму страницу мы не масштабируем:
   transform на предках сцены-воронки сломал бы её sticky-пин. */
.kaupunkivalo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: radial-gradient(140% 140% at var(--x, 50%) var(--y, 50%),
    #f4e3c2 0%, #e2c391 55%, #caa267 100%);
  opacity: 0;
  transform: scale(.86);
  transform-origin: var(--x, 50%) var(--y, 50%);
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.55, 0, .85, .3),
              transform .7s cubic-bezier(.55, 0, .85, .3);
}

.kaupunkivalo.on-taynna {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .kaupunki-sivu__tayte {
    animation: none;
    opacity: 0;
  }

  /* уход со страницы — обычный переход, без вспышки */
  .kaupunkivalo { display: none; }
}