/* =====================================================================
   Анимации сайта (подключается последним, после стилей страниц; логика — js/motion.js).
   Правила: только opacity / translate / scale (без сдвигов макета), 300–900 мс, ease-out;
   появление при прокрутке один раз; при prefers-reduced-motion всё движение выключено,
   структурные элементы (прогресс квиза, бегущая строка) остаются статичными.
   ===================================================================== */

/* ---------- Структура (не зависит от reduced-motion) ---------- */
.qprogress { height: 3px; border-radius: 2px; background: rgba(12, 14, 17, .08); overflow: hidden; }
.qprogress i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--red); }
.quiz__panel .qprogress { position: absolute; left: 44px; right: 44px; top: 106px; }
.qpanel .qprogress { position: absolute; left: 44px; right: 39px; top: 108px; }
.quiz__panel.is-done .qprogress, .qpanel.is-done .qprogress { display: none; }

.ticker { display: flex; align-items: center; height: 56px; margin: 20px 20px 0; border-radius: 20px; overflow: hidden; background: var(--dark); color: var(--white);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__half { display: flex; align-items: center; gap: 34px; padding-right: 34px; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ticker__half i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(237, 50, 55, .9); flex: none; }

.header { position: sticky; top: 0; z-index: 50; background: var(--white); }
.header.is-scrolled { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgba(12, 14, 17, .07); }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.nav a:hover::after { transform: scaleX(1); }

@media (max-width: 767px) {
  .quiz__panel .qprogress, .qpanel .qprogress { position: static; margin-top: 14px; }
  .ticker { height: 44px; margin: 12px var(--pad) 0; border-radius: 14px; }
  .ticker__half { gap: 22px; padding-right: 22px; font-size: 12px; }
}

/* ---------- Движение ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body { animation: page-in .5s ease-out both; }
  @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

  /* Появление при прокрутке (js/motion.js ставит .rv, затем .is-in и убирает классы после анимации) */
  .rv { opacity: 0; translate: 0 18px; }
  .rv.is-in { opacity: 1; translate: 0 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1); }

  /* Карточки: подъём, тень, масштаб фото, стрелка */
  .scat, .ctile, .doc, .svc, .scard, .pcard, .review, .pcardx, .ccard, .wcard, .pcard-p, .fcard, .lfile {
    transition: translate .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, background .2s;
  }
  .scat:hover, .ctile:hover, .doc:hover, .svc:hover, .scard:hover, .review:hover, .pcardx:hover, .ccard:hover, .wcard:hover, .pcard-p:hover, .fcard:hover, .lfile:hover {
    translate: 0 -4px; box-shadow: 0 16px 36px rgba(12, 14, 17, .12);
  }
  .doc__photo img { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
  .doc:hover .doc__photo img { transform: scale(1.04); }
  .dlist__grid .doc:hover .doc__photo img { transform: translateX(8%) scale(1.04); }
  .scat__more .chev, .doc__link .chev, .svc__link .chev, .scard__link .chev, .cgroup__more .chev { transition: translate .25s cubic-bezier(.22, 1, .36, 1), transform .2s; }
  .scat:hover .scat__more .chev, .doc:hover .doc__link .chev, .svc:hover .svc__link .chev, .scard:hover .scard__link .chev { translate: 4px 0; }

  /* Кнопки: светлая заливка «проезжает» слева направо */
  .btn:not([disabled]):not([aria-disabled="true"]) {
    background-image: linear-gradient(110deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
    background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
    transition: background-size .5s cubic-bezier(.22, 1, .36, 1), background-color .2s, transform .2s;
  }
  .btn:not([disabled]):not([aria-disabled="true"]):hover { background-size: 100% 100%; }
  .nav a::after { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .header { transition: box-shadow .35s, background .35s; }

  /* FAQ и «Детализация продукта»: иконка поворачивается (высота анимируется в js/motion.js) */
  .faq__item summary::after, .dstep summary::after { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .faq__item[open] summary::after, .dstep[open] summary::after { transform: rotate(180deg); }

  /* Модалка: шаги сменяются слайдом, подложка затухает */
  .modal__overlay { animation: page-in .25s ease-out both; }
  .modal__step:not([hidden]) { animation: mstep-in .38s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes mstep-in { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }

  /* Hero главной: шкала заполняется, слова заголовка всплывают, фото медленно наезжает, чипы влетают */
  .hero__gauge img { animation: gauge-fill 1.6s cubic-bezier(.22, 1, .36, 1) .25s both; }
  @keyframes gauge-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .hero__title .hw { display: inline-block; white-space: nowrap; opacity: 0; translate: 0 .35em; animation: hw-in .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.15s + var(--i, 0) * 80ms); }
  @keyframes hw-in { to { opacity: 1; translate: 0 0; } }
  .hero__text { animation: fade-up .7s cubic-bezier(.22, 1, .36, 1) .55s both; }
  .hero__btn { animation: fade-up .7s cubic-bezier(.22, 1, .36, 1) .7s both; }
  .hero__place { animation: fade-up .6s cubic-bezier(.22, 1, .36, 1) .9s both; }
  .hero__photo { animation: kb 9s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes kb { from { scale: 1.07; } to { scale: 1; } }
  .tag { animation: tag-in .8s cubic-bezier(.34, 1.56, .64, 1) both; }
  .tag--science { animation-delay: .8s; }
  .tag--complex { animation-delay: .95s; }
  .tag--personal { animation-delay: 1.1s; }
  @keyframes tag-in { from { opacity: 0; translate: 0 22px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }

  /* Бегущая строка под hero */
  .ticker__track { animation: ticker 42s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* «Ваша приборная панель»: телефон въезжает и покачивается, экран подъезжает следом */
  .dash__phone { opacity: 0; translate: 0 48px; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1); }
  .dash.is-in .dash__phone { opacity: 1; translate: 0 0; animation: bob 7s ease-in-out 1.4s infinite; }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  .dash__screen { opacity: 0; translate: 0 30px; transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .25s, translate .9s cubic-bezier(.22, 1, .36, 1) .25s; }
  .dash.is-in .dash__screen { opacity: 1; translate: 0 0; }

  /* Квиз: шаги слайдом, прогресс тянется, результат каскадом */
  .qstep.is-active { animation: qstep-in .4s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes qstep-in { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
  .qprogress i { transition: width .5s cubic-bezier(.22, 1, .36, 1); }
  .qresult__title, .qresult__text, .qresult__label, .qresult__item, .qresult__note, .qresult__again { animation: fade-up .5s cubic-bezier(.22, 1, .36, 1) both; }
  .qresult__text { animation-delay: .06s; }
  .qresult__list > :nth-child(1) { animation-delay: .12s; }
  .qresult__list > :nth-child(2) { animation-delay: .19s; }
  .qresult__list > :nth-child(3) { animation-delay: .26s; }
  .qresult__list > :nth-child(4) { animation-delay: .33s; }
  .qresult__note, .qresult__again { animation-delay: .4s; }
}