/*
 * Движение лендинга (DRE-120) — токены и приёмы продукта (DRE-102, Р12–Р14, Р17, Р42).
 * Анимируются только transform, translate, прозрачность и clip-path; отступы,
 * размеры и разрядка — никогда. «Уменьшить движение» выключает всё.
 */

/* Появление блока: снизу на 24 px с проявлением, 640 мс. */
@keyframes enter {
  from {
    opacity: 0;
    translate: 0 var(--enter-distance);
  }

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

/* Появление шапки: только прозрачность — без смещения. */
@keyframes plate-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Проявление планов панорамы при открытии: от дальнего к ближнему. */
@keyframes layer-enter {
  from {
    opacity: 0;
    translate: 0 32px;
  }

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

/* Заголовок первого экрана проявляется снизу из-под маски; рамка H1 не сдвигается. */
@keyframes title-enter {
  from {
    opacity: 0;
    clip-path: inset(100% -4% -16% -4%);
  }

  to {
    opacity: 1;
    clip-path: inset(-16% -4% -16% -4%);
  }
}

@keyframes title-line-enter {
  from {
    translate: 0 var(--enter-distance);
  }

  to {
    translate: none;
  }
}

/* Полоса шкалы «наливается» слева направо, когда блок оценки входит в окно. */
@keyframes scale-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: none;
  }
}

/*
 * Блоки появляются по очереди с первой отрисовки, без JavaScript тоже, и остаются
 * видимыми. Блок ниже края окна при загрузке ждёт прокрутки (data-reveal="waiting").
 */
.reveal {
  animation: enter var(--duration-slow) var(--ease-enter) both;
  animation-delay: calc(var(--enter-order, 0) * var(--stagger-step));
}

.reveal[data-reveal="waiting"] {
  opacity: 0;
  animation: none;
}

.reveal[data-reveal="shown"] {
  animation: enter var(--duration-slow) var(--ease-enter) both;
  animation-delay: calc(var(--enter-order, 0) * var(--stagger-step));
}

.title.reveal,
.title.reveal[data-reveal="shown"] {
  animation-name: title-enter;
}

.title__line {
  display: block;
  animation: title-line-enter var(--duration-slow) var(--ease-enter) both;
  animation-delay: calc(var(--enter-order, 0) * var(--stagger-step));
}

.reveal[data-reveal="shown"] .band__fill,
.reveal:not([data-reveal]) .band__fill {
  animation: scale-fill 1200ms var(--ease-enter) both;
  animation-delay: calc(240ms + var(--fill-order, 0) * 120ms);
}

/*
 * «Уменьшить движение»: всё сразу на месте. Именно none, а не короткая длительность:
 * завершённые анимации иначе остаются в document.getAnimations(). Параллакс неподвижен
 * дважды: код не ставит сдвиг, а стиль снимает transform.
 */
/* biome-ignore-start lint/complexity/noImportantStyles: настройка системы сильнее стилей блоков и встроенного сдвига параллакса */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .panorama__layer {
    transform: none !important;
  }

  .reveal[data-reveal="waiting"] {
    opacity: 1;
  }
}
/* biome-ignore-end lint/complexity/noImportantStyles: конец блока «уменьшить движение» */