/* Лендинг Froggish — рекламная брошюрка (landing.html).

   Небо — фото с постера (img/landing-sky.jpg), на нём «Froggish» шрифтом
   логотипа во всю ширину окна — «наклейкой» в цветах пиксельной лягушки
   (светло-зелёный, тёмный контур, белая обводка); лягушка летит под
   надписью и наполовину заходит на неё. Ниже — лист с пузырями, как в
   самом тренажёре: как это работает, три цели дня, языки, вход.

   Цвета — токенами IDS (site/ids), свои — только у неба и надписи: они
   одинаковые в любой теме. */

@font-face {
  font-family: "Pilowlava";
  src: url("../fonts/pilowlava.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Подпись «Тренажёр…» — рукописным, как в тренажёре (GGBotNet, CC0). */
@font-face {
  font-family: "First Time Writing";
  src: url("../fonts/first-time-writing.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/roboto-mono-cyrillic-400.woff2") format("woff2");
  font-weight: 400;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/roboto-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}

:root {
  --landing__bubble: 1.6rem;
  /* Цвета лягушки (img/frog-talk-*-light.png) — у надписи и кнопки те же. */
  --landing__frog-light: #92ce37;
  --landing__frog-dark: #1d490c;
  --landing__sky: #1a6697;
  /* Лягушка: в строке с «Froggish», справа; ширина по окну (≈ на
     четверть выше букв), высота — по кадру 63×64. */
  --landing__frog: clamp(4.5rem, 16vw, 15rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--landing__sky);
}
body.landing {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.5;
  color: var(--ids__text);
  background: var(--landing__sky);
  -webkit-font-smoothing: antialiased;
}

/* ── Небо ──────────────────────────────────────────────────────────────── */

.landing__sky {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 62svh;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.25rem, 0.8vw, 0.75rem) calc(var(--landing__bubble) + 3rem);
  background: var(--landing__sky) url("../img/landing-sky.jpg") center top / cover no-repeat;
  overflow: hidden;
}

.landing__word {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  line-height: 0;

  & svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  & text {
    font-family: "Pilowlava", sans-serif;
    font-size: 200px;
    stroke-linejoin: round;
  }
  /* Наружная белая обводка — как у лягушки; без тени. */
  & .landing__word-out {
    fill: #fff;
    stroke: #fff;
    stroke-width: 26px;
  }
  & .landing__word-in {
    fill: var(--landing__frog-light);
    stroke: var(--landing__frog-dark);
    stroke-width: 9px;
    paint-order: stroke fill;
  }
}

/* Строка: «Froggish» — всё место, лягушка — справа. */
.landing__head {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 1rem);
  width: 100%;

  & .landing__word {
    flex: 1;
    min-width: 0;
  }
}

/* Лягушка — справа от надписи, без тени. Кадры 63×64 — пиксель в
   пиксель, без размытия; второй кадр — рот открыт. */
.landing__frog {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--landing__frog);
  aspect-ratio: 63 / 64;
  animation: landing-fly 4.2s ease-in-out infinite;

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
  }
  & img + img {
    opacity: 0;
    animation: landing-talk 4.2s steps(1) infinite;
  }
}
@keyframes landing-fly {
  0%,
  100% {
    transform: translateY(3%) rotate(-4deg);
  }
  50% {
    transform: translateY(-3%) rotate(3deg);
  }
}
/* Время от времени что-то говорит: рот открывается-закрывается. */
@keyframes landing-talk {
  0%,
  55% {
    opacity: 0;
  }
  58%,
  64%,
  72% {
    opacity: 1;
  }
  61%,
  68%,
  76%,
  100% {
    opacity: 0;
  }
}

/* Подпись — сразу под «Froggish»: белая плашка без рамки во всю ширину,
   текст — крупно, почти от края до края (кегль — от ширины окна; на
   узком экране — в две строки). */
.landing__tagline {
  width: 100%;
  margin: clamp(0.4rem, 1vw, 0.9rem) 0 0;
  padding: 0.3em 0.6em 0.4em;
  font-family: "First Time Writing", "Roboto Mono", ui-monospace, monospace;
  font-size: max(1.35rem, 4.6vw);
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  color: #2a2d31;
  background: #fff;
  border-radius: var(--landing__bubble);
}

/* «Start» — под бегущей строкой флагов и в конце листа: объёмная кнопка
   во всю ширину цвета букв «Froggish» (текст — тёмным, как их контур):
   основание — зелёным заголовков, сама кнопка приподнята над ним; при
   наведении — чуть выше, при нажатии опускается почти до основания. */
