/* Страница со ссылками на приложения: раскладка, сцена и витрина оценки. */

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 56px) clamp(28px, 4vw, 48px);
  overflow: hidden;

  /* Смещение указателя: -0.5…0.5 по каждой оси, ставится из JS не чаще кадра.
     Значения по умолчанию нужны для первого кадра и для тач-экранов, где
     указателя нет вовсе. */
  --px: 0;
  --py: 0;
}

/* ── Сцена ── */

.landing__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Уходящая вдаль сетка. Наклон делает из плоских линий пол, а бесконечность
   даёт сдвиг ровно на одну ячейку: в конце цикла картинка совпадает с началом,
   и стыка не видно. */
.landing__grid {
  position: absolute;
  inset: auto -60% -14%;
  height: 62vh;
  background-image:
    linear-gradient(to right, rgba(255, 212, 38, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 212, 38, 0.14) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(560px) rotateX(74deg) translateY(calc(var(--py) * -14px));
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, transparent 96%);
  animation: grid-flow 5.5s linear infinite;
  opacity: 0.7;
}

/* Пятна света. Тёплое — за заголовком, холодное — за витриной оценки: два
   центра внимания страницы подсвечены каждый своим. */
.landing__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.landing__aurora--warm {
  top: -22%;
  left: -12%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(255, 212, 38, 0.22), transparent 68%);
  transform: translate3d(calc(var(--px) * 46px), calc(var(--py) * 34px), 0);
  animation: aurora-warm 18s var(--ease-out) infinite alternate;
}

.landing__aurora--cold {
  top: -8%;
  right: -18%;
  width: 54vw;
  height: 54vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(76, 141, 246, 0.2), transparent 70%);
  transform: translate3d(calc(var(--px) * -38px), calc(var(--py) * -26px), 0);
  animation: aurora-cold 22s var(--ease-out) infinite alternate;
}

/* Зерно и строчная развёртка. Плёночная фактура снимает с больших тёмных
   плоскостей ощущение пустого чёрного прямоугольника. */
.landing__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

.landing__grain::after {
  content: '';
  position: absolute;
  inset: -100% 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 4px
  );
  animation: scanlines 9s linear infinite;
}

.landing__head,
.landing__hero,
.landing__features,
.landing__foot {
  position: relative; /* поверх сцены */
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Шапка ── */

.landing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: rise-in 700ms var(--ease-out) both;
}

.landing__stamp {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* ── Первый экран ── */

.landing__hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 56px);
}

@media (min-width: 940px) {
  .landing__hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.landing__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-on-soft);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: rise-in 700ms var(--ease-out) 80ms both;
}

/* Точка мигает, а не горит ровно: строка «кабинет закрыт» — единственное
   объявление на странице, и взгляд должен зацепиться за неё первым. */
.landing__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 2.6s var(--ease-out) infinite;
}

.landing__title {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Заголовок собирается по словам: каждое выходит из размытия со своей
   задержкой (--i из разметки). Читается как проявление, а не как выезд. */
.landing__word {
  display: inline-block;
  animation: word-in 760ms var(--ease-out) both;
  animation-delay: calc(160ms + var(--i) * 90ms);
}

.landing__title-accent {
  display: block;
  color: var(--brand);
  text-shadow: 0 0 38px rgba(255, 212, 38, 0.22);
}

.landing__lead {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--text-mid);
  animation: rise-in 760ms var(--ease-out) 520ms both;
}

/* ── Кнопки магазинов ── */

.landing__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.store-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
  min-width: 262px;
  padding: 16px 22px;
  border: 1px solid var(--surface-hairline);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  color: var(--text-hi);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--elev-card);
  transition:
    transform var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out);
  animation: rise-in 700ms var(--ease-out) both;
  animation-delay: calc(620ms + var(--i) * 90ms);
}

.store-card--primary {
  border-color: transparent;
  background: var(--cta-bg);
  color: var(--cta-fg);
}

/* Блик проходит по главной кнопке раз в несколько секунд и по любой — при
   наведении. Это единственная «реклама» на странице, и она короткая. */
