/* ============================================================
   ZOOM — кибер-увеличение фото товара при наведении (только product_detail).
   Само изображение НЕ искажаем (только масштаб, без фильтров/глича).
   Поверх — скруглённая неон-рамка, HUD-прицел у курсора, скан-луч и
   «терминальная» плашка: логотип-точка + «NULLPOINT» печатной машинкой.
   Курсор задаёт точку увеличения (transform-origin) и --mx/--my (JS).
   ============================================================ */

.product-img--zoom {
  cursor: none;
}

/* зум: только scale — фото остаётся чётким */
.product-img--zoom [data-zoom-img] {
  transform: scale(1);
  transition: transform .18s ease-out;
  will-change: transform;
}

.product-img--zoom.is-zooming [data-zoom-img] {
  transform: scale(2.1);
}

/* оверлей: подсветка курсора + лёгкая виньетка + СКРУГЛЁННАЯ неон-рамка
   (border-radius наследуется от карточки — углы не квадратные) */
.zoom-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transition: opacity .25s ease;
  background:
    radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
      var(--cyan-a12), transparent 70%),
    radial-gradient(120% 120% at 50% 50%,
      transparent 58%, var(--bg-a20) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--cyan-a45),
    inset 0 0 34px var(--cyan-a12);
}

.product-img--zoom.is-zooming .zoom-fx {
  opacity: 1;
}

/* HUD-прицел, следует за курсором */
.zoom-reticle {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 1px solid var(--cyan-a80);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan-a50), inset 0 0 8px var(--cyan-a25);
  animation: zoom-reticle 1.6s ease-in-out infinite;
}

.zoom-reticle::before,
.zoom-reticle::after {
  /* перекрестие внутри прицела */
  content: "";
  position: absolute;
  background: var(--cyan-a70);
}

.zoom-reticle::before {
  left: 50%;
  top: 9px;
  bottom: 9px;
  width: 1px;
  transform: translateX(-50%);
}

.zoom-reticle::after {
  top: 50%;
  left: 9px;
  right: 9px;
  height: 1px;
  transform: translateY(-50%);
}

@keyframes zoom-reticle {

  0%,
  100% {
    transform: scale(1);
    opacity: .85;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* скан-луч: мягко проходит сверху вниз */
.zoom-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--cyan-a14));
  border-bottom: 1px solid var(--cyan-a75);
  box-shadow: 0 0 16px var(--cyan-a55);
  animation: zoom-beam 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes zoom-beam {
  0% {
    top: -70px;
    opacity: 0;
  }

  12% {
    opacity: .95;
  }

  88% {
    opacity: .95;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* «терминальная» плашка с логотипом и набором */
.zoom-badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  /* скруглённая, в стиле твоих рамок */
  background: var(--bg-a62);
  border: 1px solid var(--cyan-a28);
  box-shadow: 0 0 18px var(--cyan-a18);
  backdrop-filter: blur(4px);
}

/* логотип-точка как в шапке */
.zoom-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--cyan, var(--cyan));
  box-shadow: 0 0 10px var(--cyan, var(--cyan)), 0 0 22px var(--cyan, var(--cyan));
  animation: zoom-dot 1.4s ease-in-out infinite;
}

@keyframes zoom-dot {

  0%,
  100% {
    box-shadow: 0 0 8px var(--cyan, var(--cyan)), 0 0 18px var(--cyan, var(--cyan));
    opacity: .9;
  }

  50% {
    box-shadow: 0 0 14px var(--cyan, var(--cyan)), 0 0 32px var(--cyan, var(--cyan));
    opacity: 1;
  }
}

/* подпись плашки: фирменный Syncopate, неоновый градиент + мягкое свечение */
.zoom-type {
  font-family: var(--font-display), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--text-hi), var(--cyan) 55%, var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px var(--cyan-a50));
  opacity: 0;
}

/* плавное «проявление»: всплывает снизу и стягивает межбуквенный интервал */
.product-img--zoom.is-zooming .zoom-type {
  animation: zoom-type-in .55s cubic-bezier(.2, .7, .2, 1) .1s forwards;
}

@keyframes zoom-type-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    letter-spacing: .42em;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: .16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-img--zoom.is-zooming [data-zoom-img] {
    transition: none;
  }

  .zoom-reticle,
  .zoom-beam,
  .zoom-dot {
    animation: none;
  }

  .product-img--zoom.is-zooming .zoom-type {
    animation: none;
    opacity: 1;
  }
}

/* тач/без hover — зум выключаем (логику страхует и JS) */
@media (hover: none),
(pointer: coarse) {
  .product-img--zoom {
    cursor: default;
  }
}