.landing__start {
  --landing__lift: 0.16em;
  display: block;
  width: 100%;
  /* Под бегущей строкой флагов: сверху и снизу — маленькие отступы
     (сверху ещё на высоту подъёма кнопки). */
  margin: calc(0.22em + 0.35rem) 0 0.35rem;
  font-family: "First Time Writing", "Inter", sans-serif;
  font-size: max(2rem, 5.5vw);
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  color: var(--landing__frog-dark);
  /* Основание — зелёный заголовков листа («Как это работает» в светлой
     теме); в тёмной теме — тот же, чтобы основание оставалось темнее. */
  background: var(--ids__color-green-700);
  border-radius: var(--landing__bubble);
  -webkit-tap-highlight-color: transparent;

  & span {
    display: block;
    padding: 0.12em 0.6em 0.22em;
    background: var(--landing__frog-light);
    border-radius: inherit;
    transform: translateY(calc(-1 * var(--landing__lift)));
    transition: transform 120ms cubic-bezier(0.3, 0.7, 0.4, 1), filter 120ms;
  }
  &:hover span {
    --landing__lift: 0.22em;
    filter: brightness(1.08);
  }
  &:active span {
    --landing__lift: 0.04em;
    transition-duration: 40ms;
  }
  &:focus-visible {
    outline: 3px solid var(--landing__frog-dark);
    outline-offset: 3px;
  }
}

/* ── Лист с пузырями ───────────────────────────────────────────────────── */

.landing__sheet {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: calc(-1 * var(--landing__bubble));
  padding: 0;
  background: var(--ids__grid);
  border-radius: var(--landing__bubble) var(--landing__bubble) 0 0;

  & > section {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
    background: var(--ids__background);
    border: 1px solid var(--ids__grid);
    border-radius: var(--landing__bubble);
  }
  & h2 {
    margin: 0 0 0.6em;
    font-family: "Pilowlava", sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
    line-height: 1.15;
    color: var(--ids__brand);
  }
  & p {
    margin: 0;
  }
}

/* Бегущая строка флагов — скруглённая полоса во всю ширину, флаги 4:3
   впритык, без зазоров; едет влево бесконечно. */
.landing__flags {
  height: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  border-radius: var(--landing__bubble);
  background: var(--ids__background);
}
.landing__flags-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: landing-flags var(--landing__flags-time, 30s) linear infinite;

  & img {
    display: block;
    height: 100%;
    width: auto;
    aspect-ratio: 4 / 3;
  }
}
@keyframes landing-flags {
  to {
    transform: translateX(-50%);
  }
}

/* Человечек под «Как это работает»: шесть кадров пиксельной анимации
   (img/explain/) — маской, слоями: светлая «бумага» внутри облачков,
   лица и глаз (fill-N.svg — всё, что замкнуто контуром) и поверх — тёмный
   контур (N.svg). Снаружи вокруг контура — обводка бумагой в пиксель,
   как белый контур у лягушки. Контур всегда темнее бумаги: в светлой
   теме бумага — белая, как фон; в тёмной — светло-серая, и рисунок
   читается как наклейка, а не как негатив. Кадры стоят стопкой и по очереди видны по
   0.9 с (отрицательная задержка — свой кадр у каждого с первой секунды). */
:root {
  --landing__ink: #000;
  --landing__paper: var(--ids__background);
  --landing__explain-frame: 0.9s;
}
.dark {
  --landing__ink: #000;
  --landing__paper: var(--ids__color-gray-200);
}
.landing__explain {
  position: relative;
  width: clamp(15rem, 36vw, 30rem);
  aspect-ratio: 450 / 485;
  margin: 0 auto 1.5rem;

  & i {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: landing-explain calc(6 * var(--landing__explain-frame)) step-end infinite;
    animation-delay: calc((var(--frame) - 6) * var(--landing__explain-frame));
  }
  & i::before,
  & i::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--mask) center / contain no-repeat;
    mask: var(--mask) center / contain no-repeat;
  }
  & i::before {
    --mask: var(--fill);
    background: var(--landing__paper);
  }
  & i::after {
    --mask: var(--src);
    background: var(--landing__ink);
  }
}
@keyframes landing-explain {
  0% {
    opacity: 1;
  }
  16.667% {
    opacity: 0;
  }
}

/* Фигуры поверх человечка (js/landing-puzzle.js; будильник и пустые слои —
   tools/landing-puzzle.py): в облачке пунктиром — места под фигуры;
   фигуры-слова — гладкие наклейки: тёмный контур и снаружи обводка
   «бумагой», как у человечка. Жёлтая — новое слово, зелёная — выучено.
   Координаты — единицы рисунка (viewBox 5 5 450 485). */