.store-card__shine {
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.18) 46%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent
  );
  transform: translateX(-40%) skewX(-14deg);
  pointer-events: none;
}

.store-card--primary .store-card__shine {
  animation: shine 4.6s var(--ease-out) 1.6s infinite;
}

.store-card__mark {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  color: inherit;
  transition: transform var(--dur-normal) var(--ease-out);
}

.store-card__text {
  display: flex;
  flex-direction: column;
}

.store-card__action {
  font-size: var(--text-title-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.store-card__store {
  font-size: var(--text-caption);
  color: inherit;
  opacity: 0.62;
}

.store-card__note {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  opacity: 0.5;
}

@media (hover: hover) {
  .store-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--elev-overlay);
  }

  .store-card:hover .store-card__mark {
    transform: translateY(-2px) scale(1.06);
  }

  .store-card:hover .store-card__shine {
    animation: shine 900ms var(--ease-out);
  }

  .store-card--primary:hover {
    background: var(--cta-bg-hover);
    border-color: transparent;
  }
}

.store-card:active {
  transform: translateY(0) scale(0.99);
}

.store-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ── Витрина оценки ── */

.landing__demo {
  display: flex;
  justify-content: center;
  animation: demo-in 900ms var(--ease-out) 360ms both;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -10px), 0);
}

@media (min-width: 940px) {
  .landing__demo {
    justify-content: flex-end;
  }
}

/* Карточка слегка доворачивается за курсором. Наклон живёт на .estimate, а не
   на .landing__demo: там уже занят transform анимацией появления, и второй
   перебил бы первый. Переход сглаживает рывки между кадрами указателя. */
.landing__demo .estimate {
  transform: perspective(1100px) rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -6deg));
  transition: transform 220ms var(--ease-out);
}

/* ── Что внутри приложения ── */

/* Ровно три колонки под тремя обычными карточками: auto-fit на широком экране
   делал четвёртую колонку, и в сетке зияла пустая ячейка. */
.landing__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--surface-hairline);
  border-radius: var(--r-lg);
  background: var(--surface-hairline);
  overflow: hidden;
}

/* Оценка заказа занимает всю верхнюю строку сетки: это главная причина ставить
   приложение, и в ряду одинаковых карточек она бы потерялась. */
.feature--lead {
  grid-column: 1 / -1;
  gap: 10px;
}

.feature--lead .feature__title {
  font-size: var(--text-title-lg);
}

.feature--lead .feature__text {
  max-width: 62ch;
  font-size: var(--text-body);
}

/* Карточки склеены в сетку через фон-подложку: волосяные линии между ними
   рисует зазор в 1px, а не рамка у каждой — иначе на стыках получается 2px. */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 24px;
  background: var(--surface-card);
}

/* До появления в поле зрения карточки лежат ниже и прозрачные; класс
   is-visible ставит наблюдатель пересечений из landing.js. Пряталка висит на
   .js: без скрипта прятать нечем, и страница осталась бы наполовину пустой. */
.js .feature {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}

.landing__features.is-visible .feature {
  opacity: 1;
  transform: none;
}

/* Подсветка карточки под курсором: не рамка, а мягкое свечение сверху —
   рамка на стыке в 1px превратилась бы в двойную линию. */
.feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 212, 38, 0.09), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .feature:hover::after {
    opacity: 1;
  }
}

.feature__index {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--brand);
}

.feature__title {
  font-size: var(--text-title-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.feature__text {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-mid);
}

/* ── Подвал ── */

.landing__foot {
  margin-top: auto;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--surface-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}

.js .landing__foot {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}

.landing__foot.is-visible {
  opacity: 1;
  transform: none;
}

.landing__support {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--text-mid);
}

