Занавес из панелей

Панели разъезжаются со ступенькой, за ними — фото с мягким оседанием масштаба и заголовком из маски.

Интро играет само. «Повторить» — в углу.

За занавесом

уже готова сцена

Код

<div class="curtain c1"></div>
<div class="curtain c2"></div>
<header class="hero">
  <img class="photo" src="photo.jpg">
  <h1 class="line"><span>Заголовок</span></h1>
</header>

<style>
.curtain { position: fixed; left: 0; right: 0; z-index: 99; background: #101010; }
.c1 { top: 0; height: 50.5%; animation: cUp .9s cubic-bezier(.16,1,.3,1) .5s forwards; }
.c2 { bottom: 0; height: 50.5%; animation: cDown .9s cubic-bezier(.16,1,.3,1) .62s forwards; }
@keyframes cUp   { to { transform: translateY(-101%); } }
@keyframes cDown { to { transform: translateY(101%); } }

/* фото за занавесом мягко «оседает» из увеличенного масштаба */
.hero .photo { transform: scale(1.14);
  animation: settle 2.4s cubic-bezier(.16,1,.3,1) .6s forwards; }
@keyframes settle { to { transform: scale(1); } }

.hero .line { overflow: hidden; }
.hero .line span { display: block; transform: translateY(115%);
  animation: lineUp .7s cubic-bezier(.16,1,.3,1) 1.1s forwards; }
@keyframes lineUp { to { transform: none; } }
</style>

Промпт для ИИ

Сделай интро «занавес»: два фиксированных тёмных блока (верхняя и нижняя половины экрана, высота 50.5% для нахлёста), z-index 99. Верхний уезжает вверх translateY(-101%) за 0.9s с задержкой 0.5s, нижний вниз с задержкой 0.62s (ступенька = дороже). За занавесом фото хиро «оседает» из scale(1.14) к 1 за 2.4s, заголовок выезжает из маски с задержкой 1.1s. Все кривые cubic-bezier(0.16,1,0.3,1). Показывай раз за сессию (sessionStorage), при prefers-reduced-motion не показывай.