:root {
  --landing__piece-new: #f6c945;
  --landing__piece-known: var(--landing__frog-light);
  --landing__piece-bad: #f05a5a;
  --landing__piece-said: #a9acb1;
  --landing__piece-said-light: #e6e8ea;
}
.landing__puzzle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.landing__slot,
.landing__fig {
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
}
/* Место в облачке — пунктирный контур фигуры. */
.landing__slot {
  fill: none;
  stroke: var(--landing__ink);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}
.landing__fig-halo {
  fill: var(--landing__paper);
  stroke: var(--landing__paper);
  stroke-width: 11;
}
.landing__fig-body {
  fill: var(--landing__piece-new);
  stroke: var(--landing__ink);
  stroke-width: 3.5;
  transition: fill 0.35s;
}
.landing__fig.is-known .landing__fig-body {
  fill: var(--landing__piece-known);
}
/* В облачке речи: серая копия узора; пока человечек говорит — фигуры
   переливаются волной (светлеют по очереди); потом — цвет разбора
   произношения и процент под фигурой. */
.landing__fig.is-said .landing__fig-body {
  fill: var(--landing__piece-said);
}
.landing__figs.is-speaking .landing__fig.is-said .landing__fig-body {
  animation: landing-shimmer 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}
@keyframes landing-shimmer {
  50% {
    fill: var(--landing__piece-said-light);
  }
}
.landing__fig.is-said.is-good .landing__fig-body {
  fill: var(--landing__piece-known);
}
.landing__fig.is-said.is-ok .landing__fig-body {
  fill: var(--landing__piece-new);
}
.landing__fig.is-said.is-bad .landing__fig-body {
  fill: var(--landing__piece-bad);
}
.landing__score {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 15px;
  text-anchor: middle;
  fill: var(--landing__ink);
}

/* Рот, когда человечек говорит (data-state ставит скрипт). */
.landing__mouth > g {
  display: none;
}
.landing__mouth[data-state] .landing__mouth-cover,
.landing__mouth[data-state="open"] .landing__mouth-open,
.landing__mouth[data-state="half"] .landing__mouth-half {
  display: inline;
}

/* Звонок (класс is-ringing ставит скрипт на ~1 с): будильник дрожит ±12°,
   вспыхивают волны — просто линии. */
.landing__waves {
  opacity: 0;
}
.landing__clock.is-ringing {
  & .landing__clock-shake {
    animation: landing-ring 1s step-end;
  }
  & .landing__waves {
    animation: landing-waves 1s step-end;
  }
}
@keyframes landing-ring {
  0% {
    rotate: -12deg;
  }
  5% {
    rotate: 12deg;
  }
  10% {
    rotate: -12deg;
  }
  15% {
    rotate: 12deg;
  }
  20% {
    rotate: -12deg;
  }
  25% {
    rotate: 12deg;
  }
  30% {
    rotate: -12deg;
  }
  35% {
    rotate: 12deg;
  }
  40% {
    rotate: -12deg;
  }
  45% {
    rotate: 12deg;
  }
  50% {
    rotate: -12deg;
  }
  55% {
    rotate: 12deg;
  }
  60% {
    rotate: -12deg;
  }
  65% {
    rotate: 12deg;
  }
  70% {
    rotate: -12deg;
  }
  75% {
    rotate: 12deg;
  }
  80% {
    rotate: -12deg;
  }
  85% {
    rotate: 12deg;
  }
  90%,
  100% {
    rotate: 0deg;
  }
}
@keyframes landing-waves {
  0%,
  30%,
  60% {
    opacity: 1;
  }
  15%,
  45%,
  75%,
  100% {
    opacity: 0;
  }
}

/* Шаги объяснения рядом с рисунком (появляются по ходу анимации —
   класс is-on ставит js/landing-puzzle.js): номер шрифтом Froggish в
   кружке — кружок обводится, номер проявляется; подпись рукописным —
   пишется слева направо. 1 — справа от будильника, 2 — слева от облачка
   мыслей, 3 — слева от облачка речи. Места — в процентах рисунка
   (viewBox 5 5 450 485). На телефоне — только номера. */
