Раскрытие-окно (наезд формы)

<!-- sticky-сцена: окно раскрывается на весь экран (lightshiprv.com) -->
<section class="mask-scene">  <!-- высота 320vh -->
  <div class="stick">
    <div class="media"><img src="photo.jpg"></div>
    <h2 class="cap">Заголовок на фото</h2>
    <div class="fill"><b>Вторая строка на заливке</b></div>
  </div>
</section>

<style>
.mask-scene { position: relative; height: 320vh; --p: 0; }
.stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.media { position: absolute; inset: 0;
  --w: calc(1 - clamp(0, calc(var(--p) / 0.45), 1));
  clip-path: inset(calc(var(--w) * 30%) round calc(var(--w) * 34px)); }
.media img { width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.18 - .18 * clamp(0, calc(var(--p) / .55), 1))); }
.cap { position: absolute; left: 0; right: 0; bottom: 11vh; text-align: center;
  color: #fff; opacity: calc(clamp(0, calc((var(--p) - .45) / .14), 1)
    * (1 - clamp(0, calc((var(--p) - .74) / .08), 1))); }
.fill { position: absolute; inset: 0; background: #E84B16;
  display: flex; align-items: center; justify-content: center; color: #fff;
  clip-path: inset(calc((1 - clamp(0, calc((var(--p) - .76) / .16), 1)) * 100%) 0 0 0); }
</style>

<script>
// прогресс сцены пишется в --p (0..1) с лерп-доводкой
var sc = document.querySelector(".mask-scene"), cur = NaN;
function loop() {
  var r = sc.getBoundingClientRect();
  var t = Math.min(Math.max(-r.top / (r.height - innerHeight), 0), 1);
  if (isNaN(cur)) cur = t;
  cur += (t - cur) * 0.1;
  sc.style.setProperty("--p", cur.toFixed(4));
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Сделай sticky-сцену «наезд формы и раскрытие» как хиро lightshiprv.com. Секция 320vh, внутри sticky-экран (top:0, height:100vh, overflow:hidden — и проверь, что НИ У ОДНОГО предка нет overflow:hidden, иначе sticky не сработает). JS в rAF пишет в CSS-переменную --p прогресс: t = clamp(-rect.top / (rect.height - innerHeight), 0, 1) с лерп-доводкой 0.1. CSS от --p: (1) фото в маске clip-path: inset(w*30% round w*34px), где w = 1 - clamp(p/0.45,0,1) — окно-карточка раскрывается на весь экран; (2) фото scale от 1.18 к 1; (3) на p 0.45-0.74 виден заголовок по центру низа; (4) с p 0.76 снизу поднимается заливка фирменным цветом (clip-path inset снизу) со второй строкой — приём jobyaviation.com. При prefers-reduced-motion — обычная секция со статичным фото.