.landing__support a {
  color: var(--text-hi);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.landing__support a:hover {
  color: var(--brand);
}

.landing__support a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.landing__legal {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  color: var(--text-low);
}

/* ── Ключевые кадры ── */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes demo-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes grid-flow {
  to {
    background-position:
      0 62px,
      0 62px;
  }
}

@keyframes aurora-warm {
  from {
    filter: blur(90px) saturate(1);
  }

  to {
    filter: blur(104px) saturate(1.25);
  }
}

@keyframes aurora-cold {
  from {
    filter: blur(96px) saturate(1.1);
  }

  to {
    filter: blur(84px) saturate(0.9);
  }
}

@keyframes scanlines {
  to {
    transform: translateY(60px);
  }
}

@keyframes blink {
  0%,
  62%,
  100% {
    opacity: 1;
  }

  72%,
  88% {
    opacity: 0.25;
  }
}

@keyframes shine {
  from {
    transform: translateX(-40%) skewX(-14deg);
  }

  to {
    transform: translateX(420%) skewX(-14deg);
  }
}

@media (max-width: 520px) {
  .store-card {
    min-width: 0;
    width: 100%;
  }
}

@media (min-width: 700px) {
  .landing__features {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Просьба уменьшить движение. Гасим всё: и то, что живёт постоянно (сетка,
   свет, блик), и то, что играет один раз, — иначе страница въезжает рывками
   там, где просили покоя. Содержимое при этом видно целиком. */
@media (prefers-reduced-motion: reduce) {
  .landing *,
  .landing *::before,
  .landing *::after {
    animation: none !important;
    transition: none !important;
  }

  .landing__grid {
    opacity: 0.35;
  }

  .feature,
  .landing__foot {
    opacity: 1;
    transform: none;
  }
}


/* Витрина оценки заказа. Движение здесь несёт смысл: подсветка по контуру —
 * «идёт расчёт», искра по маршруту — «известна точка Б», прыжок суммы — «ответ
 * готов», выезд пуша — «пришло на телефон». Всё на transform, opacity и filter,
 * то есть на композиторе: страница не пересчитывает раскладку ни на кадре. */

.estimate {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.estimate__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* Живая точка. Пульс — единственный элемент, который движется постоянно:
   он говорит, что это запись экрана, а не картинка. */
.estimate__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 0 rgba(42, 191, 110, 0.55);
  animation: estimate-pulse 2.4s var(--ease-out) infinite;
}

.estimate__screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 20px 22px;
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
    var(--surface-card);
  box-shadow: var(--elev-overlay);
  overflow: hidden;
}

/* Свет, бегущий по контуру. Конический градиент крутится под карточкой, а
   вторая подложка закрывает середину — видна только рамка толщиной 1px. */
.estimate__screen::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(
    from 0turn,
    transparent 0turn 0.08turn,
    var(--brand) 0.16turn,
    transparent 0.28turn 0.58turn,
    var(--info) 0.66turn,
    transparent 0.78turn 1turn
  );
  animation: estimate-orbit 7s linear infinite;
}

.estimate__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-card);
}

.estimate__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.estimate__app {
  color: var(--text-mid);
}

.estimate__status {
  color: var(--brand);
}

/* Полоса сканирования: один проход сверху вниз, пока приложение ищет заказ.
   Даёт понять, что карточка живая, ещё до появления первой цифры. */
.estimate__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  background: linear-gradient(180deg, transparent, rgba(255, 212, 38, 0.1), transparent);
  opacity: 0;
  pointer-events: none;
}

.estimate--search .estimate__scan {
  animation: estimate-scan 1.5s var(--ease-out);
}

/* ── Маршрут ── */

.estimate__route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--text-caption);
  color: var(--text-mid);
}

.estimate__point {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;
}

.estimate__point--b {
  color: var(--text-hi);
  opacity: 0.35;
  transition: opacity var(--dur-normal) var(--ease-out);
}

.estimate--route .estimate__point--b,
.estimate--count .estimate__point--b,
.estimate--push .estimate__point--b,
.estimate--static .estimate__point--b {
  opacity: 1;
}

.estimate__line {
  position: relative;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--surface-hairline), var(--surface-control));
  overflow: hidden;
}

/* Искра пробегает ровно один раз — на шаге «известна точка Б». Ключ анимации
   выдаёт класс шага, поэтому повтор совпадает с циклом сценария. */
