/*
 * Панорама «Ориона» (DRE-120): три плана из статичных SVG, нарисованных тем же кодом,
 * что панорама продукта (src/components/panorama). Слои неподвижны под содержимым,
 * код параллакса сдвигает их вверх на 0,15, 0,3 и 0,5 прокрутки (transform),
 * появление при открытии — CSS (translate и прозрачность). До 768 px ближний план скрыт.
 *
 * Картинка слоя повторяет «xMidYMax slice» продукта: масштаб s — наибольшее из
 * отношений окна к окну охвата плана; низ окна охвата стоит у нижнего края окна, а
 * холст SVG продлён вниз (--vb-extra), поэтому при прокрутке парк продолжается.
 */
.panorama {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

/* Дымка у верхнего края: неподвижна, планы уходят под неё при прокрутке. */
.panorama::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58%;
  background-image: linear-gradient(
    to bottom,
    var(--color-field) 8%,
    transparent
  );
}

.panorama__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: layer-enter 1200ms var(--ease-enter) both;
}

.panorama__layer--far {
  --vb-w: 2880;
  --vb-h: 1440;
  --vb-extra: 0;
  --vb-fade: 0;

  animation-delay: 0ms;
}

.panorama__layer--middle {
  --vb-w: 1920;
  --vb-h: 960;
  --vb-extra: 800;
  --vb-fade: 560;

  animation-delay: 120ms;
}

.panorama__layer--near {
  --vb-w: 1280;
  --vb-h: 640;
  --vb-extra: 636;
  --vb-fade: 400;

  display: none;
  animation-delay: 240ms;
}

@media (min-width: 768px) {
  .panorama__layer--near {
    display: block;
  }
}

.panorama__img {
  --s: max(100cqw / var(--vb-w), 100cqh / var(--vb-h));

  position: absolute;
  top: calc(100% - var(--vb-h) * var(--s));
  left: calc(50% - var(--vb-w) * var(--s) / 2);
  width: calc(var(--vb-w) * var(--s));
  height: calc((var(--vb-h) + var(--vb-extra)) * var(--s));
  max-width: none;
  /* Нижний край холста растворяется в поле: на длинной странице нет обрыва. */
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - var(--vb-fade) * var(--s)),
    transparent
  );
  user-select: none;
}