.landing__note {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  width: max-content;
  /* Подпись — во всё место сбоку от рисунка (до края листа). */
  max-width: min(26rem, calc((100vw - 100%) / 2 - 3.2rem));
  transform: translateY(-50%);
}
.landing__note--1 {
  left: calc(96% + 0.5rem);
  top: 18.6%;
}
.landing__note--2,
.landing__note--3 {
  flex-direction: row-reverse;
  text-align: right;
}
.landing__note--2 {
  right: calc(100% - 2.2% + 0.5rem);
  top: 16.5%;
}
.landing__note--3 {
  right: calc(100% - 1.1% + 0.5rem);
  top: 83.5%;
}
.landing__note-num {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  aspect-ratio: 1;
  color: var(--ids__brand);

  & svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  & circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  & b {
    font-family: "Pilowlava", sans-serif;
    font-weight: 400;
    font-size: 1.55rem;
    line-height: 1;
    opacity: 0;
  }
}
.landing__note-text {
  font-family: "First Time Writing", "Inter", sans-serif;
  font-size: clamp(1.15rem, 0.6rem + 1vw, 1.4rem);
  line-height: 1.1;
  text-wrap: pretty;
  color: var(--ids__text);
  clip-path: inset(0 100% 0 0);
}
/* Появление: кружок обводится, номер проявляется, подпись пишется. */
.landing__note.is-on {
  & circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease-out;
  }
  & b {
    opacity: 1;
    transition: opacity 0.3s 0.3s;
  }
  & .landing__note-text {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.4s 0.5s linear;
  }
}
@media (width < 640px) {
  .landing__note-text {
    display: none;
  }
  .landing__note-num {
    width: 2.3rem;

    & b {
      font-size: 1.2rem;
    }
  }
  .landing__note--1 {
    left: calc(96% + 0.25rem);
  }
  .landing__note--2 {
    right: calc(100% - 2.2% + 0.25rem);
  }
  .landing__note--3 {
    right: calc(100% - 1.1% + 0.25rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing__note.is-on :is(circle, b, .landing__note-text) {
    transition: none;
  }
}

/* Как это работает: четыре шага — пузыри вплотную. */
/* Три этапа — как шаги у рисунка: отдельный ряд листа во всю ширину,
   карточки — пузыри вплотную друг к другу, рамка 1px серым, как у
   остальных пузырей листа; номер — шрифтом
   Froggish, заголовок — рукописным. */
.landing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;

  /* Номер и заголовок — в одну строку, по первой строке заголовка;
     остальное — во всю ширину, примеры прижаты к низу карточки. */
  & li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: baseline;
    gap: 0.6em 0.55em;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
    background: var(--ids__background);
    border: 1px solid var(--ids__grid);
    border-radius: var(--landing__bubble);
  }
  & li > :not(.landing__num, h3) {
    grid-column: 1 / -1;
  }
  & h3 {
    margin: 0;
    font-family: "First Time Writing", "Inter", sans-serif;
    font-size: 2em;
    font-weight: 400;
    line-height: 1.05;
  }
  & li > p {
    align-self: start;
    margin-bottom: 0.4em;
    color: var(--ids__text-caption);
  }
}
.landing__num {
  font-family: "Pilowlava", sans-serif;
  font-size: 2.4em;
  line-height: 1;
  color: var(--ids__brand);
}

/* Мини-картинки шагов — из самого тренажёра. */
.landing__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  min-height: 3.2em;
  margin-top: 0.4em;
  font-size: 0.95em;
}
.landing__demo--type {
  flex-direction: column;
  align-items: stretch;

  & .landing__ru {
    font-weight: 600;
  }
  & .landing__input {
    padding: 0.35em 0.6em;
    font-family: "Roboto Mono", ui-monospace, monospace;
    background: var(--ids__background);
    border: 1px solid var(--ids__grid);
    border-radius: 0.4em;
  }
  & .landing__input i {
    display: inline-block;
    width: 1px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.2em;
    background: var(--ids__text);
    animation: landing-caret 1s steps(1) infinite;
  }
}
@keyframes landing-caret {
  50% {
    opacity: 0;
  }
}
.landing__demo--days span,
.landing__demo--phrase span:not(.landing__ru) {
  padding: 0.15em 0.6em;
  font-size: 0.9em;
  white-space: nowrap;
  background: var(--ids__background);
  border: 1px solid var(--ids__grid);
  border-radius: 999px;
}
.landing__demo--days span.is-on {
  color: var(--ids__button-text);
  background: var(--ids__button);
  border-color: var(--ids__button);
}
.landing__demo--days span {
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.landing__demo--phrase span:not(.landing__ru) {
  font-weight: 600;
  border-radius: 0.4em;
}
/* Русская фраза и слово с транскрипцией — строкой над примером. */
.landing__demo:not(.landing__demo--type) .landing__ru {
  flex-basis: 100%;
  font-weight: 600;
}
/* Разбор произношения — как в тренажёре: таблица из двух строк, сверху
   буквы цветом оценки, снизу проценты; сетка 1px серым, углы чуть
   скруглены. Под ней — общая оценка; слева — флаг языка. */
.landing__demo--board {
  align-items: flex-start;
  gap: 0.6em 0.8em;
}
/* Флаг языка примера — овалом, как в выборе языка. */
.landing__flag {
  width: 2.2em;
  height: 1.1em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ids__grid) 60%, transparent);
  vertical-align: -0.2em;
}
.landing__ru .landing__flag {
  margin-right: 0.5em;
}
.landing__board-flag {
  margin-top: 0.9em;
}
/* Строка ответа во фразе: слова встают по одному; ошибка — красная
   рамка и дрожь, верно — зелёная. */