.estimate__spark {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  transform: translateX(-110%);
}

.estimate--route .estimate__spark {
  animation: estimate-spark 1.2s var(--ease-out) forwards;
}

/* ── Сумма ── */

.estimate__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.estimate__sum {
  font-family: var(--font-mono);
  font-size: var(--text-money-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--brand);
  text-shadow: 0 0 26px rgba(255, 212, 38, 0.28);
}

/* Три точки вместо суммы: пульсируют по очереди, как индикатор набора. */
.estimate__sum--wait {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-low);
  text-shadow: none;
}

.estimate__sum--wait i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: estimate-dots 1.1s var(--ease-out) infinite;
}

.estimate__sum--wait i:nth-child(2) {
  animation-delay: 140ms;
}

.estimate__sum--wait i:nth-child(3) {
  animation-delay: 280ms;
}

/* Небольшой прыжок в момент, когда счётчик добежал: без него готовая сумма
   ничем не отличается от продолжающегося счёта. */
.estimate--push .estimate__sum,
.estimate--static .estimate__sum {
  animation: estimate-settle 620ms var(--ease-out);
}

.estimate__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* ── Подробности ── */

.estimate__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--surface-hairline);
}

.estimate__meta div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.estimate__meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}

.estimate__meta dd {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--text-mid);
}

/* ── Пуш ── */

.estimate__push {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(35, 40, 45, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: var(--elev-overlay);
  opacity: 0;
  transform: translateY(-16px) scale(0.98);
  pointer-events: none;
}

.estimate--push .estimate__push,
.estimate--static .estimate__push {
  animation: estimate-push 3.2s var(--ease-out) forwards;
}

.estimate--static .estimate__push {
  animation: none;
  opacity: 1;
  transform: none;
}

.estimate__push-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
}

.estimate__push-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.estimate__push-text b {
  font-size: var(--text-title-sm);
}

.estimate__push-text i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-mid);
}

.estimate__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-low);
}

/* ── Ключевые кадры ── */

@keyframes estimate-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(42, 191, 110, 0.5);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(42, 191, 110, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(42, 191, 110, 0);
  }
}

@keyframes estimate-orbit {
  to {
    transform: rotate(1turn);
  }
}

@keyframes estimate-spark {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(240%);
  }
}

@keyframes estimate-settle {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(1.055);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes estimate-scan {
  from {
    opacity: 0.9;
    transform: translateY(-100%);
  }

  to {
    opacity: 0;
    transform: translateY(360px);
  }
}

@keyframes estimate-dots {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.86);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes estimate-push {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }

  12%,
  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
  }
}

/* Просьба уменьшить движение: остаётся статичная карточка с готовой суммой и
   видимым пушем — рассказ тот же, только без движения. */
@media (prefers-reduced-motion: reduce) {
  .estimate__live,
  .estimate__screen::before,
  .estimate__scan,
  .estimate__spark,
  .estimate__sum,
  .estimate__sum--wait i,
  .estimate__push {
    animation: none !important;
  }

  .estimate__push {
    opacity: 1;
    transform: none;
  }
}

/* Очередь появления. Номер элемента задан здесь, а не в разметке: инлайновый
   style потребовал бы открыть в CSP style-src 'unsafe-inline', а это дыра
   ради четырёх чисел. */
.landing__word:nth-child(1) {
  --i: 0;
}

.landing__word:nth-child(2) {
  --i: 1;
}

.landing__word:nth-child(3) {
  --i: 2;
}

.landing__word:nth-child(4) {
  --i: 3;
}

.landing__word:nth-child(5) {
  --i: 4;
}

.store-card:nth-child(1) {
  --i: 0;
}

.store-card:nth-child(2) {
  --i: 1;
}

.feature:nth-child(1) {
  --i: 0;
}

.feature:nth-child(2) {
  --i: 1;
}

.feature:nth-child(3) {
  --i: 2;
}

.feature:nth-child(4) {
  --i: 3;
}