Оверлей-меню слоями

<button data-menu-btn="m">меню</button>
<div class="menu" id="m">
  <div class="layer l1"></div>   <!-- цветная подложка -->
  <div class="layer l2"></div>   <!-- тёмная панель -->
  <nav class="links">
    <a href="#"><span>Пункт один</span></a>
    <a href="#"><span>Пункт два</span></a>
  </nav>
</div>

<style>
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.menu .layer { position: absolute; inset: 0; transform: translateY(-101%); }
.menu .l1 { background: #0f6bf0; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.menu .l2 { background: #040404; transition: transform .6s cubic-bezier(.16,1,.3,1) .08s; }
.menu.open { visibility: visible; }
.menu.open .layer { transform: none; }

.menu .links { position: relative; padding: 18vh 8vw; display: grid; gap: 8px; }
.menu .links a { overflow: hidden; display: block; text-decoration: none;
  font: 800 clamp(30px,6vw,64px)/1.15 sans-serif; color: #fff; }
.menu .links a span { display: block; transform: translateY(115%);
  transition: transform .6s cubic-bezier(.16,1,.3,1); }
.menu.open .links a:nth-child(1) span { transition-delay: .25s; }
.menu.open .links a:nth-child(2) span { transition-delay: .32s; }
.menu.open .links a span { transform: none; }
</style>

<script>
document.querySelectorAll("[data-menu-btn]").forEach(function (btn) {
  btn.addEventListener("click", function () {
    document.getElementById(btn.getAttribute("data-menu-btn"))
      .classList.toggle("open");
  });
});
</script>

Сделай полноэкранное оверлей-меню слоями как Navigation на jobyaviation.com: фиксированный контейнер, внутри две подложки-слоя (цветная и тёмная), обе спрятаны translateY(-101%). По клику на бургер контейнеру класс open: слои съезжают вниз со ступенькой (вторая с задержкой 0.08s), затем пункты меню выезжают из масок построчно (задержки от 0.25s с шагом 0.07s). Закрытие — тот же toggle, слои уезжают обратно. Кривая cubic-bezier(0.16,1,0.3,1). Меню с data-lenis-prevent, чтобы скроллилось при активном Lenis.