.landing__words {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.35em;
  min-height: 2.1em;
  padding-bottom: 0.3em;
  border-bottom: 1.5px dashed var(--ids__grid);

  &.is-wrong span {
    color: var(--ids__error);
    border-color: var(--ids__error);
  }
  &.is-right span {
    color: var(--ids__success);
    border-color: var(--ids__success);
  }
  & span {
    transition: color 0.2s, border-color 0.2s;
  }
}
.landing__board {
  border-collapse: separate;
  border-spacing: 0;

  & td {
    padding: 0.2em 0.45em;
    text-align: center;
    border: 0 solid var(--ids__grid);
    border-width: 0 1px 1px 0;
  }
  & td:first-child {
    border-left-width: 1px;
  }
  & tr:first-child td {
    border-top-width: 1px;
    font-size: 2em;
    font-weight: 650;
    line-height: 1.1;
  }
  & tr:last-child td {
    font-size: 0.8em;
    white-space: nowrap;
  }
  & tr:first-child td:first-child {
    border-top-left-radius: 0.4rem;
  }
  & tr:first-child td:last-child {
    border-top-right-radius: 0.4rem;
  }
  & tr:last-child td:first-child {
    border-bottom-left-radius: 0.4rem;
  }
  & tr:last-child td:last-child {
    border-bottom-right-radius: 0.4rem;
  }
}
.landing__board-total {
  flex-basis: 100%;
  margin: 0;
}
.landing__demo--board :is(.good, .warn, .bad) {
  font-weight: 650;
}
.landing__demo--board .good {
  color: var(--ids__success);
}
.landing__demo--board .warn {
  color: var(--ids__warning);
}
.landing__demo--board .bad {
  color: var(--ids__error);
}

/* Три цели дня — те же бары, что под шапкой тренажёра. */
.landing__goals > p {
  max-width: 40em;
  color: var(--ids__text-caption);
}
/* Цели дня — отдельный ряд листа во всю ширину (как карточки): три
   толстые капсулы вплотную, без рамки, круглые по краям. */
.landing__bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.landing__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(4rem, 6vw, 5.5rem);
  overflow: hidden;
  font-size: 1.15em;
  background: var(--track);
  border-radius: 999px;

  & i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--fill);
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  & b {
    position: relative;
    padding: 0 1.6em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}
.landing__bars.is-on .landing__bar i {
  width: var(--done);
}

/* Языки — овальные флаги, как в выборе языка. */
.landing__langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.15em;

  & li {
    display: flex;
    align-items: center;
    gap: 0.6em;
  }
  & img {
    width: 2.4em;
    height: 1.2em;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ids__grid) 60%, transparent);
  }
  & .soon {
    color: var(--ids__text-caption);
  }
  & small {
    font-family: "Roboto Mono", ui-monospace, monospace;
    font-size: 0.7em;
  }
}


/* ── Телефон и планшет ─────────────────────────────────────────────────── */

@media (width < 1000px) {
  .landing__cards {
    grid-template-columns: 1fr;
  }
}
@media (width < 640px) {
  /* Телефон: лягушка не мельче 4.5rem, небо — по содержимому. */
  :root {
    --landing__frog: clamp(4.5rem, 20vw, 6rem);
  }
  .landing__sky {
    min-height: 0;
    padding-bottom: calc(var(--landing__bubble) + 1.25rem);
  }
  .landing__bars {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing__explain i {
    animation: none;
  }
  .landing__explain i:first-child {
    opacity: 1;
  }
  .landing__flags-track,
  .landing__frog,
  .landing__frog img + img,
  .landing__demo--type .landing__input i {
    animation: none;
  }
  .landing__bar i {
    transition: none;
  }
}