/* ============================================================
   Анимации, вытащенные с https://live.contented.ru/intensive_graph
   ------------------------------------------------------------
   Способ извлечения: JS-инспекция document.styleSheets, выборка
   правил `@keyframes sbs-*` (Tilda Step-By-Step) и `popmechanic-*`,
   плюс getComputedStyle() на каждом элементе с классом
   `.tn-atom__sbs-anim-wrapper` для маппинга элемент→анимация.

   В исходном лендинге:
   - 18 уникальных sbs-keyframes (все — один паттерн «drop from top
     with elastic bounce», разные timings под каскад)
   - 20 popmechanic-keyframes (fadeIn/Out × 4 direction × dup with -webkit-)
   - fill-mode: forwards, iteration: 1, timing: linear (на wrapper),
     внутри кейфрейма — cubic-bezier(0.34, 1.61, 0.7, 1) на «bounce-фазу»

   В исходнике все 18 keyframes повторяют один паттерн с разными
   timings — здесь паттерн один, варианты через CSS-переменные.

   Запуск: Tilda дописывает CSS на каждый элемент при попадании в
   viewport. У нас в v2 уже есть `IntersectionObserver` — повесим на
   него класс `.contented-in-view`, чтобы анимация играла один раз
   при первом показе.
   ============================================================ */

/* ---------- Паттерн 1: «drop from top with bounce» ----------
   Элемент уже на своём месте → моментально (1% длительности) уходит
   на 800px вверх → держится там 24-39% времени → возвращается с
   эластичным bezier.

   В исходнике каждый элемент получал свой timing (24.53% или 39.1%)
   плюс свою длительность (1/1.3/1.7/2/2.1/2.3s) — это создавало
   каскадный stagger.
*/

@keyframes contented-drop-bounce {
  0%   { transform: translateY(0); }
  1%   { transform: translateY(-800px); }
  39%  { transform: translateY(-800px); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); }
  100% { transform: translateY(0); }
}

/* Вариант с более «быстрым прилётом» — hold короче (24.5% вместо 39%) */
@keyframes contented-drop-bounce-quick {
  0%   { transform: translateY(0); }
  1%   { transform: translateY(-800px); }
  24.5%{ transform: translateY(-800px); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); }
  100% { transform: translateY(0); }
}

/* Базовый класс. Анимация запускается сразу при рендере (forwards держит
   финальное состояние). Для блоков ниже viewport — навесить IntersectionObserver
   и стартовый класс `.deferred` (см. ниже). */
.contented-drop {
  animation: contented-drop-bounce 2.1s linear forwards;
}
.contented-drop.deferred {
  animation-play-state: paused;
}
.contented-drop.deferred.in-view { animation-play-state: running; }

/* Каскад через CSS-переменные.
   Использование: <div class="contented-drop" style="--d:1.7s">…
   или утилитарные классы ниже. */
.contented-drop[style*="--d"] { animation-duration: var(--d); }
.dur-1   { --d: 1s;   }
.dur-13  { --d: 1.3s; }
.dur-17  { --d: 1.7s; }
.dur-2   { --d: 2s;   }
.dur-21  { --d: 2.1s; }
.dur-23  { --d: 2.3s; }

/* «Быстрый прилёт» — те же длительности, но hold меньше */
.contented-drop--quick {
  animation: contented-drop-bounce-quick 2.1s linear forwards;
}
.contented-drop--quick.deferred {
  animation-play-state: paused;
}
.contented-drop--quick.deferred.in-view { animation-play-state: running; }


/* ---------- Паттерн 2: fade-in (4 направления) ----------
   Лендинг подключает popmechanic-фейды (стандартная Tilda-библиотека),
   но визуально они почти не используются на видимых блоках —
   служебные.

   На всякий случай переносим — иногда нужны для маленьких декораций
   (звёздочки, мелкие иконки) которым «drop-bounce» избыточен.
*/

