/* ===== Плавные и быстрые анимации (ПК + телефон) ===== */
html { scroll-behavior: smooth; }

/* Снижаем «дёрганье» на телефоне: компонуем тяжёлые элементы на GPU */
.product-card, .product-card-mob, .game-card-mob, .vertical-card,
.ph-card, .similar-product-card, .dialog-item,
.page, .blocks-overlay, .detail-page {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  /* Быстрый и мягкий отклик интерактивных элементов.
     Короткие длительности + лёгкий ease-out = «снаппи», но плавно. */
  a, button,
  .product-card, .product-card-mob, .game-card-mob, .vertical-card, .vertical-card-inner,
  .nav-item, .hdr-btn, .hdr-btn-mob, .hdr-btn-ghost, .menu-item, .dialog-item,
  .stat-card, .stat-item, .amount-preset, .currency-btn, .similar-product-card,
  .ph-card, .wizard-card, .mw-card, .pf-chip, .fm-chip, .btn-glow, .btn-primary,
  .pay-btn, .buy-button-inline, .deal-confirm-btn, .promo-link {
    transition: transform .13s cubic-bezier(.4, 0, .2, 1),
                background-color .15s ease,
                box-shadow .15s ease,
                opacity .15s ease,
                border-color .15s ease,
                color .15s ease;
  }

  /* Тактильный отклик на нажатие (особенно на телефоне) */
  button:active, a:active,
  .product-card:active, .product-card-mob:active, .game-card-mob:active,
  .vertical-card:active, .nav-item:active, .amount-preset:active, .currency-btn:active,
  .wizard-card:active, .mw-card:active, .dialog-item:active, .ph-card:active,
  .hdr-btn:active, .hdr-btn-mob:active {
    transform: scale(0.96);
  }

  /* Плавное и быстрое появление карточек и секций */
  .product-card, .product-card-mob, .game-card-mob, .vertical-card,
  .ph-card, .similar-product-card, .dialog-item {
    animation: pnxFadeUp .24s cubic-bezier(.22, 1, .36, 1) both;
  }

  /* Появление страниц/оверлеев */
  .page.active, .blocks-overlay.active, .detail-page.active {
    animation: pnxFade .18s ease both;
  }

  /* Появление модалок */
  .filter-modal-mob.active .filter-modal-card,
  .promo-modal.active .promo-modal-card,
  #aiPanel.open {
    animation: pnxPop .18s cubic-bezier(.34, 1.4, .5, 1) both;
  }
}

@keyframes pnxFadeUp {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes pnxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pnxPop {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}