/* Анимации лендинга.

   Правило простое: движение помогает читать страницу, а не развлекает. Блоки
   мягко всплывают при появлении в кадре, интерактивное реагирует на курсор,
   всё остальное стоит на месте. Всё движение отключается системной настройкой
   «меньше движения» — блок в самом низу файла. */

/* ---------- Появление при прокрутке ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Слой запрашиваем только пока элемент не показан, и снимаем сразу после —
   иначе браузер держит полсотни слоёв всё время жизни страницы. */
.reveal:not(.is-in) { will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Элементы сетки появляются друг за другом: задержку ставит скрипт,
   но лесенка ограничена — иначе последняя карточка ждала бы слишком долго */
.reveal[style*="--d"] { transition-delay: var(--d); }

/* ---------- Первый экран ---------- */

/* Герой не ждёт прокрутки — он уже в кадре */
.hero h1, .hero__lead, .hero__list, .hero__art,
.page-hero .ttl, .page-hero__lead, .page-hero__sub, .switch, .checks, .contacts {
  animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero__lead, .page-hero__lead { animation-delay: 0.08s; }
.hero__list, .page-hero__sub { animation-delay: 0.14s; }
.hero__art, .switch, .checks, .contacts { animation-delay: 0.2s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Покачивание иллюстрации героя убрано намеренно. Движение в 10 px за 3.5 с —
   это доли пикселя за кадр: на слабой графике браузер округляет позицию, и
   вместо плавного хода видны ступеньки. Страницу и так оживляет появление
   блоков при прокрутке. */

/* ---------- Шапка ---------- */

.header { transition: box-shadow 0.25s, background 0.25s; }
.header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.logo img { transition: transform 0.25s; }
.logo:hover img { transform: scale(1.06); }

/* ---------- Карточки и кнопки ---------- */

.duo__card, .why__card, .srv, .net, .cmd, .plan, .news__card, .acc {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.duo__card:hover, .why__card:hover, .net:hover, .cmd:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 140, 255, 0.4);
}
.srv:hover { transform: translateY(-2px); border-color: rgba(111, 140, 255, 0.45); }
.news__card:hover { transform: translateY(-3px); }

.btn, .plan__price, .pager__btn, .tab, .switch__btn, .footer__tg a {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.footer__tg a:hover { transform: translateY(-1px); }
.perk { transition: transform 0.2s ease, border-color 0.2s ease; }
.perk:hover { transform: translateX(3px); border-color: rgba(111, 140, 255, 0.35); }
.check { transition: transform 0.2s ease; }
.check:hover { transform: translateX(3px); }

/* Логотипы предустановленного ПО оживают при наведении на строку */
.soft__item img { transition: transform 0.25s ease; }
.soft__item:hover img { transform: scale(1.12) rotate(-4deg); }

/* Раскрытие аккордеона: содержимое проявляется, а не появляется рывком */
.acc[open] .acc__body { animation: rise 0.35s ease both; }

/* Шаги: цифра слегка выезжает вместе со строкой */
.steps__list li .steps__num { transition: transform 0.25s ease; }
.steps__list li:hover .steps__num { transform: translateX(3px) scale(1.05); }

/* Плавный переход к якорям («Серверы» → тарифы) */
html { scroll-behavior: smooth; }

/* ---------- Уважение к системной настройке ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero__lead, .hero__list, .hero__art,
  .page-hero .ttl, .page-hero__lead, .page-hero__sub, .switch, .checks, .contacts,
  .hero__art .art, .acc[open] .acc__body { animation: none; }
  * { transition: none !important; }
}