/* VG Hero H1 + lead animation — единственный canonical способ выезда заголовка.
   Утверждено ЛПР 26.05.2026.
   Эталон: https://videoglobal.ru/ — h1.hh + .hero-sub.
   Применять на: money pages + страницы из верхнего меню сайта.
   НЕ применять: статьи (articles/*), блог (blog*), кейсы (case-*).

   Использование (HTML):
   <h1 class="vg-h1-anim">
     <span class="ln"><span>Первая строка</span></span>
     <span class="ln"><span>вторая строка —</span></span>
     <span class="ln"><span style="color:var(--red)">подсветка</span></span>
   </h1>
   <p class="vg-lead-anim">Lead-параграф под заголовком...</p>

   Lite-вариант (если разбивать H1 на строки тяжело — fade-up):
   <h1 class="vg-h1-fade">Заголовок одной строкой</h1>
*/

@keyframes vg-anim-su { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes vg-anim-fu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Slide-up маска (главный вариант, как на главной) */
.vg-h1-anim { display: block; }
.vg-h1-anim .ln { display: block; overflow: hidden; }
.vg-h1-anim .ln span { display: block; transform: translateY(110%); animation: vg-anim-su .82s cubic-bezier(.16, 1, .3, 1) forwards; }
.vg-h1-anim .ln:nth-child(1) span { animation-delay: .26s; }
.vg-h1-anim .ln:nth-child(2) span { animation-delay: .40s; }
.vg-h1-anim .ln:nth-child(3) span { animation-delay: .54s; }
.vg-h1-anim .ln:nth-child(4) span { animation-delay: .68s; }
.vg-h1-anim .ln:nth-child(5) span { animation-delay: .82s; }

/* Fade-up вариант (lite) — для страниц где H1 трудно разделить на строки */
.vg-h1-fade { opacity: 0; animation: vg-anim-fu .7s ease .2s forwards; }

/* Lead-параграф (для всех — slide-up или fade-up H1) */
.vg-lead-anim { opacity: 0; animation: vg-anim-fu .6s ease .78s forwards; }

/* Защита для пользователей с prefers-reduced-motion — без анимаций сразу видимо */
@media (prefers-reduced-motion: reduce) {
  .vg-h1-anim .ln span,
  .vg-h1-fade,
  .vg-lead-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}