/* Слой анимаций главной (предпросмотр /dev/home-motion/).
   Подключается после home_base.css и home_theme.css. Вид в покое не меняет:
   только движение, отклик на нажатие и стоимость отрисовки. */

:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

/* 1. Карточки: анимируем только то, что реально меняется (без transition: all). */
.card,
.one-row-card {
  transition-property: transform, box-shadow, border-color, background-color;
  transition-timing-function: var(--motion-ease-out);
}

/* 2. Отклик на нажатие на телефоне: карточка чуть «проседает» под пальцем.
   Не срабатывает, когда палец на кнопке внутри карточки или на ленте состава комбо. */
@media (hover: none), (pointer: coarse) {
  .card:active:not(:has(button:active, .btn:active, .set-component-frame:active)),
  .one-row-card:active:not(:has(button:active, .btn:active, .set-component-frame:active)) {
    transform: scale(0.985);
    transition-duration: 90ms;
  }
  .category-btn:active,
  .sticky-menu .category-btn:active,
  .supercategory-btn:active,
  .volume-chip-btn:active,
  .product-copy-tab:active {
    transform: scale(0.95);
    transition: transform 80ms ease-out;
  }
}

/* 3. Тап по товару принят, а данные ещё летят: карточка утоплена и по ней бежит блик.
   Блик появляется только если ожидание дольше 120 мс — мгновенные открытия без мигания. */
.is-product-opening {
  position: relative;
  transform: scale(0.985) !important;
  transition: transform 120ms ease-out !important;
}
.is-product-opening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: motionShimmer 1s linear 120ms infinite;
}
@keyframes motionShimmer {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -20% 0; }
}

/* 4. Затемнение под шторками нарастает и гаснет вместе со шторкой (motion.js
   анимирует его в такт её движению). Bootstrap ждёт конца transition затемнения
   и только потом запускает шторку (в проде это +0,15 с к каждому открытию) —
   без transition он запускает её сразу. */
.modal-backdrop.fade {
  transition: none;
}

/* 4a. Шторки (товар, корзина): выезд заметный и плавный — замедляется к концу,
   уход начинается мягко и разгоняется вниз. Длительность у .modal нужна Bootstrap,
   чтобы он дождался конца движения шторки. */
.modal.sheet-modal.fade {
  transition: opacity 0.32s linear;
}
.modal.sheet-modal.fade.show {
  transition: opacity 0.5s linear;
}
.modal.sheet-modal.fade .modal-dialog {
  transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}
.modal.sheet-modal.fade.show .modal-dialog {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Окно товара. Общий скрипт корзины (includes/cart_client_script.html) ускоряет его
   до 0,16 с и при «В корзину» закрывает без анимации — поэтому окно «моментально»
   появлялось и пропадало. Здесь: выезд 0,5 с с равномерным замедлением (видно, как
   окно выкатывается), уход 0,32 с с разгоном; при добавлении фото улетает в корзину,
   пока шторка уезжает (motion.js). */
body #productModal.sheet-modal.fade,
body #productModal.sheet-modal.fade.cart-submitting {
  transition: opacity 0.32s linear !important;
}
body #productModal.sheet-modal.fade.show {
  transition: opacity 0.5s linear !important;
}
body #productModal.sheet-modal.fade .modal-dialog,
body #productModal.sheet-modal.fade.cart-submitting .modal-dialog {
  transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1) !important;
}
body #productModal.sheet-modal.fade.show .modal-dialog {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
/* Пока окно товара заполняется (1–2 кадра), шторка ждёт за экраном,
   чтобы выезд был виден целиком, а не начинался с середины. */
.modal.sheet-modal.motion-sheet-hold .modal-dialog,
body #productModal.sheet-modal.fade.motion-sheet-hold.motion-sheet-hold .modal-dialog {
  transform: translate3d(0, 100vh, 0) !important;
  transition: none !important;
}

/* 4b. Панель категорий остаётся на месте при открытом окне. Если она прилипла
   к верху экрана, выезжающая шторка выталкивает её вверх, а уходящая — отпускает
   обратно (motion.js, по кадрам). overflow: visible — иначе при открытом окне body
   становится отдельной прокруткой и «липкая» панель мгновенно улетает за экран
   (баг в проде). */
body.modal-open {
  overflow: visible !important;
}

/* 5. Фото товаров, догружающиеся при прокрутке, проявляются, а не «выпрыгивают». */
img.motion-img-pending {
  opacity: 0;
}
img.motion-img-loaded {
  opacity: 1;
  transition: opacity 0.32s ease;
}

/* 6. Счётчик корзины в шапке больше не пульсирует бесконечно — он «подпрыгивает»
   один раз, когда товар добавлен (motion.js). */
#cartCount {
  animation: none;
}

/* 7. Летящее в корзину фото (motion.js). */
.motion-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  pointer-events: none;
  will-change: transform;
}
.motion-fly__img {
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(35, 31, 32, 0.28);
  will-change: transform, opacity;
}

/* 8. Размытие под точками карусели акций не видно глазу (точки 8 px), а стоит
   отдельного слоя отрисовки на каждую точку. */
.promotions-pagination .dot {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 9. Тем, кто включил в системе «уменьшить движение», — без анимаций. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}