/*
 * Анімації лендінгу — та сама мова руху, що у фінальній деці команди.
 *
 * Нічого не ховається без JavaScript: стани «до появи» діють лише під
 * html.nbm. Клас ставить інлайн-скрипт у <head> і сам знімає його за 3 с,
 * якщо js/nb-motion.js так і не завантажився, — тож у найгіршому разі
 * сторінка просто без анімацій, а не порожня.
 *
 * Рух — через окремі властивості translate / scale / rotate, а не transform:
 * у карток hero вже є свої transform (поворот бейджа 4.5), і анімація їх не
 * перебиває, а додається зверху.
 *
 * v2 (02.10.2026): рух помітніший і довший, hero стартує лише коли картинка
 * телефона вже декодована (інакше на повільному з'єднанні вона догружалась
 * після кінця анімації і просто «з'являлась»). Зі «Зменшити рух» рух
 * лишається, але коротший і без безкінечного плавання.
 */

/* Перший екран ховаємо одразу, ще до скрипта, — інакше він встигав би
   намалюватися, зникнути й з'явитися знову. Заголовок, кнопку й цифри скрипт
   показує одразу (nbm-ready); телефон і картки — коли картинка телефона
   готова (nbm-hero), щоб вона не догружалась уже після своєї анімації.
   Якщо скрипт не прийде, сторожа в <head> зніме html.nbm цілком. */
html.nbm:not(.nbm-ready) :is(.finallandingmob-frame1139, .finallandingmob-mobile1, .finallandingmob-frame1051,
  .finallandingmob-frame1145, .finallandingmob-frame1146) { opacity: 0; }
html.nbm:not(.nbm-hero) :is(.finallandingmob-iphonescreen, .finallandingmob-frame1039, .desktop-line122,
  .finallandingmob-frame1041, .finallandingmob-frame1028, .finallandingmob-frame1023, .desktop-line123) { opacity: 0; }

/* Перехід вмикається лише разом із .nbm-in. Якби він висів на самому
   [data-nbm], браузер не ставив би блок у стартову позицію миттєво, а повз би
   туди — і якщо «показати» приходило за мить (hero), блок повертався, так і
   не відійшовши: лишалось тільки проявлення. Стартовий стан — без переходу. */
html.nbm [data-nbm].nbm-in {
  transition:
    opacity 1s cubic-bezier(.2, .75, .2, 1),
    translate 1.2s cubic-bezier(.16, .84, .24, 1),
    scale 1.1s cubic-bezier(.3, 1.5, .5, 1),
    filter 1.2s ease;
  transition-delay: var(--nbm-d, 0s);
}
html.nbm [data-nbm]:not(.nbm-in) { opacity: 0; }
html.nbm [data-nbm="rise"]:not(.nbm-in) { translate: 0 72px; }
html.nbm [data-nbm="left"]:not(.nbm-in) { translate: -150px 0; }
html.nbm [data-nbm="right"]:not(.nbm-in) { translate: 150px 0; }
html.nbm [data-nbm="drop"]:not(.nbm-in) { translate: 0 -120px; }
html.nbm [data-nbm="pop"]:not(.nbm-in) { scale: .45; }
html.nbm [data-nbm="blur"]:not(.nbm-in) { filter: blur(18px); scale: 1.08; }
html.nbm [data-nbm="grow"] { transform-origin: left center; }
/* смужка прогресу не пружинить: перелітати свою довжину їй не можна */
html.nbm [data-nbm="grow"].nbm-in {
  transition-duration: 1s, 1.2s, 1.4s, 1.2s;
  transition-timing-function: ease, ease, cubic-bezier(.2, .8, .2, 1), ease;
}
html.nbm [data-nbm="grow"]:not(.nbm-in) { opacity: 1; scale: 0 1; }

/* Після появи — «живий» рух, як у деці. */
@keyframes nbm-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
@keyframes nbm-bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -10px; rotate: 3deg; }
}
@keyframes nbm-sway {
  0%, 100% { rotate: -6deg; }
  50% { rotate: 6deg; }
}
.nbm-float { animation: nbm-float 5s ease-in-out infinite; }
.nbm-float.nbm-slow { animation-duration: 8s; }
.nbm-bob { animation: nbm-bob 4.5s ease-in-out infinite; }
.nbm-sway { animation: nbm-sway 4.5s ease-in-out infinite; transform-origin: 50% 0; }

/* Зменшений рух: появу видно, але зсуви коротші, без розмиття і без
   безкінечного плавання — найважчого для тих, кого заколисує. */
@media (prefers-reduced-motion: reduce) {
  html.nbm [data-nbm="rise"]:not(.nbm-in) { translate: 0 28px; }
  html.nbm [data-nbm="left"]:not(.nbm-in) { translate: -56px 0; }
  html.nbm [data-nbm="right"]:not(.nbm-in) { translate: 56px 0; }
  html.nbm [data-nbm="drop"]:not(.nbm-in) { translate: 0 -44px; }
  html.nbm [data-nbm="pop"]:not(.nbm-in) { scale: .8; }
  html.nbm [data-nbm="blur"]:not(.nbm-in) { filter: none; scale: .94; }
  .nbm-float, .nbm-bob, .nbm-sway { animation: none; }
}

@media print {
  html.nbm [data-nbm] { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
}