/* ==========================================================================
   MOTION – общий слой «оживления» сайта (2026-08-21)

   Заказчик: «сделай весь сайт таким же живым, как IB DP». Вместо правок в
   четырнадцати шаблонах – один слой поверх всего: assets/js/motion.js сам
   находит заголовки, карточки, сетки, цифры и декоративные иконки и вешает
   классы отсюда. Страница IB DP (.ibdp-page) живёт своим скриптом и здесь
   пропускается.

   Принципы:
   • движение – через свойство translate, а не transform: у части элементов
     (наклонные пилюли AP, стикеры «Летних») transform/rotate – часть макета,
     его нельзя перебивать; элементы с собственным translate скрипт не трогает;
   • после появления класс .m-reveal снимается – чтобы наш transition не
     подменял родные переходы элемента (фон кнопок и т.п.);
   • prefers-reduced-motion – всё отключено, контент виден сразу.
   Откат: убрать две строки в inc/enqueue.php.
   ========================================================================== */

:root {
  --m-ease: cubic-bezier(.22, .8, .3, 1);
  --m-shadow: 0 16px 34px rgba(37, 151, 255, .14), 0 4px 10px rgba(16, 24, 40, .06);
}

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

.m-reveal {
  opacity: 0;
  transition: opacity .6s var(--m-ease), translate .6s var(--m-ease);
}

.m-reveal--move { translate: 0 22px; }

/* Целевые opacity/translate приходят inline из motion.js (собственная
   прозрачность элемента), класс .in – только маркер. */

/* --- Подъём карточек на наведении ----------------------------------------- */

.m-lift {
  transition: translate .35s var(--m-ease), box-shadow .35s var(--m-ease),
              background .3s var(--m-ease), color .3s var(--m-ease),
              border-color .3s var(--m-ease), opacity .3s var(--m-ease);
}

@media (hover: hover) and (pointer: fine) {
  .m-lift:hover {
    translate: 0 -4px;
    box-shadow: var(--m-shadow);
  }
}

/* --- Кнопки: лёгкий подъём и сдвиг стрелки --------------------------------- */

.btn,
.front-btn {
  transition: background var(--dur-base, .25s) var(--m-ease),
              color var(--dur-base, .25s) var(--m-ease),
              border-color var(--dur-base, .25s) var(--m-ease),
              translate .3s var(--m-ease),
              box-shadow .3s var(--m-ease);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .front-btn:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 22px rgba(16, 24, 40, .12);
  }
}

/* --- Пульсирующие точки у лейблов секций ----------------------------------- */

[class*="__dot"] {
  animation: m-dot 2.4s ease-in-out infinite;
}

@keyframes m-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 151, 255, .35); }
  50% { box-shadow: 0 0 0 7px rgba(37, 151, 255, 0); }
}

/* Страницы без точки в лейбле – дорисовываем её, как в блоке баллов IB. */
.tch-eyebrow,
.tch-kicker,
.pap-eyebrow,
.pap-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tch-eyebrow::before,
.tch-kicker::before,
.pap-eyebrow::before,
.pap-kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
  animation: m-dot 2.4s ease-in-out infinite;
}

/* --- Цветной акцент последнего слова в заголовках секций ------------------- */

.m-accent { color: var(--color-brand); }

/* --- Плавающие декоративные иконки ----------------------------------------- */

.m-float { animation: m-float 5s ease-in-out infinite; }

@keyframes m-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* --- Счётчик чисел: «прыжок» по завершении --------------------------------- */

.m-num-pop { animation: m-num-pop .45s var(--m-ease); }

@keyframes m-num-pop {
  0% { scale: 1; }
  45% { scale: 1.14; }
  100% { scale: 1; }
}

/* --- Иконки в карточках: лёгкий отклик на наведение карточки --------------- */

@media (hover: hover) and (pointer: fine) {
  .m-lift:hover [class*="__icon"],
  .m-lift:hover [class*="iconbox"],
  .m-lift:hover [class*="__num"] {
    scale: 1.08;
  }

  .m-lift [class*="__icon"],
  .m-lift [class*="iconbox"],
  .m-lift [class*="__num"] {
    transition: scale .35s var(--m-ease);
  }
}

/* --- Доступность ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1; translate: none; transition: none; }
  .m-lift, .btn, .front-btn { transition: none; }
  .m-lift:hover, .btn:hover, .front-btn:hover { translate: none; box-shadow: none; }
  [class*="__dot"], .m-float, .m-num-pop,
  .tch-eyebrow::before, .tch-kicker::before, .pap-eyebrow::before, .pap-kicker::before { animation: none; }
}