/* ChatBoost — движение в стиле Apple для страниц сайта (как на страницах каналов).
   Кривая --mo-spring — аналог критически демпфированной пружины: без перелёта, мягкая посадка.
   Элементы скрываются только когда JS включён (.mo-js), иначе страница видна целиком. */
:root { --mo-spring: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Появление при скролле ---------- */
.mo-js .mo {
  transition: opacity .9s var(--mo-spring) var(--mo-d, 0s), translate 1.1s var(--mo-spring) var(--mo-d, 0s), scale 1.1s var(--mo-spring) var(--mo-d, 0s);
}
.mo-js .mo-out { opacity: 0; translate: 0 28px; }
.mo-js .mo-out.mo--x { translate: 40px 0; }          /* карточки в горизонтальных лентах выезжают вбок */
.mo-js .mo-out.mo--pop { translate: 0 36px; scale: .96; } /* крупные визуалы (макеты, телефоны) */
.mo-js .mo--pop { transform-origin: 50% 100%; }

/* ---------- Отклик на нажатие: мгновенно, на pointer-down ---------- */
.btn, .cc-cta__btn, .task, .faq__q, .faq summary, .tab, [role="tab"], .plan-tab, .switch__btn {
  -webkit-tap-highlight-color: transparent;
}
.btn, .cc-cta__btn { transition: filter .2s, background-color .2s, border-color .2s, scale .35s var(--mo-spring); }
.btn:active, .cc-cta__btn:active { scale: .97; transition-duration: .2s, .2s, .2s, .1s; }
.task { transition: background-color .25s ease, border-color .25s ease, scale .35s var(--mo-spring); }
.task:active { scale: .98; transition-duration: .25s, .25s, .1s; }
.faq__q:active, .faq summary:active { opacity: .7; }

/* ---------- Наведение: карточка чуть приподнимается, без задержки ---------- */
@media (hover: hover) and (min-width: 769px) {
  .mo-lift { transition: translate .5s var(--mo-spring), border-color .3s ease, background-color .3s ease; }
  .mo-lift:not(.mo-out):hover { translate: 0 -6px; }
}

/* ---------- Уменьшенное движение: только мягкое проявление ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-js .mo, .mo-js .mo-out { translate: none !important; scale: none !important; transition: opacity .3s ease !important; }
  .btn:active, .cc-cta__btn:active, .task:active { scale: none; }
  .mo-lift:hover { translate: none !important; }
}

/* ---------- Hero: появление при загрузке ----------
   Чистый CSS — стартует с первого кадра, без мигания до загрузки скриптов.
   Порядок: заголовок → подзаголовок → кнопки → чипсы; иконки приложений «распускаются» вокруг. */
@keyframes mo-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes mo-pop  { from { opacity: 0; scale: .6; } }
@keyframes mo-fade { from { opacity: 0; } }
.hero__title, .hero__lead, .hero__ctas, .chips > .chip,
.p-crumbs, .p-hero__title, .p-chip, .p-hero__note, .p-hero__cta,
.status__inner > * { animation: mo-rise 1s var(--mo-spring) both; }
.hero__title, .p-crumbs { animation-delay: .05s; }
.hero__lead, .p-hero__title { animation-delay: .14s; }
.hero__ctas { animation-delay: .23s; }
.p-hero__note { animation-delay: .6s; }
.p-hero__cta { animation-delay: .7s; }
.chips > .chip:nth-child(1), .p-chip:nth-child(1) { animation-delay: .32s; }
.chips > .chip:nth-child(2), .p-chip:nth-child(2) { animation-delay: .36s; }
.chips > .chip:nth-child(3), .p-chip:nth-child(3) { animation-delay: .40s; }
.chips > .chip:nth-child(4), .p-chip:nth-child(4) { animation-delay: .44s; }
.chips > .chip:nth-child(5), .p-chip:nth-child(5) { animation-delay: .48s; }
.chips > .chip:nth-child(6), .p-chip:nth-child(6) { animation-delay: .52s; }
.chips > .chip:nth-child(n+7), .p-chip:nth-child(n+7) { animation-delay: .56s; }
.status__inner > :nth-child(1) { animation-delay: .05s; }
.status__inner > :nth-child(2) { animation-delay: .14s; }
.status__inner > :nth-child(3) { animation-delay: .23s; }
.status__inner > :nth-child(4) { animation-delay: .32s; }
.status__inner > :nth-child(n+5) { animation-delay: .41s; }
.hero__cloud .app-ico { animation: mo-pop 1.1s var(--mo-spring) both; }
.hero__cloud .app-ico:nth-child(odd)  { animation-delay: .25s; }
.hero__cloud .app-ico:nth-child(even) { animation-delay: .38s; }
.hero__cloud .app-ico:nth-child(3n)   { animation-delay: .5s; }
.hero__decor { animation: mo-fade 1.6s ease-out .1s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__lead, .hero__ctas, .chips > .chip, .p-crumbs, .p-hero__title, .p-chip, .p-hero__note, .p-hero__cta,
  .status__inner > *, .hero__cloud .app-ico, .hero__decor { animation: mo-fade .4s ease both; }
}