/* ── 3D Cards — Hover Tilt + Glare ──────────────────────────────────
   Soporta: .wc-block-grid__product, li.product, .type-product
   Performance: transform + opacity únicamente (GPU-composited).
   ─────────────────────────────────────────────────────────────────── */

/* Perspective container en el grid de productos */
.wc-block-grid__products,
.products,
ul.products,
.product-grid,
.wc-block-product-template {
  perspective: 1200px;
  perspective-origin: 50% -10%;
}

/* Cada tarjeta */
.mcc3-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    transform 80ms linear,
    box-shadow 200ms ease,
    outline 150ms ease;
  border-radius: var(--mcc3-radius, 14px);
  overflow: visible; /* needed for glare child to extend */
  cursor: pointer;
}

/* Estado reset (mouse leave) */
.mcc3-card.mcc3-card--reset {
  transition:
    transform 600ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 400ms ease,
    outline 200ms ease !important;
}

/* Glare overlay */
.mcc3-card__glare {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 10;
  overflow: hidden;
  border-radius: var(--mcc3-radius, 14px);
}

.mcc3-card__glare::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: radial-gradient(
    ellipse 80% 60% at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, var(--mcc3-glare-op, 0.3)) 0%,
    rgba(255, 255, 255, 0) 65%
  );
  transition: opacity 200ms ease;
  opacity: 0;
  border-radius: inherit;
}

.mcc3-card:hover .mcc3-card__glare::before {
  opacity: 1;
}

/* Glow ring en hover */
.mcc3-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--mcc3-radius, 14px) + 1px);
  background: transparent;
  transition:
    box-shadow 300ms ease,
    opacity 300ms ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.mcc3-card:hover::after {
  opacity: 1;
  box-shadow:
    0 0 0 1.5px var(--mcc3-glow, rgba(129, 140, 248, 0.6)),
    0 20px 60px -8px var(--mcc3-shadow, rgba(0, 0, 0, 0.25));
}

/* Image zoom inside card */
.mcc3-card .attachment-woocommerce_thumbnail,
.mcc3-card img.woocommerce-placeholder,
.mcc3-card .wc-block-components-product-image img {
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1) !important;
  transform-origin: center center;
}

.mcc3-card:hover .attachment-woocommerce_thumbnail,
.mcc3-card:hover .wc-block-components-product-image img {
  transform: scale(1.06) !important;
}

/* Badge pulse (on sale) */
.mcc3-card .onsale {
  animation: mcc3-badge 2.8s ease-in-out infinite;
}

@keyframes mcc3-badge {
  0%, 100% { box-shadow: 0 4px 16px rgba(129, 140, 248, 0.5); }
  50%       { box-shadow: 0 4px 28px rgba(129, 140, 248, 0.85), 0 0 0 4px rgba(129, 140, 248, 0.15); }
}

/* Catalog 3D video preview */
.mcc3-card__video-preview {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.mcc3-card__video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mcc3-card:hover .mcc3-card__video-preview {
  opacity: 1;
}

/* Mobile: no tilt, but keep image zoom */
@media (pointer: coarse) {
  .mcc3-card {
    transform: none !important;
    transition: box-shadow 300ms ease;
  }
  .mcc3-card__glare { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .mcc3-card, .mcc3-card * { transition: none !important; animation: none !important; }
}