/* ==========================================================================
   site-motion.css — анимации лендинга в стиле «2026».
   • Скрытые стартовые состояния только при наличии html.js -> без JS всё видно.
   • Анимируем лишь transform/opacity (blur — разово на входе, без бесконечных анимаций).
   • Геометрия меняется через индивидуальные свойства translate/scale/rotate,
     чтобы не конфликтовать с существующим transform старого скрипта (.reveal).
   ========================================================================== */

:root {
  /* spring-подобная кривая: сначала cubic-bezier (fallback), потом linear() */
  --spring: cubic-bezier(.2, .8, .2, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .35 20%, .75 45%, 1.06 65%, .985 80%, 1 100%); }
}

/* --- 11. Reveal: скрытое состояние, только под html.js --- */
html.js .m-anim:not(.m-in) { opacity: 0; }
html.js .m-anim {
  transition: opacity .55s ease, translate .65s var(--spring),
              scale .65s var(--spring), rotate .7s ease, filter .7s ease;
}

/* 1. Заголовки: blur-up + подъём, ступенчато eyebrow -> h2 -> lede */
html.js .m-anim.m-head { translate: 0 16px; filter: blur(8px); }
html.js .m-head.eyebrow { transition-delay: 0ms; }
html.js .m-head:not(.eyebrow):not(.lede) { transition-delay: 80ms; }
html.js .m-head.lede { transition-delay: 160ms; }
html.js .m-anim.m-head.m-in { translate: 0 0; filter: blur(0); }

/* 2. Карточки и сетки: ступенчатый scale-in (задержка по --i, кап задан в JS) */
html.js .m-anim.m-card {
  translate: 0 20px; scale: .94;
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .m-anim.m-card.m-in { translate: 0 0; scale: 1; }

/* 3. .pain-row: колонка «было» выезжает слева, «стало» — справа */
html.js .pain-was, html.js .pain-now { transition: opacity .55s ease, translate .6s var(--spring); }
html.js .m-card:not(.m-in) .pain-was { opacity: 0; translate: -26px 0; }
html.js .m-card:not(.m-in) .pain-now { opacity: 0; translate: 26px 0; }

/* 10. Картинки: scale-in с лёгким rotateX на входе */
html.js .m-anim.m-img { scale: .96; rotate: x 6deg; }
html.js .m-anim.m-img.m-in { scale: 1; rotate: x 0deg; }

/* scroll-driven вариант картинок, где поддерживается */
@supports (animation-timeline: view()) {
  html.js .m-anim.m-img {
    opacity: 1; scale: 1; rotate: none; filter: none; transition: none;
    animation: m-img-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  @keyframes m-img-in {
    from { opacity: 0; scale: .94; rotate: x 8deg; }
    to   { opacity: 1; scale: 1;   rotate: x 0deg; }
  }
}

/* 8. Вкладки (.tt-panel): анимация показанной панели (display -> block) */
.tt-panel { animation: m-tab-in .42s cubic-bezier(.22, .7, .2, 1) both; }
@keyframes m-tab-in {
  from { opacity: 0; translate: 0 10px; scale: .985; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

/* 9. FAQ <details>: плавное раскрытие через ::details-content */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    height: 0; opacity: 0; overflow: hidden;
    transition: height .4s ease, opacity .4s ease, content-visibility .4s;
  }
  details[open]::details-content { height: auto; opacity: 1; }
}

/* 6. Шапка: скрытие/показ + тонкий прогресс-бар прокрутки */
.site-nav { transition: translate .3s ease; }
.site-nav.nav-hidden { translate: 0 -100%; }
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #4f46e5, #ec4899);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* --- 5/7. Ховер-эффекты, 3D-наклон, магнит, параллакс — только точный указатель --- */
@media (hover: hover) and (pointer: fine) {
  /* подъём карточек с ростом тени */
  .card, .soon-card, .pkg, .step, .aud {
    transition: translate .3s ease, box-shadow .3s ease, scale .3s ease;
  }
  .card:hover, .soon-card:hover, .pkg:hover {
    translate: 0 -6px;
    box-shadow: 0 18px 42px rgba(79, 70, 229, .16);
  }

  /* 3D-наклон за курсором (max ±5deg, perspective 900px).
     transform только в этом состоянии — не мешает индивидуальным свойствам входа. */
  .m-tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .12s ease-out, box-shadow .3s ease;
    will-change: transform;
  }

  /* магнитные кнопки и масштаб ghost-кнопок */
  .btn-primary { translate: var(--mx, 0px) var(--my, 0px); transition: translate .25s ease; }
  .btn-ghost { transition: scale .25s ease, box-shadow .25s ease; }
  .btn-ghost:hover { scale: 1.03; }

  /* параллакс героя (очень сдержанный) */
  .hero-card { translate: var(--px, 0px) var(--py, 0px); transition: translate .35s ease-out; }
  .bg-wrap .bg-art { translate: var(--px, 0px) var(--py, 0px); transition: translate .35s ease-out; }
}

/* 5. По основной кнопке «пробегает» свет на ховере (разово) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  translate: -120% 0;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after { animation: m-shine .7s ease; }
}
@keyframes m-shine {
  from { translate: -120% 0; }
  to   { translate: 120% 0; }
}

/* --- prefers-reduced-motion: всё выключено, элементы полностью видимы --- */
@media (prefers-reduced-motion: reduce) {
  html.js .m-anim {
    opacity: 1 !important; translate: none !important; scale: 1 !important;
    rotate: none !important; filter: none !important;
    transition: none !important; animation: none !important;
  }
  html.js .m-card:not(.m-in) .pain-was,
  html.js .m-card:not(.m-in) .pain-now { opacity: 1 !important; translate: none !important; }
  .tt-panel { animation: none !important; }
  .site-nav, .site-nav.nav-hidden { transition: none !important; translate: none !important; }
  .scroll-progress { display: none !important; }
  .m-tilt { transform: none !important; will-change: auto !important; }
  .btn-primary, .btn-ghost { translate: none !important; scale: 1 !important; }
  .btn-primary::after { display: none !important; }
  .hero-card, .bg-wrap .bg-art { translate: none !important; }
}

/* Радужный проход по заголовкам при появлении — как в кабинете (владелец 04.10.2026).
   Реальные имена: заголовок раздела — .sec h2, «появился» — класс .m-in (ставит site-motion.js). */
html.js .sec h2 { background-image: linear-gradient(90deg, currentColor 0, currentColor 33.33%, #82BCFF 40%, #2483FF 45%, #FF66F4 50%, #FF3029 55%, #FE7B02 60%, transparent 66.67%, transparent 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.js .sec h2.m-in { animation: site-sweep 1.2s cubic-bezier(.455,.03,.515,.955) .2s 1 forwards; }
@keyframes site-sweep { 0% { filter: blur(1px); background-position: 100% 0 } 100% { filter: blur(0); background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { html.js .sec h2 { animation: none !important; background-position: 0 0; } }