/* ===========================================================================
   Наложение блоков при скролле.

   Блок с [data-stack] прокручивается как обычно, доезжает ВЕРХОМ до верха
   экрана и там замирает, а следующие секции наезжают на него сверху: они выше
   по слою и с непрозрачным фоном. Останавливается он не у самого края, а под
   плашкой навбара — см. --stack-top.

   Считать top от высоты экрана (высота экрана − высота блока) НЕЛЬЗЯ: тогда
   блок замирает, едва показавшись низом, и наезд начинается слишком рано.
   bottom: 0 тоже не годится — он подтягивает блок к низу экрана ещё до того,
   как до него доскроллили, и страница схлопывается в кашу.

   Три вещи, без которых эффект ломается:
     • у наезжающих секций непрозрачный фон (см. marketplaces, pricing, kt-blog);
     • ни у одного предка не должно быть overflow: hidden — прилипание умрёт.
       В base.css у html и body стоит overflow-x: clip: он не создаёт
       прокручиваемый контейнер, поэтому прилипание живёт;
     • закреплённый блок обязан лежать в общем родителе с тем, что на него
       наезжает. Футер лежит вне <main>, поэтому закрепляется сам <main> —
       см. [data-stack-tail] ниже.
   =========================================================================== */

/* Точка остановки — сразу под закреплённым навбаром, а не у самого края.
   Навбар при прокрутке кончается на 88px (десктоп), 76px (планшет) и 72px
   (мобильный); дальше небольшой зазор. С top: 0 плашка навбара накрывала
   верх карточки: у блога высотой 223px под неё уходила почти половина.

   ВАЖНО: это значение верно только для блоков, которые влезают в экран.
   Блок выше экрана прячет свой низ навсегда — на ноутбуке так становилась
   недосягаема кнопка отправки в форме склада. Для таких блоков top считает
   initScrollStack: высота экрана минус высота блока. */
:root {
  --stack-top: 104px;
}

[data-stack] {
  position: sticky;
  top: var(--stack-top);
  z-index: 0;
}

@media (max-width: 1199px) {
  :root {
    --stack-top: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --stack-top: 80px;
  }
}

/* Хвост страницы под футером — особый случай: закрепляется весь <main>, потому
   что футер лежит вне него и общего родителя с последней секцией у них нет.
   Здесь top: 0 не подходит — <main> замер бы с первого же пикселя прокрутки и
   страница перестала бы скроллиться. Значение ставит initScrollStack:
   высота экрана − высота main, то есть main замирает у самого своего конца. */
[data-stack-tail] {
  position: sticky;
  z-index: 0;
}

/* Сцена: закреплённый блок и непрозрачная полоса, которая на него наезжает.
   Обёртка ограничивает прилипание — в конце сцены блок отпускает и уезжает
   вместе со страницей, поэтому ниже он ниоткуда не просвечивает. */
.stack-scene {
  position: relative;
}

.stack-scene > [data-stack] {
  z-index: 0;
}

/* Полоса накрывает блок целиком: отступы между секциями внутри неё закрыты её
   фоном. Верхний отступ первой секции схлопывается наружу — это и есть зазор,
   в котором закреплённый блок видно перед наездом. */
.stack-scene__cover {
  position: relative;
  z-index: 1;
  background: var(--bg-main);
}

/* Футер лежит вне <main> и наезжает на его хвост. */
body > .footer,
body > .ff-footer {
  position: relative;
  z-index: 1;
}

/* Кому движение мешает — тому обычная прокрутка. */
@media (prefers-reduced-motion: reduce) {
  [data-stack] {
    position: static;
  }
}