/* ============================================
   Hero Image Showcase — Before/After Crossfade
   Automated cycling through all products and
   their after-versions with smooth crossfade
   transitions. Pauses on user interaction,
   resumes after 15s of inactivity.
   ============================================ */

/* Crossfade layers — sit on top of the native image */
.ba-crossfade-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out;
}

/* Ensure the image-content container is a positioning context */
.showcase-after .image-content {
  position: relative;
}

/* Label transition for smooth Before/After text swap */
.showcase-after .image-label {
  transition: opacity 0.4s ease;
  z-index: 6;
}