/* BBeautiful — экран выбора города, весь CSS одним файлом.
   Склейка css/fontit.css + css/tokens.css + css/main.css: три
   render-blocking запроса вместо одного стоили ~200-300 мс FCP, а
   делить их было незачем — кроме страниц выбора города их никто не
   подключал. Порядок сохранён (токены обязаны идти перед main).
   Правится как обычный файл: сборки в проекте нет и не будет.
   css/sauma.css остался отдельным — он общий со страницами филиалов,
   и копия здесь означала бы два места для правки одного шва. */

/* ── из fontit.css ──────────────────────────────── */
/* Tenor Sans — локально, не с fonts.googleapis.com.
   Причина не только в скорости: запрос к Google уносит IP посетителя
   на чужой сервер, а сайт обещает, что данных посетителей не собирает
   и куки-баннера не заводит (см. tietosuojaseloste.html). Файлы сняты
   с Google Fonts (лицензия OFL) и лежат в /fonts.

   Два подмножества: latin и latin-ext — второе несёт ä/ö/å, без него
   финские названия городов и подписи рассыпались бы на заменах.
   unicode-range оставлен как у Google: браузер качает latin-ext только
   если такие знаки на странице реально есть.

   font-display: swap — текст виден сразу системным шрифтом, подменяется
   когда файл приедет. */

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tenor-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tenor-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── из tokens.css ──────────────────────────────── */
/* BBeautiful — общие токены тёмной темы: палитра, фоновый градиент,
   шрифт. Часть этого же файла, идёт ПЕРЕД разделом main. Спиральная страница филиала (/helsinki/) живёт своей
   светлой темой в css/style.css и этот файл не подключает — каскады
   двух тем не пересекаются. */

:root {
  /* Тёмная база. Экран выбора города на неё больше не опирается —
     он перламутровый (см. --vari-helmi ниже); токены остаются как
     палитра проекта и на случай тёмных страниц. Фоном их не назначать:
     светлая тема филиала переопределяет --vari-tausta своим значением. */
  --vari-tausta:       #0A0A10;   /* базовый плоский тон */
  --vari-tausta-keski: #141019;   /* тёплый центр тёмного градиента */
  --vari-tausta-reuna: #08080E;   /* края тёмного градиента */
  --vari-kulta:   #E8CDA0;   /* золото основное: текст, акценты */
  --vari-kulta-2: #C4AA7A;   /* золото приглушённое: вторичное */
  --vari-valo:    #D0A45E;   /* тёплый свет: свечения, градиенты */

  /* Перламутр — фон сцены выбора города. Эти имена НЕ переопределяет
     css/style.css филиала, поэтому ими же красятся стены и арка проёма
     при SPA-переходе: тон гарантированно тот же, что у фона.
     (--vari-tausta для этого не годится: светлая тема его перебивает.) */
  --vari-helmi:       #ece4e8;              /* базовый тон полотна */
  --vari-helmi-viiva: rgba(43, 32, 19, .62); /* контур кромки проёма */
  --vari-helmi-teksti: #2B2013;             /* тексты на перламутре */
  --fontti: "Tenor Sans", "Segoe UI", Arial, sans-serif;
}

/* ── из main.css ──────────────────────────────── */
/* BBeautiful — тёмная тема «Ворота», экран выбора города и заглушки
   филиалов. Палитра и правила — в CLAUDE.md. Токены — разделом выше. Селекторы только по классам
   (исключение — базовые html/body). */

*, *::before, *::after { box-sizing: border-box; }

/* Основа страницы выбора — перламутр. Тёмный тон здесь всплывал бы
   при резиновой прокрутке и в кадре между сценой и стенами проёма. */
html {
  margin: 0;
  background: var(--vari-helmi);
}

/* Подложка под сценой — тот же перламутр: полотно раковины рисует слой
   .valinta__tausta внутри сцены, а body держит тон под ним, чтобы ни в
   одном кадре перехода не мелькнуло тёмного. */
