/* ============================================================
   VELARY US — анимация героя главной страницы
   Единственная анимация на сайте. Таймлайн 3.2 с, из Figma Motion
   (cohort 4005:1515, узлы 4213:30364 / 30366 / 30367 / 30368 / 30369
    + 30372 / 30373 / 30375).

   Проигрывается один раз при каждой загрузке и обновлении страницы.
   Чтобы зациклить, как в Figma: --hero-iterations: infinite (tokens.css).
   ============================================================ */

/* До готовности шрифтов элементы скрыты, чтобы не было прыжка текста.
   Классы .js и .is-ready ставит инлайновый скрипт в <head> + hero-motion.js.
   Без JS всё остаётся видимым — контент не теряется. */
.js .hero-anim { opacity: 0; }
.is-ready .hero-anim { opacity: 1; }

.is-ready .scribble          { animation: hero-shape var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .scribble__s1 path { animation: draw-s1    var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .scribble__s3 path { animation: draw-s3    var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .scribble__s4 path { animation: draw-s4    var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .scribble__s6      { animation: hero-s6    var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .hero__hi          { animation: hero-hi    var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .hero__title       { animation: hero-title var(--hero-duration) linear both var(--hero-iterations); }
.is-ready .hero__desc        { animation: hero-desc  var(--hero-duration) linear both var(--hero-iterations); }

/* Техника отрисовки: pathLength="1" на каждом контуре,
   dasharray "1 1" + dashoffset 1 → 0. Дополнительный шаг по opacity
   гасит круглый наконечник линии до старта сегмента. */
.scribble__layer path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

/* --- Контейнер каракули: 250 → 650 мс --- */
@keyframes hero-shape {
  0%      { opacity: 0; translate: 0 -12px; }
  7.813%  { opacity: 0; translate: 0 -12px; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  20.313% { opacity: 1; translate: 0 0; }
  100%    { opacity: 1; translate: 0 0; }
}

/* --- s1: 0 → 1000 мс --- */
@keyframes draw-s1 {
  0%      { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  31.25%  { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

/* --- s3: 760 → 1260 мс --- */
@keyframes draw-s3 {
  0%, 23.749% { stroke-dashoffset: 1; opacity: 0; }
  23.75%      { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  39.375%     { stroke-dashoffset: 0; opacity: 1; }
  100%        { stroke-dashoffset: 0; opacity: 1; }
}

/* --- s4: 1020 → 1520 мс --- */
@keyframes draw-s4 {
  0%, 31.874% { stroke-dashoffset: 1; opacity: 0; }
  31.875%     { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  47.5%       { stroke-dashoffset: 0; opacity: 1; }
  100%        { stroke-dashoffset: 0; opacity: 1; }
}

/* --- s6: 1280 → 1780 мс --- */
@keyframes hero-s6 {
  0%       { opacity: 0; }
  40%      { opacity: 0; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  55.625%  { opacity: 1; }
  100%     { opacity: 1; }
}

/* --- «HI,» — 500 → 1000 мс --- */
@keyframes hero-hi {
  0%       { opacity: 0; translate: 0 20px; scale: .8; }
  15.625%  { opacity: 0; translate: 0 20px; scale: .8; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  31.25%   { opacity: 1; translate: 0 0; scale: 1; }
  100%     { opacity: 1; translate: 0 0; scale: 1; }
}

/* --- Заголовок — 700 → 1150 мс --- */
@keyframes hero-title {
  0%       { opacity: 0; translate: 0 30px; }
  21.875%  { opacity: 0; translate: 0 30px; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  35.938%  { opacity: 1; translate: 0 0; }
  100%     { opacity: 1; translate: 0 0; }
}

/* --- Описание — 950 → 1450 мс --- */
@keyframes hero-desc {
  0%       { opacity: 0; translate: 0 20px; }
  29.688%  { opacity: 0; translate: 0 20px; animation-timing-function: cubic-bezier(0, 0, .58, 1); }
  45.313%  { opacity: 1; translate: 0 0; }
  100%     { opacity: 1; translate: 0 0; }
}

/* --- Системная настройка «меньше движения»: сразу финальное состояние --- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-anim,
  .is-ready .hero-anim { opacity: 1; }
  .is-ready .scribble,
  .is-ready .scribble__s1 path,
  .is-ready .scribble__s3 path,
  .is-ready .scribble__s4 path,
  .is-ready .scribble__s6,
  .is-ready .hero__hi,
  .is-ready .hero__title,
  .is-ready .hero__desc { animation: none; opacity: 1; translate: none; scale: none; }
  .scribble__layer path { stroke-dashoffset: 0; }
}