/* Варианты первого экрана главной (/des_1 … /des_15 и сама главная): общая основа.
   Страница получает классы .hero-des и .hero-des-N на корневом .landing-page;
   декор каждого варианта лежит в .des-stage внутри .hero. */
.hero-des .hero{ position: relative; isolation: isolate; overflow: hidden; }
.hero-des .hero-inner{ position: relative; z-index: 1; }

/* Слой декора: на весь первый экран, под содержимым, не ловит клики. */
.des-stage{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:where(.des-stage) svg{ display: block; }
/* Рамка шириной с колонку содержимого: удобно ставить декор относительно текста и формы. */
.des-frame{ position: absolute; top: 0; bottom: 0; left: 50%; width: min(1120px, calc(100% - 64px)); transform: translateX(-50%); }
@media (max-width: 900px){ .des-frame{ width: calc(100% - 44px); } }
@media (max-width: 700px){ .des-frame{ width: calc(100% - 36px); } }

/* Параллакс. Контроллер hero-parallax пишет три числа:
   --px, --py — положение курсора от −1 до 1 (сглажено), --sy — прокрутка, 0…1.5 высоты первого экрана.
   Переменные НЕ наследуются и записываются прямо на те элементы, которые их читают:
   на слои .plx и элементы .plx-var (свои формулы); --sy — ещё и на .hero-story.
   Так при движении мыши браузер пересчитывает стили нескольких элементов, а не всей сцены.
   Потомки и псевдоэлементы этих элементов переменных не видят: читать их должен сам элемент. */
@property --px { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --py { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --sy { syntax: "<number>"; inherits: false; initial-value: 0; }

/* Слой с глубиной --d (0 — неподвижен, 1 — ближний план). */
.plx{
  --d: 0; --plx-x: 36px; --plx-y: 24px; --plx-s: 140px;
  transform: translate3d(
    calc(var(--px, 0) * var(--d) * var(--plx-x) * -1),
    calc(var(--py, 0) * var(--d) * var(--plx-y) * -1 + var(--sy, 0) * var(--d) * var(--plx-s)),
    0);
  will-change: transform;
}

/* Переключатель вариантов — только для просмотра макетов. Крестик прячет его без JS. */
.des-switcher-off{ position: absolute; opacity: 0; pointer-events: none; }
.des-switcher-off:checked + .des-switcher{ display: none; }
.des-switcher{
  position: fixed; left: 50%; bottom: 14px; z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 100px; background: #1b1830eb; color: #fff; font-size: 13px; line-height: 1;
  font-family: 'Avenir Next','Segoe UI',Arial,sans-serif; letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 30px #0b081a40; white-space: nowrap; max-width: calc(100vw - 20px);
}
.des-switcher span{ padding: 0 8px; overflow: hidden; text-overflow: ellipsis; color: #d9d5ea; }
.des-switcher b{ color: #fff; font-weight: 700; }
.des-switcher a, .des-switcher label{
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #ffffff1f; color: #fff; font-size: 20px; line-height: 1; padding-bottom: 2px; cursor: pointer;
}
.des-switcher label{ background: transparent; color: #b9b3d1; font-size: 18px; width: 28px; }
.des-switcher a:hover{ background: #ffffff38; }
.des-switcher label:hover{ color: #fff; }
.des-switcher-off:focus-visible + .des-switcher label{ outline: 2px solid #fff; }
@media (max-width: 600px){ .des-switcher{ font-size: 12px; bottom: 10px; } .des-switcher a{ width: 32px; height: 32px; } }
@media print{ .des-switcher{ display: none; } }

/* Первый экран ушёл из окна (класс ставит контроллер hero-parallax) — его анимации на паузе. */
.is-offscreen .des-stage, .is-offscreen .des-stage *, .is-offscreen .des-stage *::before, .is-offscreen .des-stage *::after{ animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce){
  .des-stage, .des-stage *, .des-stage *::before, .des-stage *::after{ animation: none !important; transition: none !important; }
  .plx{ transform: none !important; }
}