body {
  margin: 0;
  min-height: 100svh;
  background: var(--vari-helmi);
  color: var(--vari-helmi-teksti);
  font-family: var(--fontti);
  font-weight: 400;            /* единственное начертание — жирности нет */
}

/* ================= Выбор города ================= */

.valinta {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Свечения за порталами: тлеют в покое, ярче на ховере, разгораются
   при открытии. Анимируются только opacity и scale (GSAP). */
.valinta__valo {
  position: absolute;
  top: 50%;
  width: 60vmin;
  height: 70vmin;
  transform: translate(-50%, -50%);
  /* ровное яркое ядро (плато до 26%) точно в зоне надписи проёма —
     буквы лежат на ровном свету, не на перепаде яркости */
  background: radial-gradient(55% 46% at 50% 50%,
    rgba(238, 213, 170, .44) 0%,
    rgba(234, 207, 160, .40) 26%,
    rgba(208, 164, 94, .15) 52%,
    rgba(208, 164, 94, 0) 72%);
  opacity: .45;   /* лёгкая аура: свет идёт «изнутри» ворот (постер) */
  will-change: transform, opacity;
}

.valinta__valo--vasen { left: 27%; }
.valinta__valo--oikea { left: 73%; }

/* Логотип над воротами: по центру, шапкой всей сцены. Ворота
   главные, поэтому высота держится в узком коридоре — на широком
   экране это ~7% высоты вьюпорта, на телефоне чуть крупнее, там над
   воротами много воздуха. Место под него резервирует js/hero-gates.js
   (сдвигом камеры), чтобы створки не наезжали.

   opacity: 0 в покое — логотип входит вместе с воротами во вступлении
   (тот же таймлайн), иначе он «выскакивал» бы отдельно. При
   prefers-reduced-motion вступления нет, и его показывает CSS ниже. */
.valinta__logo {
  position: absolute;
  left: 50%;
  top: clamp(1rem, 3.2vh, 2.6rem);
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.valinta__logo img {
  display: block;
  height: clamp(48px, 8.4vh, 84px);
  width: auto;
}

@media (max-width: 700px) {
  .valinta__logo img { height: clamp(58px, 9vh, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .valinta__logo { opacity: 1; }
}

.valinta__kangas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Прозрачные ссылки-зоны поверх canvas: левая и правая половины.
   Имя города — внизу зоны, под порталом. */
.valinta__linkit {
  position: absolute;
  inset: 0;
  display: flex;
}

.valinta__portti {
  position: relative;
  flex: 1 1 50%;
  display: block;
  text-decoration: none;
  color: var(--vari-kulta);
  -webkit-tap-highlight-color: transparent;
}

/* Имя — сразу под своим порталом: left/top ставит js/hero-gates.js
   проекцией низа портала в экранные координаты (пересчёт на resize) */
.valinta__nimi {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: .34em;       /* широкий трекинг */
  padding-left: .34em;         /* компенсация трекинга для центровки */
  opacity: .7;                 /* разгорается на ховере (GSAP) */
  white-space: nowrap;
}

.valinta__portti:focus-visible .valinta__nimi { opacity: 1; }

/* Надпись в проёме: проступает при приоткрытии (сегмент A таймлайна).
   Центр проёма ставит js/hero-gates.js той же проекцией. */
.valinta__sisus {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  gap: .5rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* Дымка-подложка: мягкое тёмное пятно чуть шире текста, без краёв.
   Живёт внутри сисуса — появляется, уходит и едет вместе с надписью;
   z-index -1 держит её под буквами внутри стекинг-контекста сисуса */
.valinta__sisus::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(10, 8, 14, .45) 0%,
    rgba(10, 8, 14, .28) 40%,
    rgba(10, 8, 14, 0) 72%);
  z-index: -1;
}

/* статичные тени — отрыв букв от любого фона; не анимируются */
.valinta__sisus-kaupunki {
  text-shadow: 0 1px 2px rgba(8, 6, 12, .8),
               0 2px 14px rgba(8, 6, 12, .5);
}

/* За створками светло (класс ставит js/hero-gates.js по яркости
   постера): дымка плотнее, шире и холоднее, текст остаётся светлым —
   иначе золото легло бы на белую страницу. Края по-прежнему тают. */
.valinta__portti.on-vaalea-posteri .valinta__sisus::before {
  width: 158%;
  height: 340%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(20, 16, 26, .78) 0%,
    rgba(20, 16, 26, .68) 32%,
    rgba(20, 16, 26, .34) 54%,
    rgba(20, 16, 26, .1) 68%,
    rgba(20, 16, 26, 0) 78%);
}

.valinta__portti.on-vaalea-posteri .valinta__sisus-kaupunki {
  text-shadow: 0 1px 3px rgba(6, 5, 10, .95),
               0 2px 18px rgba(6, 5, 10, .8);
}

/* В проёме теперь одна строка — имя города, и кегль ей достался от
   бывшей брендовой: бренд назван логотипом над воротами, повторять его
   тут значило бы показать одно слово дважды в одном кадре. */
.valinta__sisus-kaupunki {
  font-size: clamp(.9rem, 1.9vw, 1.35rem);
  letter-spacing: .4em;
  padding-left: .4em;
  color: var(--vari-kulta);
}

/* Подсказка внизу: мягкий пульс opacity на внутреннем span, скрытие —
   transition на родителе (без скачка при снятии анимации). Гаснет
   классом on-vihje-piilossa при первом ховере/тапе (js/hero-gates.js) */
.valinta__vihje {
  position: absolute;
  left: 50%;
  bottom: 5.5vh;
  margin: 0;
  transform: translateX(-50%);
  color: var(--vari-kulta-2);
  font-size: clamp(.72rem, 1.4vw, .9rem);
  letter-spacing: .3em;
  padding-left: .3em;          /* компенсация трекинга для центровки */
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .45s ease-out;
}

/* Верхняя служебная строка: язык слева, лахьякортти справа, логотип
   по центру между ними. Высота строки = высота логотипа, ссылки
   выровнены по его вертикальной середине. Кегль и приглушённость те
   же, что у политики внизу: строки служебные и не спорят ни с
   логотипом, ни с воротами. Тексты — тёмный тон перламутра
   (--vari-helmi-teksti), читается на светлом фоне и в свечении.
   Резерв места, когда строка встаёт под логотип, считает sovita()
   в js/hero-gates.js. */
.valinta__ylarivi {
  position: absolute;
  top: clamp(1rem, 3.2vh, 2.6rem);
  left: clamp(.4rem, 2vw, 1.9rem);
  right: clamp(.4rem, 2vw, 1.9rem);
  height: clamp(48px, 8.4vh, 84px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(.68rem, 1.2vw, .78rem);
  letter-spacing: .12em;
  /* строка тянется во всю ширину НАД сценой: клики ловят только
     ссылки, сам контейнер прозрачен для указателя */
  pointer-events: none;
}

.valinta__ylarivi a { pointer-events: auto; }

/* В одну строку с логотипом на телефоне тесно («Lahjakortti» упёрся
   бы в логотип на 360): строка встаёт ПОД логотип, но остаётся выше
   ворот — sovita() добавляет её низ в верхний резерв камеры.
   Слагаемые top: отступ логотипа + его мобильная высота (медиа ниже
   у .valinta__logo img) + просвет. */
@media (max-width: 700px) {
  .valinta__ylarivi {
    top: calc(clamp(1rem, 3.2vh, 2.6rem) + clamp(58px, 9vh, 96px) + .35rem);
    height: auto;
  }
}

.valinta__kielet {
  display: flex;
  gap: .15rem;
}

/* min-width/height 24px — нижняя граница тап-цели: текст здесь мелкий
   и служебный, но попасть в него пальцем нужно с первого раза. */
.valinta__kielet a {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4em;
  color: var(--vari-helmi-teksti);
  opacity: .55;
  text-decoration: none;
}

.valinta__kielet a:hover,
.valinta__kielet a:focus-visible { opacity: 1; }

.valinta__kielet a[aria-current] { opacity: .9; font-weight: 600; }

/* Лахьякортти — правый край верхней строки, в тон переключателю */
.valinta__lahja {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 .4em;
  color: var(--vari-helmi-teksti);
  opacity: .55;
  text-decoration: none;
}

.valinta__lahja:hover,
.valinta__lahja:focus-visible { opacity: 1; }

/* Политика приватности — низ экрана выбора, деликатно и в стороне от
   подсказки: она по центру, эта строка в правом нижнем углу */
.valinta__alaviite {
  position: absolute;
  right: clamp(.4rem, 2vw, 1.9rem);
  bottom: .6vh;
  margin: 0;
  font-size: clamp(.68rem, 1.2vw, .78rem);
  letter-spacing: .12em;
}

.valinta__alaviite a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 .6em;
  color: var(--vari-helmi-teksti);
  opacity: .55;
  text-decoration: none;
}

.valinta__alaviite a:hover,
.valinta__alaviite a:focus-visible { opacity: 1; }

.valinta__vihje-teksti {
  display: inline-block;
  animation: vihje-pulssi 2.6s ease-in-out infinite alternate;
}

@keyframes vihje-pulssi {
  from { opacity: .45; }
  to   { opacity: .95; }
}

.valinta.on-vihje-piilossa .valinta__vihje { opacity: 0; }

/* Заливка тёплым светом в конце открытия: переход на страницу города
   происходит «в свете», без чёрного мигания */
.valinta__tayte {
  position: absolute;
  inset: 0;
  /* выше логотипа: финальную заливку не переживает ни надпись в
     проёме, ни логотип — иначе он остался бы висеть поверх света */
  z-index: 3;
  background: radial-gradient(120% 120% at 50% 50%,
    #f4e3c2 0%, #e2c391 55%, #caa267 100%);
  opacity: 0;
  pointer-events: none;
}

.valinta__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* пока идёт открытие — клики заблокированы */
.valinta.on-avautuu .valinta__linkit { pointer-events: none; }

/* ── Фон-небо (эксперимент, ?tausta=): классы вешает hero-gates ────
   Облака двигаются только transform-ом (дрейф 60+ секунд), blur —
   статичный. Тексты на светлых небесах — тёмный вариант. */

/* Небо — слой-подложка в сцене (не body): при выборе города гаснет
   GSAP-ом в базовую тьму до прихода стен реведила — без скачка */
.valinta__tausta {
  position: absolute;
  inset: 0;
}

/* обобщённый слой атмосферы: спрайт, только transform/opacity */
.tunnelma {
  position: absolute;
  background: center / contain no-repeat;
}

/* ── «Перламутр» — фон сцены выбора ────────────────────────────────
   База — внутренняя сторона раковины: холодные и тёплые пятна плюс
   объём (светлее к центру, глубже и прохладнее по краям), чтобы
   тёплые ореолы порталов читались. Поверх — вуали перелива. */
.valinta__tausta {
  overflow: hidden;
  background:
    radial-gradient(46% 38% at 22% 28%,
      rgba(250, 206, 200, .96) 0%, rgba(250, 206, 200, 0) 66%),
    radial-gradient(42% 36% at 80% 24%,
      rgba(210, 194, 240, .95) 0%, rgba(210, 194, 240, 0) 64%),
    radial-gradient(50% 44% at 68% 78%,
      rgba(250, 222, 166, .95) 0%, rgba(250, 222, 166, 0) 68%),
    radial-gradient(44% 40% at 16% 80%,
      rgba(196, 210, 226, .95) 0%, rgba(196, 210, 226, 0) 66%),
    radial-gradient(38% 34% at 50% 54%,
      rgba(255, 252, 246, .75) 0%, rgba(255, 252, 246, 0) 72%),
    radial-gradient(122% 98% at 50% 50%,
      rgba(255, 252, 248, 0) 30%, rgba(196, 186, 204, .32) 72%,
      rgba(158, 148, 172, .55) 100%),
    linear-gradient(164deg, #ecdfe6 0%, #f6ecdc 44%, #e2e2ec 100%)
    no-repeat var(--vari-helmi);
}

/* тёплый ореол за воротами на светлом фоне — плотнее и теплее */
.valinta__valo {
  background: radial-gradient(55% 46% at 50% 50%,
    rgba(214, 160, 78, .5) 0%,
    rgba(208, 164, 94, .34) 30%,
    rgba(196, 156, 96, .12) 58%,
    rgba(196, 156, 96, 0) 76%);
  opacity: .62;
}

/* волна сияния от выбранного портала. will-change транзиентный: элемент
   живёт 1.3 с распаха и удаляется со сценой; без слоя scale 0.3 -> 3.6
   растеризовал бы градиент заново в каждом кадре */
.valinta__aalto {
  position: absolute;
  will-change: transform;
  left: 0;
  top: 0;
  width: 46vmax;
  height: 46vmax;
  margin: -23vmax 0 0 -23vmax;
  border-radius: 50%;
  /* на светлом перламутре волна должна читаться как тёплый всплеск,
     а не как общая засветка: ядро золотое, спад плотный */
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 236, 196, .98) 0%, rgba(240, 196, 120, .8) 30%,
    rgba(214, 160, 78, .45) 52%, rgba(196, 146, 74, .12) 70%,
    rgba(196, 146, 74, 0) 80%);
  opacity: 0;
  pointer-events: none;
}

/* Перламутр остаётся на всех фазах, поэтому стены и арка реведила
   светлые — под тон фона. Чтобы светлая страница филиала в проёме не
   слилась со стенами, кромку апертуры очерчивает тонкая тёмная линия:
   у прямоугольных стен это border со стороны проёма, у арки —
   контурная дуга, выступающая из-под светлой на пару пикселей. */
/* Стены во время распаха — ровный перламутровый тон. Градиент внутри
   них ехал бы вместе с transform и давал швы на стыках, поэтому здесь
   именно плоский тон середины палитры. */
.valinta__seina--vasen {
  border-right: 1.5px solid var(--vari-helmi-viiva);
}

.valinta__seina--oikea {
  border-left: 1.5px solid var(--vari-helmi-viiva);
}

/* горизонтальным стенам контур не нужен: их кромка тянулась бы через
   весь экран, а верх проёма уже очерчивает контурная дуга */

/* Контурная дуга кромки проёма. Селектор из двух классов не случайно:
   правило .valinta__kaari (тон перламутра) стоит ниже по файлу, и при
   равной специфичности перекрашивало бы контур обратно в фон. */
.valinta__kaari.valinta__kaari--viiva {
  background: var(--vari-helmi-viiva);
}

.valinta__taivas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* тексты тёмные: фон светлый */
.valinta__nimi,
.valinta__vihje {
  color: var(--vari-helmi-teksti);
  text-shadow: 0 1px 8px rgba(250, 241, 226, .65);
}


/* ── SPA-реведил: сайт филиала сквозь проём ворот ──────────────────
   #sivu-taso — фиксированный слой с настоящей страницей филиала,
   создаётся js/hero-gates.js по клику и рисуется ПОД сценой ворот
   (вставлен в DOM перед .valinta). Невидим до старта открытия;
   visibility (не display) — чтобы лейаут и инициализация страницы
   считались по настоящим размерам. После входа контент переносится
   в body, слой и сцена удаляются. */
.sivu-taso {
  position: fixed;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}

.sivu-taso.on-nakyvissa { visibility: visible; }

/* Стены вокруг проёма: четыре панели фона поверх слоя сайта, под
   канвасом. Двигаются только transform-ом — их края повторяют
   внутренние кромки створок (js/hero-gates.js, из кадра рендера).
   Сквозь проём между ними виден сайт; при dolly уезжают за экран. */
.valinta__seina {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* --vari-helmi, а не --vari-tausta: светлая тема филиала при SPA-вставке
     переопределяет второй своим значением, а первого не знает.
     Тон тот же, что у фона сцены, — раскрытие идёт в жемчуге. */
  background: var(--vari-helmi);
}

/* Арочная перемычка апертуры: статичная маска-дуга (js/hero-gates.js),
   позиция и масштаб — только transform.

   will-change транзиентный: обе арки создаются на старте реведила и
   уходят вместе со сценой (~1.4 с). Без него Chrome при каждом новом
   scale() растеризовал маску заново — в каждом кадре dolly; с ним растр
   фиксируется на масштабе первого кадра и дальше только масштабируется
   композитором (замер 06.09.2026: GPU-время распаха на телефоне −45%).
   Цена — кромка дуги к концу dolly мягче на пару пикселей, в движении
   и на DPR 3 не читается; база маски 1262 px даёт запас. */
.valinta__kaari {
  position: absolute;
  will-change: transform;
  left: 0;
  top: 0;
  width: 1262px;
  height: 470px;
  transform-origin: 0 0;
  background: var(--vari-helmi);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* скролл заблокирован на время перехода */
.on-lukittu { overflow: hidden; }

/* ── CSS 3D-фолбэк: два статичных закрытых портала (без WebGL) ──
   Порталы — по центрам половин (space-around), имена возвращаются из
   JS-позиционирования на CSS: под порталом своей зоны. */

.valinta__varakuva {
  display: none;
  position: absolute;
  inset: 0;
  justify-content: space-around;
  align-items: center;
}

.valinta.on-ei-webgl .valinta__kangas   { display: none; }
.valinta.on-ei-webgl .valinta__varakuva { display: flex; }

/* Логотип в покое стоит на opacity: 0 и проявляется вступлением сцены.
   Без WebGL вступления нет: catch в js/hero-gates.js выходит раньше
   всего, что могло бы его показать, — показываем здесь, вместе с
   фолбэком, иначе он остался бы невидимым навсегда. */
.valinta.on-ei-webgl .valinta__logo { opacity: 1; }

.valinta__varaportti { display: flex; }

.valinta__varaovi {
  width: min(16svh, 19vw);
  aspect-ratio: 631 / 1492;
  background: url("/kuvat/gate_leaf.webp") center / 100% 100% no-repeat;
}

.valinta__varaovi--vasen { transform: scaleX(-1); }

/* имя = центр зоны, ниже низа портала (высота портала = ширина·1492/631,
   низ = 50% + половина высоты) — без JS-координат */
.valinta.on-ei-webgl .valinta__nimi {
  left: 50% !important;
  top: calc(50% + min(18.92svh, 22.47vw) + 32px) !important;
}

.valinta.on-ei-webgl .valinta__sisus { display: none; }

/* Заглушки филиалов и «витрины мастеров» на тёмной теме удалены:
   обе страницы филиалов давно живут своей светлой темой
   (css/style.css), а этот файл подключает только экран выбора города.
   Прежний вариант — _work/legacy/. */

/* ================= prefers-reduced-motion ================= */

@media (prefers-reduced-motion: reduce) {
  /* сцена выбора статична, JS не перехватывает клики */
  .valinta__valo { opacity: .45; }

  /* подсказка без пульса, статичная */
  .valinta__vihje-teksti {
    animation: none;
    opacity: .7;
  }
}