/* motion.css — слой motion design, подключён на всём сайте (класс "motion"
   на <html> ставит инлайн-скрипт в header.php; для PageSpeed/Lighthouse слой
   выключен — боты не должны видеть скрытый до reveal-а контент). Без класса
   все правила инертны.

   Принципы:
   - только transform/opacity (без reflow-свойств);
   - каскадные задержки ≤440ms;
   - LCP-элемент (hero-баннер) не прячется — только лёгкий scale-settle;
   - prefers-reduced-motion: reduce отключает всё;
   - если motion.js не загрузился, скрытый контент проявляется сам (fallback).

   Список reveal-селекторов синхронизирован с REVEAL_SELECTOR в motion.js. */

html.motion {
  --motion-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Scroll-reveal ───────────────────────────────────────────────────── */

html.motion :is(.section-header, .sale-banner, .sub-banner,
                .product-card, .brand-card, .adv-card, .article-card) {
  opacity: 0;
  transform: translateY(26px);
}

html.motion :is(.section-header, .sale-banner, .sub-banner,
                .product-card, .brand-card, .adv-card, .article-card).is-visible {
  opacity: 1;
  transform: none;
}

/* Переходы вешаем только когда отработал JS (класс .motion-item ставит
   motion.js): скрытие до его запуска происходит мгновенно, до первой отрисовки. */
html.motion .motion-item {
  transition:
    opacity .6s ease var(--motion-delay, 0ms),
    transform .6s var(--motion-ease) var(--motion-delay, 0ms),
    border-color .24s ease,
    box-shadow .3s ease,
    color .24s ease,
    background-color .24s ease;
}

/* Страховка: motion.js не загрузился (ошибка сети/JS) — контент проявится сам. */
html.motion:not(.motion-live) :is(.section-header, .sale-banner, .sub-banner,
                                  .product-card, .brand-card, .adv-card, .article-card) {
  animation: motion-reveal-fallback .6s ease 5s forwards;
}

@keyframes motion-reveal-fallback {
  to { opacity: 1; transform: none; }
}

/* ── Hero: лёгкое «успокоение» без скрытия (LCP-элемент виден сразу) ─── */

html.motion .school-sale-banner {
  /* без fill-mode: после анимации transform отпускает элемент,
     чтобы работал исходный hover-подъём баннера */
  animation: motion-hero-settle 1s var(--motion-ease);
}

@keyframes motion-hero-settle {
  from { transform: scale(.985); }
  to   { transform: scale(1); }
}

/* ── Хедер: sticky, прячется при скролле вниз, возвращается вверх ────── */

html.motion .site-header {
  position: sticky;
  top: 0;
  transition: transform .35s var(--motion-ease);
}

html.motion .site-header.is-hidden {
  transform: translateY(-102%);
}

/* Панель итогов корзины/чекаута рассчитана на уезжающий хедер (top: 20–24px).
   Под motion-хедером (~201px на десктопе, sticky) при его возврате панель
   уходит под него — опускаем на высоту хедера. На ≤991px панель static
   (top игнорируется) либо хедер ниже (~154px). */
html.motion .total-item {
  top: 210px;
}

@media (max-width: 991px) {
  html.motion .total-item {
    top: 165px;
  }
}

/* Печать: непрокрученные до reveal элементы не должны уходить на печать
   прозрачными. */
@media print {
  html.motion :is(.section-header, .sale-banner, .sub-banner,
                  .product-card, .brand-card, .adv-card, .article-card) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Микро-полировка ─────────────────────────────────────────────────── */

@media (hover: hover) {
  /* Зум фото карточки при наведении; сохраняем прежние transition
     изображения (fade при подмене src, blur в is-loading). */
  html.motion .product-card .product-card__media img {
    transition: transform .55s var(--motion-ease), opacity .18s ease, filter .18s ease;
  }

  html.motion .product-card:hover .product-card__media img {
    transform: scale(1.045);
  }

  /* Тактильный отклик: нажатие «вдавливает» кнопку */
  html.motion .product-card__favorite:active {
    transform: scale(.9);
  }

  html.motion .btn-primary:active {
    transform: translateY(1px) scale(.98);
  }
}

/* «Пружинка» избранного при добавлении (класс is-active ставит favorites.js) */
html.motion .product-card__favorite.is-active {
  animation: motion-fav-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes motion-fav-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ── Отключение для чувствительных к анимациям ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.motion :is(.section-header, .sale-banner, .sub-banner,
                  .product-card, .brand-card, .adv-card, .article-card),
  html.motion .school-sale-banner,
  html.motion .site-header,
  html.motion .site-header.is-hidden,
  html.motion .product-card .product-card__media img,
  html.motion .product-card__favorite,
  html.motion .btn-primary {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}