/*
 * Operator Parallax
 * -----------------
 * Исходная монтажная область: 5436 × 2768 px.
 * Самолёт уже размещён внутри прозрачного изображения этого размера.
 * Полный оператор позиционируется в той же системе координат через SVG в HTML.
 * Все слои используют единый адаптивный SVG-viewBox. Небо больше монтажной
 * области и сохраняет запас по краям для движения без пустых участков.
 */

.operator-parallax {
  /* Основные параметры блока. Их можно переопределить в стилях проекта. */
  --operator-parallax-height: 100svh;
  --operator-parallax-min-height: 520px;

  /* Эти переменные обновляет JavaScript. */
  --operator-parallax-sky-x: 0px;
  --operator-parallax-sky-y: 0px;
  --operator-parallax-jet-x: 0px;
  --operator-parallax-jet-y: 0px;
  --operator-parallax-jet-shift-x: 0px;
  --operator-parallax-jet-shift-y: 0px;
  --operator-parallax-jet-scale: 1;
  --operator-parallax-operator-x: 0px;
  --operator-parallax-operator-y: 0px;

  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--operator-parallax-height);
  min-height: var(--operator-parallax-min-height);
  overflow: hidden;
  background: #0c5f9d;
  contain: layout paint;
  touch-action: pan-y;
}

.operator-parallax__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  will-change: transform;
}

.operator-parallax__sky {
  z-index: 0;
  transform: translate3d(
          var(--operator-parallax-sky-x),
          var(--operator-parallax-sky-y),
          0
  );
}

.operator-parallax__jet {
  z-index: 1;
  transform-origin: 70% 22%;
  transform: translate3d(
          calc(var(--operator-parallax-jet-x) + var(--operator-parallax-jet-shift-x)),
          calc(var(--operator-parallax-jet-y) + var(--operator-parallax-jet-shift-y)),
          0
  ) scale(var(--operator-parallax-jet-scale));
}

.operator-parallax__operator {
  z-index: 2;
  /* Не обрезаем запас оператора внутренними границами SVG. */
  overflow: visible;
  transform: translate3d(
          var(--operator-parallax-operator-x),
          var(--operator-parallax-operator-y),
          0
  );
}

.operator-parallax__layer image {
  pointer-events: none;
}

.operator-parallax__layer[hidden] {
  display: none;
}

/* На небольших экранах не заставляем шапку быть выше самого экрана. */
@media (max-width: 767px), (max-height: 620px) {
  .operator-parallax {
    --operator-parallax-min-height: 360px;
  }
}

/* Стили нужны только демонстрационной странице index.html. */
.operator-parallax-demo {
  margin: 0;
  background: #071a2a;
}

@media (prefers-reduced-motion: reduce) {
  .operator-parallax__layer {
    will-change: auto;
  }
}