Кино-хиро

<!-- КОМБО = кен-бёрнс фон + мышиный параллакс + строки из масок
     + каскад появcísлений + вращающийся бейдж -->
<section class="hero">
  <div class="bg" data-m="12"></div>          <!-- фото, дрейф за мышью -->
  <div class="shade"></div>
  <div class="inner">
    <p class="eyebrow">надзаголовок</p>       <!-- fade 0.3s -->
    <h1 class="lines">
      <span class="ln"><span>Строка один</span></span>
      <span class="ln"><span>Строка два</span></span>
    </h1>
    <p class="sub">подзаголовок</p>           <!-- fade 1s -->
    <a class="cta">Кнопка</a>                 <!-- fade 1.25s -->
  </div>
  <a class="badge">…текст по кругу…</a>       <!-- fade 1.5s -->
</section>

<style>
.bg { position: absolute; inset: -6% 0; background: url(ph.jpg) center/cover;
  animation: kb 9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.ln { overflow: hidden; } .ln span { display:block; transform: translateY(115%);
  animation: up .75s cubic-bezier(.16,1,.3,1) forwards; }
.ln:nth-child(2) span { animation-delay: .12s; }
@keyframes up { to { transform: none; } }
.eyebrow, .sub, .cta, .badge { opacity: 0; animation: f 1s forwards; }
.eyebrow { animation-delay: .3s; } .sub { animation-delay: 1s; }
.cta { animation-delay: 1.25s; } .badge { animation-delay: 1.5s; }
@keyframes f { to { opacity: 1; } }
</style>

<!-- + мышиный параллакс (эффект «Мышиный параллакс»)
     + бейдж (эффект «Текст по кругу») -->

Собери кино-хиро из связки эффектов: (1) фоновое фото с кен-бёрнс оседанием scale 1.12→1.02 за 9s и лёгким мышиным параллаксом (лерп 0.06, сила 12px); (2) тёмный градиент снизу; (3) заголовок 2 строками из масок (overflow hidden, translateY(115%)→0, каскад 120мс); (4) оркестрованный каскад появлений: надзаголовок 0.3s → подзаголовок 1s → кнопка 1.25s → вращающийся бейдж «скролль вниз» (SVG textPath) 1.5s. Все кривые cubic-bezier(0.16,1,0.3,1). Контент прижат к левому низу, бейдж справа внизу.