/* ============================================================ stacking.css — механика «колоды» секций. Владелец: таск 04. Подключается первой строкой css/sections/hero.css (манифесты не трогаем). Как это работает: - js/stacking.js вешает на класс .stack-ready (нет JS — нет эффектов); - каждая секция [data-stack] прилипает (position: sticky) к верху окна; для секций выше окна JS считает отрицательный --stack-top, чтобы их можно было доскроллить до конца (прилипание нижним краем); - пока СЛЕДУЮЩАЯ секция наезжает, JS ведёт у текущей --stack-progress (0 → 1) и класс .is-leaving: уходящая прижимается (scale .96) и затемняется (::after). Только transform/opacity. - prefers-reduced-motion: reduce — всё выключено, обычная прокрутка (дублирует глушитель из base.css). ============================================================ */ html.stack-ready [data-stack] { position: sticky; top: var(--stack-top, var(--header-height, 0px)); /* Непрозрачный фон обязателен: колода прячет накрытую секцию. Секция может переопределить фон своим токеном поверхности. */ background: var(--color-surface-base); /* G85: секция короче вьюпорта прилипала к шапке, оставляя внизу щель, сквозь которую виден «хвост» предыдущей прижатой секции (у заказчика — обрезанные CTA направлений под полосой протокола). В колоде каждая карта обязана перекрывать вьюпорт: низ пришивается к низу окна. */ min-height: calc(100vh - var(--header-height, 0px)); box-sizing: border-box; } /* Эффект ухода вешается только на активную пару: transform не висит на всех секциях постоянно (не ломаем position: fixed у потомков). */ html.stack-ready [data-stack].is-leaving { transform: scale(calc(1 - 0.04 * var(--stack-progress, 0))); transform-origin: 50% 0; } html.stack-ready [data-stack].is-leaving::after { content: ''; position: absolute; inset: 0; z-index: 10; background: var(--color-surface-base); opacity: calc(0.55 * var(--stack-progress, 0)); pointer-events: none; } /* «Меньше движения»: колода полностью выключена, документ листается обычно */ @media (prefers-reduced-motion: reduce) { html.stack-ready [data-stack] { position: static !important; transform: none !important; } html.stack-ready [data-stack].is-leaving::after { content: none !important; } }