/* ============================================================
   КАПРИН — интерактивные эффекты наведения (fx-20261025-1)
   Источник приёмов: каталог MKEFFECTS (maxk.design).
   Правила:
   - ЦВЕТА И МАТЕРИАЛ КНОПОК НЕ МЕНЯЮТСЯ. Стекло glass.css v12
     (прозрачность, грань, блик, чёрная «В корзину») остаётся как есть.
     Здесь только движение и свет поверх существующего.
   - Всё заперто под html.fx-live: если скрипт не загрузился,
     страница выглядит ровно как раньше.
   - Только устройства с мышью и экраном шире 860 px.
   ============================================================ */

/* ---------- 1. Карточка товара: наклон + блик ---------- */
html.fx-live .prod-grid .card.fx-tilt {
  transition: transform .12s ease-out, box-shadow .18s ease;
  will-change: transform;
}
@media (hover: hover) and (min-width: 861px) {
  html.fx-live .prod-grid .card.fx-tilt:hover {
    transform: translateY(-3px)
               perspective(900px)
               rotateX(var(--fx-rx, 0deg))
               rotateY(var(--fx-ry, 0deg));
    box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
  }
}
html.fx-live .card .fx-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: radial-gradient(240px circle at var(--fx-gx, 50%) var(--fx-gy, 0%),
              rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 62%);
}
html.fx-live .card.fx-tilt:hover .fx-glare { opacity: 1; }

/* ---------- 2. Плитки категорий: бегущий свет по поверхности ---------- */
html.fx-live .cl-row.fx-glow,
html.fx-live .hub-card.fx-glow,
html.fx-live .cat-tile.fx-glow,
html.fx-live .cat-tile-modern.fx-glow { position: relative; }
html.fx-live .cl-row.fx-glow::after,
html.fx-live .hub-card.fx-glow::after,
html.fx-live .cat-tile.fx-glow::after,
html.fx-live .cat-tile-modern.fx-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
  background: radial-gradient(190px circle at var(--fx-x, 50%) var(--fx-y, 50%),
              rgba(91, 164, 224, .34), rgba(91, 164, 224, 0) 66%);
}
/* на белых строках каталога свет мягче: текст не должен терять контраст */
html.fx-live .cl-row.fx-glow::after {
  background: radial-gradient(190px circle at var(--fx-x, 50%) var(--fx-y, 50%),
              rgba(91, 164, 224, .17), rgba(91, 164, 224, 0) 66%);
  mix-blend-mode: multiply;
}
html.fx-live .cl-row.fx-glow:hover::after,
html.fx-live .hub-card.fx-glow:hover::after,
html.fx-live .cat-tile.fx-glow:hover::after,
html.fx-live .cat-tile-modern.fx-glow:hover::after { opacity: 1; }
/* у строки списка не меняем ни фон, ни рамку — только свет */
html.fx-live .cat-tile.fx-glow:hover,
html.fx-live .cat-tile-modern.fx-glow:hover {
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18), 0 0 0 1px rgba(91, 164, 224, .35);
}
html.fx-live .cat-tile.fx-glow .ct-name,
html.fx-live .cat-tile-modern.fx-glow .ct-name { z-index: 2; }

/* ---------- 3. Магнитные кнопки ----------
   Только translate. Ни фон, ни цвет, ни грань, ни блик не меняются. */
html.fx-live .btn.fx-mag {
  transition: transform .28s cubic-bezier(.16, 1, .3, 1),
              background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
html.fx-live .btn.fx-mag:active { transition-duration: .06s; }

/* ---------- 4. Подчёркивание с той стороны, откуда пришёл курсор ---------- */
html.fx-live .fx-ul {
  position: relative;
  display: inline-block;
}
html.fx-live .fx-ul::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
  transform-origin: left center;
}
html.fx-live .fx-ul.from-right::after { transform-origin: right center; }
html.fx-live .fx-ul:hover::after,
html.fx-live .fx-ul:focus-visible::after { transform: scaleX(1); }

/* ---------- 5. Лупа на фото товара ---------- */
html.fx-live .pg-img.fx-zoom { cursor: crosshair; }
html.fx-live .pg-img .fx-loupe {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity .16s ease, transform .16s ease;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22),
              0 0 0 1px rgba(15, 23, 42, .10),
              inset 0 0 0 1px rgba(255, 255, 255, .55);
  z-index: 4;
}
html.fx-live .pg-img .fx-loupe.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Доступность: если человек просил меньше движения — эффектов нет */
@media (prefers-reduced-motion: reduce) {
  html.fx-live .card.fx-tilt:hover,
  html.fx-live .btn.fx-mag { transform: none !important; }
  html.fx-live .fx-loupe { display: none !important; }
}