Секции-шторки

Полноэкранные секции наезжают друг на друга как колода карт. Чистый CSS: position sticky и всё.

Просто скрольте вниз.

первая стоит

вторая наезжает

третья сверху

и финал на светлом

Код

<!-- секции наезжают друг на друга — чистый CSS, ноль JS -->
<div class="stack">
  <section class="page"><img src="a.jpg"><h2>Первая</h2></section>
  <section class="page"><img src="b.jpg"><h2>Вторая</h2></section>
  <section class="page"><img src="c.jpg"><h2>Третья</h2></section>
</div>

<style>
.stack .page {
  position: sticky;   /* каждая прилипает к верху... */
  top: 0;
  height: 100vh;      /* ...и следующая наезжает на неё */
  overflow: hidden;
  border-radius: 26px 26px 0 0;   /* край «карты» */
  display: flex; align-items: center; justify-content: center;
}
.stack .page img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; }
.stack .page h2 { position: relative; color: #fff; }
/* ВАЖНО: у .stack и его предков не должно быть overflow: hidden */
</style>

Промпт для ИИ

Сделай секции-шторки как StickyCSSElement на jobyaviation.com: подряд идущие полноэкранные секции с фотографиями, каждая position:sticky; top:0; height:100vh; overflow:hidden (внутри секции — можно). Эффект колоды: текущая секция стоит, следующая наезжает сверху и накрывает её. Скругли верхние углы (26px), фото — absolute inset:0 object-fit:cover, заголовок поверх белым. КРИТИЧНО: у контейнера стека и всех его предков не должно быть overflow:hidden/auto — это ломает sticky. Чистый CSS, JS не нужен.