/* Круглый переключатель языка. Разметку и словарь собирает
   assets/js/lang-switch.js — здесь только вид и переворот.

   На обеих сторонах — одна и та же иконка языка: она нейтральна,
   в отличие от флагов, которые стояли тут раньше и показывали язык,
   НА КОТОРЫЙ переключит нажатие. Что будет после клика, теперь
   сообщают aria-label и title кнопки.

   Переворот — обычный 3D-флип: обе стороны лежат друг на друге в
   одном контейнере, задняя заранее развёрнута на 180°, крутится
   контейнер. Перспектива висит на самой кнопке, а не на контейнере:
   у вращающегося элемента она на себя не действует. */

/* Диаметр кружка держим на контейнере, а не на самой кнопке: им пользуется
   и кнопка, и всплывающая подпись рядом — так значение остаётся одно.
   Класс вешает lang-switch.js там же, где вставляет кнопку. */
.has-lang-switch {
  --ls-size: 56px;
}

.lang-switch {
  --ls-flip: 700ms;

  width: var(--ls-size);
  height: var(--ls-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  perspective: 320px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms cubic-bezier(0.34, 1.57, 0.64, 1);
}

.lang-switch:hover {
  transform: scale(1.08);
}

.lang-switch:active {
  transform: scale(0.94);
}

.lang-switch:focus-visible {
  outline: 2px solid #4f7cff;
  outline-offset: 3px;
}

.lang-switch__inner {
  transform-style: preserve-3d;
  transition: transform var(--ls-flip) cubic-bezier(0.32, 0.72, 0.15, 1);
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.lang-switch[data-lang="ru"] .lang-switch__inner {
  transform: rotateY(180deg);
}

.lang-switch__face {
  /* Плоский серый диск без тени и обводки — так круг нарисован
     в макете: край уходит с #f0f0f0 в белый за один пиксель.
     Заливка обязательна: раньше площадь круга закрашивал флаг,
     а иконка занимает только середину. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f0f0f0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}

.lang-switch__face--back {
  transform: rotateY(180deg);
}

/* Иконка квадратная и занимает не всю сторону, а её середину: флаг
   раньше растягивался во всю площадь, потому что сам был фоном круга */
.lang-switch__face svg {
  width: 58%;
  height: 58%;
  display: block;
}

/* --- размещение ---------------------------------------------------------

   Кнопка есть только на главной и цепляется прямо к аватару: его
   обёртка уже отцентрована по странице, поэтому достаточно встать
   от неё справа. */

.lang-switch--avatar {
  position: absolute;
  top: 50%;
  /* В макете кружки не стоят рядом, а заходят друг на друга примерно
     на 1/8 диаметра: расстояние между центрами — 0.87 диаметра.
     Отступ отсчитываем от картинки аватара, а не от края обёртки:
     обёртка шире самой картинки (72px против 56px). */
  left: calc(var(--ls-size) * 0.87);
  margin-top: calc(var(--ls-size) / -2);
}

/* Наезжает кружок под аватар, а не наоборот, поэтому аватар поднимаем.
   Класс на контейнер вешает lang-switch.js в момент вставки кнопки —
   на страницах без переключателя правило не срабатывает. */
.has-lang-switch .image-3 {
  position: relative;
  z-index: 1;
}

/* --- подпись о смене языка -----------------------------------------------

   Живёт рядом с кнопкой, а не внутри неё: кнопка на наведении масштабируется
   и переворачивается, и подпись поехала бы вместе с ней.

   В покое её нет совсем — visibility: hidden, чтобы она не ловила курсор
   и не попадала в поток чтения. Задержка на visibility в transition нужна,
   чтобы блок дожил до конца затухания, а не пропал мгновенно. */
.lang-switch-toast {
  position: absolute;
  top: 50%;
  /* от левого края аватара: смещение кнопки + её диаметр + отбивка */
  left: calc(var(--ls-size) * 0.87 + var(--ls-size) + 14px);
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    visibility 0s linear 320ms;

  color: #1c1c1d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.lang-switch-toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition:
    opacity 260ms ease-out,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch-toast,
  .lang-switch-toast.is-on {
    transform: translateY(-50%);
    transition-duration: 1ms;
  }
}

/* Кнопки ниже планшета нет, значит и подписи быть не должно */
@media screen and (max-width: 767px) {
  .lang-switch-toast {
    display: none;
  }
}

/* Ниже планшета строка шапки занята целиком: слева «Москва», справа
   «Связаться», и они сходятся к аватару вплотную — свободного места
   рядом с ним не остаётся ни с одной стороны. Там кнопку прячем;
   язык, выбранный на десктопе, всё равно запоминается и применяется. */
@media screen and (max-width: 767px) {
  .lang-switch {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch,
  .lang-switch__inner {
    transition-duration: 1ms;
  }
}

/* --- запас под русский текст --------------------------------------------

   Русские строки в среднем длиннее английских, и там, где коробка
   фиксированной ширины, они начинают переноситься. Точечные правки на
   html[lang="ru"] — только для таких мест. */

/* крутилка должностей на главной: коробка 600px, перенос ломает
   бегущую строку — на русском чуть убавляем кегль */
@media screen and (min-width: 992px) {
  html[lang="ru"] .mover .jobwrapper {
    font-size: 46px;
  }
}

/* заголовок портфолио: русская фраза длиннее и на узком десктопе
   упирается в края экрана — поля заставляют её перенестись раньше,
   кегль при этом не трогаем */
html[lang="ru"] .heading-2 {
  padding-left: 32px;
  padding-right: 32px;
}

/* заголовки секций в кейсах: в общем CSS у .heading-15 стоит capitalize —
   по-английски это даёт привычное «Icon Pack», а по-русски превращает
   фразу в «Пак Иконок». Прописная в середине предложения в русском тексте
   не нужна, поэтому на русском правило снимаем. */
html[lang="ru"] .heading-15 {
  text-transform: none;
}