/* ============================================================
 * WOW-эффекты: современные hover/shadow/glow.
 * Отдельный файл, не трогает основной style.css.
 * Отключается полностью при prefers-reduced-motion.
 * ============================================================ */

@property --wow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* --- 1. Карточки товаров: 3D-наклон к курсору + подъём ---
 * ВАЖНО: transform-style остаётся flat (по умолчанию), НЕ preserve-3d.
 * Иконки корзины/избранного/сравнения — это <svg><use href="#sprite-id">,
 * а такие SVG-спрайты не рендерятся корректно внутри 3D-контекста
 * preserve-3d (иконки пропадали на hover, баг от 2026-11-12). При flat
 * вся карточка со всем содержимым сначала "расплющивается" в одну
 * плоскость, а потом эта плоскость целиком наклоняется — безопасно. */
.card:not([data-option='list']) .card_inner,
.card_mini .card_inner,
.card_cart .card_inner {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform;
}
.card:not([data-option='list']) .card_inner:hover,
.card_mini .card_inner:hover,
.card_cart .card_inner:hover {
  transform: perspective(900px) rotateX(var(--wow-ry, 0deg)) rotateY(var(--wow-rx, 0deg)) translateY(-6px) !important;
}

/* --- 1b. "Комплект к заказу" на странице товара: тот же подъём + тень, что у карточек --- */
.p_single_card .bg1 .block_main .col_right .block.block_set .box_cards .box:not(.card_kv_gift) {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1), background .3s;
}
.p_single_card .bg1 .block_main .col_right .block.block_set .box_cards .box:not(.card_kv_gift):hover {
  transform: translateY(-6px);
  box-shadow: 0px 4px 15px 0px #00000026;
}
body[data-theme=dark_theme] .bg1 .block_main .col_right .block.block_set .box_cards .box:not(.card_kv_gift):hover {
  transform: translateY(-6px);
  box-shadow: 0px 4px 15px 0px #FFFFFF26;
  background: inherit;
}

/* --- 2. Кнопки: мягкий подъём + цветное свечение + лёгкое притяжение к курсору --- */
.btn_main,
.header .navbar_row .btn_catalog {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s;
  will-change: transform;
}
.btn_main:hover,
.header .navbar_row .btn_catalog:hover {
  box-shadow: 0 10px 26px -6px rgba(240, 103, 69, .5);
  transform: translateY(-2px) translate(var(--wow-mx, 0px), var(--wow-my, 0px));
}

/* --- 3. Свотчи цвета: пружинный масштаб вместо линейного --- */
.search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.search_result .inner_body .col_right .box_row .box.box_model .card_swatches .swatch_color:hover {
  transform: scale(1.28) rotate(-4deg);
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, .3);
}

/* --- 4. Hero pill: вращающееся gradient-свечение по краю --- */
.i17_hero .i17_pill {
  position: relative;
  isolation: isolate;
}
.i17_hero .i17_pill::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from var(--wow-angle), #6bbbf7, #f06745, #6bbbf7);
  filter: blur(10px);
  opacity: .55;
  z-index: -1;
  animation: wow-spin 6s linear infinite;
  pointer-events: none;
}
@keyframes wow-spin {
  to { --wow-angle: 360deg; }
}

/* --- 5. Плитки категорий: прожектор, следующий за курсором --- */
.box_popular_category .box.cc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--wow-mx, 50%) var(--wow-my, 50%), rgba(255, 255, 255, .4), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.box_popular_category .box.cc:hover::after {
  opacity: 1;
}

/* --- 6. Модалки/попапы: glassmorphism --- */
.modal-content,
.popup_window .modal-content {
  background: rgba(255, 255, 255, .75) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}
[data-theme=dark_theme] .modal-content,
[data-theme=dark_theme] .popup_window .modal-content {
  background: rgba(26, 26, 26, .75) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* --- 7. Общий штрих: пружинный easing на часто используемых переходах --- */
.card_title,
.btn_secondary,
.btn_more,
.header .navbar_row .box_btns a,
.navmenu .menu ul li a,
.box_catalog_model .item_cat .item_inner {
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* --- Отключаем тяжёлые эффекты при prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .i17_hero .i17_pill::before {
    animation: none;
  }
  .card:not([data-option='list']) .card_inner,
  .card_mini .card_inner,
  .card_cart .card_inner,
  .btn_main,
  .header .navbar_row .btn_catalog {
    transition: none !important;
  }
}