Футер из-под страницы

Страница поднимается и «снимается» с футера, который всё время лежал под ней.

Скрольте внутри рамки до конца.

Страница

Скрольте внутри рамки вниз до конца — футер уже лежит под страницей и «открывается» из-под неё.

Код

<main class="page">…контент сайта…</main>
<footer class="reveal-foot">
  <h2>Футер</h2>
</footer>

<style>
/* вариант для обычной страницы */
.page { position: relative; z-index: 1; background: #fff;
  margin-bottom: 420px;               /* высота футера */
  box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.reveal-foot { position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 0; height: 420px; }
/* страница уезжает вверх и «открывает» лежащий под ней футер */
</style>

Промпт для ИИ

Сделай футер, открывающийся из-под страницы: контент — position:relative, z-index:1, непрозрачный фон, margin-bottom равный высоте футера и мягкая тень снизу; футер — position:fixed; bottom:0; z-index:0 той же высоты. При доскролле страница поднимается и «снимается» с футера, как лист с подложки. Внутри скролл-контейнера вместо fixed используй position:sticky; bottom:0. Высоту футера фиксируй, margin держи синхронным.