/* ============================================================
   mp-anim.css — анимации новой главной new-sst.ru (агент D2, 2026-09-18)
   Подключение (в index-new.html, ПОСЛЕ mainpage.css):
     <link rel="stylesheet" href="/assets/css/mp-anim.css?v=mpa1">
   Деплой: /var/www/new-sst.ru/assets/css/mp-anim.css

   Владелец файла — D2. mainpage.css (D1) НЕ переопределяется:
   • hero-каскад при загрузке — уже есть в mainpage.css (mp-rise,
     .mp-hero__copy > * / panel / stats) → здесь НЕ дублируется;
   • hover-lift .mp-card / .mp-cell и кнопки mp-btn — уже в mainpage.css;
   • поворот «+»→«×» в FAQ — уже в mainpage.css (.mp-faq__item[open]).

   Принципы файла:
   • движение — только transform/opacity; на hover дополнительно
     border-color/box-shadow (без reflow);
   • одноразовые входы, никаких циклов и миганий > 3 Гц;
   • скрытие до появления включается ТОЛЬКО классом html.mp-js — его
     ставит mp-anim.js; без JS (или до его запуска) контент полностью
     видим, «вечной пустоты» при 404 скрипта быть не может;
   • prefers-reduced-motion: всё видно сразу, анимации и hover-сдвиги
     выключены, цветовые hover остаются;
   • фокус не ломается: скрытый элемент с фокусом внутри показывается
     мгновенно (:focus-within).
   ============================================================ */

/* ---------------- 1. Токен скорости + keyframes ---------------- */
.mp {
  --mp-anim-ease: cubic-bezier(0.22, 0.62, 0.28, 1); /* мягкий easeOut */
}

@keyframes mp-anim-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mp-anim-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mp-anim-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
/* лёгкий pop для счётчиков-плиток */
@keyframes mp-anim-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* ---------------- 2. Reveal-утилиты ----------------
   mp-anim.js вешает .mp-in при входе в вьюпорт (rootMargin -10%).
   Заполнение только backwards: после проигрывания элемент возвращается
   к обычным стилям — hover-transform из mainpage.css работает дальше. */
html.mp-js .mp .mp-reveal,
html.mp-js .mp .mp-pop { opacity: 0; }

html.mp-js .mp .mp-reveal.mp-in {
  opacity: 1;
  animation: mp-anim-up 0.6s var(--mp-anim-ease) backwards;
}
html.mp-js .mp .mp-reveal.mp-reveal-left.mp-in  { animation-name: mp-anim-left;  }
html.mp-js .mp .mp-reveal.mp-reveal-right.mp-in { animation-name: mp-anim-right; }
html.mp-js .mp .mp-pop.mp-in {
  opacity: 1;
  animation: mp-anim-pop 0.5s var(--mp-anim-ease) backwards;
}

/* каскадные задержки (волна): d1..d6 = 0.07..0.42s шагом 0.07s */
html.mp-js .mp .mp-d1.mp-in { animation-delay: 0.07s; }
html.mp-js .mp .mp-d2.mp-in { animation-delay: 0.14s; }
html.mp-js .mp .mp-d3.mp-in { animation-delay: 0.21s; }
html.mp-js .mp .mp-d4.mp-in { animation-delay: 0.28s; }
html.mp-js .mp .mp-d5.mp-in { animation-delay: 0.35s; }
html.mp-js .mp .mp-d6.mp-in { animation-delay: 0.42s; }

/* доступность: фокус внутри ещё скрытого элемента — показать сразу */
html.mp-js .mp .mp-reveal:focus-within,
html.mp-js .mp .mp-pop:focus-within { opacity: 1; }

/* ---------------- 3. Карточки: border-glow для семейств,
   у которых его нет (канон .mp-card уже полный в mainpage.css) ---------------- */
/* услуги: lift/border уже в M8-стилях, добавляем синее свечение */
main.mp .mp-service-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38),
    var(--glow-cyan, 0 0 40px rgba(0, 229, 255, 0.18));
}
/* технологии-2027: свечение + cyan-бордер вместо нейтрального */
main.mp #mp-tech2027 .mp-card {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
main.mp #mp-tech2027 .mp-card:hover {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: var(--shadow-card, 0 18px 50px rgba(0, 0, 0, 0.45)),
    var(--glow-cyan, 0 0 40px rgba(0, 229, 255, 0.18));
}
/* срез доверия: плитки/кейсы/лицензии — lift + glow (не было вовсе) */
main.mp .mp-trust .mp-stat,
main.mp .mp-trust .mp-case,
main.mp .mp-trust .mp-why__card,
main.mp .mp-trust .mp-lic__card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
main.mp .mp-trust .mp-stat:hover,
main.mp .mp-trust .mp-case:hover,
main.mp .mp-trust .mp-why__card:hover,
main.mp .mp-trust .mp-lic__card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35),
    var(--glow-cyan, 0 0 40px rgba(0, 229, 255, 0.18));
}
/* чипы-ссылки «проверьте нас» — лёгкий кнопочный шифт */
main.mp .mp-trust .mp-check__links a {
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
main.mp .mp-trust .mp-check__links a:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 229, 255, 0.45);
}
/* «Разделы»: карточки-ссылки (hover-lift + ring вместо border —
   inline-стиль тега бордер перекрыть не может и не нужно) */
main.mp #sections-hubs a {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
main.mp #sections-hubs a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 229, 255, 0.3);
}

/* ---------------- 4. Таймлайн: линия «прорисовывается» по скроллу ----------------
   mp-anim.js пишет --mp-rail (0..1) на .mp-steps; здесь — акцентная нить
   поверх штатных рельс mainpage.css (геометрия зеркальная: <768 вертикаль,
   ≥768 рельса скрыта, ≥1024 горизонт). Нить перекрывается узлами шагов
   (ring 5px var(--bg-0) у .mp-step__node) — «пунктир» сохраняется. */
@media (prefers-reduced-motion: no-preference) {
  .mp .mp-steps { position: relative; }
  .mp .mp-steps::before {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 2px;
    background: var(--grad-accent, linear-gradient(90deg, #00e5ff, #8b5cff));
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
    /* мобильный вертикальный вариант (зеркало .mp-step::after) */
    left: 21px;
    top: 50px;
    bottom: 56px;
    width: 2px;
    transform: scaleY(var(--mp-rail, 0));
    transform-origin: top center;
    transition: transform 0.18s ease-out;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mp .mp-steps::before { display: none; } /* рельса выключена и в mainpage.css */
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .mp .mp-steps::before {
    display: block;
    left: 22px;
    right: 22px;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: scaleX(var(--mp-rail, 0));
    transform-origin: left center;
  }
}

/* ---------------- 5. PREFERS-REDUCED-MOTION ----------------
   Всё видно сразу (mainpage.css и так гасит animation/transition
   внутри .mp — здесь гарантия видимости и отключение hover-сдвигов). */
@media (prefers-reduced-motion: reduce) {
  html.mp-js .mp .mp-reveal,
  html.mp-js .mp .mp-pop { opacity: 1; }
  html.mp-js .mp .mp-reveal.mp-in,
  html.mp-js .mp .mp-pop.mp-in { animation: none; }
  main.mp .mp-service-card:hover,
  main.mp #mp-tech2027 .mp-card:hover,
  main.mp .mp-trust .mp-stat:hover,
  main.mp .mp-trust .mp-case:hover,
  main.mp .mp-trust .mp-why__card:hover,
  main.mp .mp-trust .mp-lic__card:hover,
  main.mp .mp-trust .mp-check__links a:hover,
  main.mp #sections-hubs a:hover { transform: none; }
}