/* ============================================================
   ENIGME CROSSFADE PREMIUM — efecto único global de cambio de imagen
   Crossfade editorial con micro-zoom sutil (scale 1.015 → 1).
   Idéntico en joyería, plata, liquidación, sets, íntima, bolsos,
   enigme-home, producto.html, catalogo.html y cualquier galería
   que use .carousel-track + .product-media.

   Reglas:
   - opacity: 0 → 1 en 2.4s cubic-bezier(0.4, 0, 0.2, 1)
   - transform: scale(1.015) → scale(1) en 2.8s cubic-bezier
   - imágenes stacked-absolute (no slide lateral)
   - respeta prefers-reduced-motion
   ============================================================ */

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.product-media {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  display: block;
  padding: 0;
  opacity: 0 !important;
  transform: scale(1.015) !important;
  z-index: 1;
  transition:
    opacity   2.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 2.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.product-media.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2;
}

/* Primera imagen en el paint inicial → aparece instantánea, sin fade-in.
   El crossfade luxury solo se activa al interactuar (swipe/click).
   enigme-crossfade.js añade y quita .initial-paint en los primeros frames. */
.product-media.is-active.initial-paint {
  transition: none !important;
}

/* Evitar que hover haga zoom que pise la transición */
.product-media:hover,
.carousel-wrapper img:hover {
  transform: scale(1) !important;
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .product-media {
    transition: opacity 0.2s linear !important;
    transform: none !important;
  }
  .product-media.is-active {
    transform: none !important;
  }
}

/* ============================================================
   HERO IMAGE PRINCIPAL (producto.html)
   Mismo efecto para el hero del producto individual.
   ============================================================ */
.hero-image-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Imagen completa, sin recortar */
  display: block;
  opacity: 0;
  transform: scale(1.015);
  z-index: 1;
  transition:
    opacity   2.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 2.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.hero-image.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .hero-image {
    transition: opacity 0.2s linear;
    transform: none;
  }
  .hero-image.is-active { transform: none; }
}