@keyframes contented-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes contented-fade-in-down {
  0%   { opacity: 0; transform: translate3d(0, -100%, 0); }
  100% { opacity: 1; transform: translateZ(0); }
}

@keyframes contented-fade-in-up {
  0%   { opacity: 0; transform: translate3d(0, 100%, 0); }
  100% { opacity: 1; transform: translateZ(0); }
}

@keyframes contented-fade-in-left {
  0%   { opacity: 0; transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; transform: translateZ(0); }
}

@keyframes contented-fade-in-right {
  0%   { opacity: 0; transform: translate3d(100%, 0, 0); }
  100% { opacity: 1; transform: translateZ(0); }
}

/* Анимации играют сразу при первом рендере (forwards фиксирует конечное состояние).
   Чтобы отложить запуск до попадания в viewport — добавить класс `.deferred`. */
.contented-fade        { animation: contented-fade-in 0.8s ease forwards; }
.contented-fade-down   { animation: contented-fade-in-down 0.8s ease forwards; }
.contented-fade-up     { animation: contented-fade-in-up 0.8s ease forwards; }
.contented-fade-left   { animation: contented-fade-in-left 0.8s ease forwards; }
.contented-fade-right  { animation: contented-fade-in-right 0.8s ease forwards; }

.contented-fade.deferred,
.contented-fade-down.deferred,
.contented-fade-up.deferred,
.contented-fade-left.deferred,
.contented-fade-right.deferred { animation-play-state: paused; }

.contented-fade.deferred.in-view,
.contented-fade-down.deferred.in-view,
.contented-fade-up.deferred.in-view,
.contented-fade-left.deferred.in-view,
.contented-fade-right.deferred.in-view { animation-play-state: running; }


/* ============================================================
   Маппинг анимаций → элементы на оригинальном лендинге
   (из getComputedStyle, координаты `y` = scroll-top на момент захвата)
   ============================================================

   HERO (y = -135 до 431):
   - sbs-...625 / 2.1s — большая фоновая декорация (W=1466, шахматные ленты-флаги)
   - sbs-...627 / 1.7s — средний слой hero (контентовая зона)
   - sbs-...621 / 2.1s — вторая большая декорация
   - sbs-...618 / 2.1s — CTA-кнопка «попробовать»
   - sbs-...653 / 2.3s — popup со скрепкой (узкий W=108)
   - sbs-...624 / 1.3s — компьютер CRT-монитор

   БЛОК «приготовили подарок» (y = 1348-1529):
   - sbs-...357 / 1s    — маленькая звёздочка
   - sbs-...362 / 1s    — мобильник pixel-art (W=88 — крупное изображение)
   - sbs-...705 / 1s    — фон блока с радио-волнами
   - sbs-...667 / 2s    — кнопка «зарегистрироваться»

   СРЕДНИЙ БЛОК (y = 2720):
   - sbs-...684 / 1s    — Mac/CRT поверх pixel-облаков

   БОЛЬШАЯ ДЕКОРАЦИЯ (y = 4413):
   - sbs-...230 / 2s    — крупная зона (W=552, H=691) — вероятно
                          мобильник+калькулятор в блоке «что даст»

   БЛОК «3 день» (y = 6860):
   - sbs-...815 / 2s    — кнопка «загрузить симулятор»

   ФИНАЛЬНЫЙ CTA (y = 8130-8929):
   - sbs-...889 / 2.1s  — фоновая декорация финального экрана
   - sbs-...892 / 1.7s  — средний слой
   - sbs-...893 / 2.1s  — вторая декорация
   - sbs-...895 / 2.3s  — мелкая (звёздочка/persona)
   - sbs-...896 / 1.3s  — CRT-монитор

   Длительности образуют шкалу: 1 / 1.3 / 1.7 / 2 / 2.1 / 2.3 сек —
   шесть стандартных значений, которые можно крутить через переменную --d.
   ============================================================ */