/* Смена языка INGRIAFARM — живой морфинг + каскад (пара к ingri-langswitch.js).
   Без белого мерцания: уходящую страницу НЕ гасим (браузер держит её кадр,
   paint holding, пока грузит новую — белой вспышки нет). Три слоя:
   флип флажка как отклик на клик; кросс-документный View Transition
   (морфинг флажка, уход контента влево — где поддержан); каскадный
   флип-вход секций на приёмнике (везде, класс if-langarrive от JS).
   Нет JS — нет классов и нет скоупинга VT: работает как обычная ссылка,
   каскад просто не стартует. */

/* Приезд после смены языка: каскадный флип «ценников» — на главной
   прямые дети .if-home (герой, лента, основной блок), на внутренних
   страницах — прямые дети .main (заголовок, навигация, контент). По очереди
   поворачиваются из лёгкого наклона в нормальное положение, как таблички на
   рыночном прилавке. Анимируются секции, а не body — фон и шапка на месте,
   белого кадра нет. Стаггер 70 мс, дети с восьмого и дальше делят восьмую
   ступень, чтобы на длинных страницах хвост не ждал бесконечно. fill both
   держит секции невидимыми до старта их ступени. */
html.if-langarrive .if-home > *,
html.if-langarrive .content-width:not(.if-home) .main > * {
  animation: if-lang-tag-flip 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 50% 0;
}

html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(2) { animation-delay: 0.07s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(3) { animation-delay: 0.14s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(4) { animation-delay: 0.21s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(5) { animation-delay: 0.28s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(6) { animation-delay: 0.35s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(7) { animation-delay: 0.42s; }
html.if-langarrive :is(.if-home, .content-width:not(.if-home) .main) > :nth-child(n+8) { animation-delay: 0.49s; }

@keyframes if-lang-tag-flip {
  from {
    opacity: 0;
    transform: perspective(900px) rotateX(-28deg) translateY(12px);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateX(0) translateY(0);
  }
}

/* У ленты фишек свой статический transform (rotate -1.1deg, home.css:470) —
   флипом его затёрли бы: лента выпрямилась бы и «щёлкнула» обратно при
   снятии класса. Ей — чистое проявление без transform, задержка та же. */
html.if-langarrive .if-home > .if-ticker {
  animation-name: if-lang-fade;
}

@keyframes if-lang-fade {
  from {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Флажок в шапке: игривый отклик — наклон на hover, флип на клик       */
/* ------------------------------------------------------------------ */

.header__lang .header__lang-img img {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  backface-visibility: visible;
}

.header__lang:hover .header__lang-img img {
  transform: translateY(-1px) rotate(-8deg) scale(1.14);
}

.header__lang:active .header__lang-img img {
  transform: scale(0.9);
  transition-duration: 0.12s;
}

/* Подтверждение клика: быстрый флип флажка, пока грузится новый язык */
.header__lang.is-switching .header__lang-img img {
  animation: if-lang-flag-flip 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes if-lang-flag-flip {
  0% {
    transform: perspective(120px) rotateY(0);
  }
  50% {
    transform: perspective(120px) rotateY(90deg) scale(1.1);
  }
  100% {
    transform: perspective(120px) rotateY(0);
  }
}

/* ------------------------------------------------------------------ */
/* View Transition: живой морфинг при подмене документа                 */
/* (Chrome/Edge/Safari 18.2+; в остальных — просто каскад выше)         */
/* ------------------------------------------------------------------ */

/* Opt-in только при живой моушн-настройке. ВАЖНО: это включает переходы
   для ВСЕХ полных перезагрузок — скоупинг на смену языка делает
   ingri-langswitch.js (pageswap гасит переход, если он не с флажка). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Именованные снапшоты. Флажок альтернативного языка у витрины один
   (ru⇄en) — имя уникально в документе; появится третья локаль, имя
   нужно будет перевесить на конкретный флажок, иначе VT сам отменится. */
#if-content {
  view-transition-name: if-content;
}

.header__lang {
  view-transition-name: if-lang-flag;
}

/* root (шапка/футер/фон почти идентичны между языками) — тихий короткий
   кроссфейд: подписи меню мягко меняют язык, остальное неотличимо */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

/* Старый контент уезжает влево и тает — «перелистнули на другой язык» */
::view-transition-old(if-content) {
  animation: if-lang-leave 0.25s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes if-lang-leave {
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}

/* Вход нового контента ведёт каскад «ценников» в живом DOM (снапшот
   new — живой, каскад виден сквозь него) — дефолтный fade-in глушим */
::view-transition-new(if-content) {
  animation: none;
  opacity: 1;
}

/* Флажок морфится в противоположный прямо в своей ячейке шапки */
::view-transition-old(if-lang-flag),
::view-transition-new(if-lang-flag) {
  animation-duration: 0.35s;
}

/* ------------------------------------------------------------------ */
/* Reduced motion: никаких переходов, флажок — обычная ссылка           */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.if-langarrive .if-home > *,
  html.if-langarrive .content-width:not(.if-home) .main > * {
    animation: none;
  }

  /* Тикер: его правило animation-name специфичнее каскадного — глушим явно */
  html.if-langarrive .if-home > .if-ticker {
    animation: none;
  }

  .header__lang .header__lang-img img,
  .header__lang:hover .header__lang-img img,
  .header__lang:active .header__lang-img img {
    transition: none;
    transform: none;
  }

  .header__lang.is-switching .header__lang-img img {
    animation: none;
  }
}