/* Homepage image effects — category cards, scroll reveal */

/* Banner: unified aspect ratio + cover — no stretch, stable height between slides */
.met-banner .carousel-inner {
  aspect-ratio: 1905 / 650;
  background: #212121;
}
.met-banner .carousel-item {
  overflow: hidden;
  height: 100%;
}
.met-banner .carousel-item > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* Category product cards — hover lift + image zoom */
.met-index-product .card,
.met-index-producto .card,
.met-index-products .card {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  will-change: transform;
}
.met-index-product .card:hover,
.met-index-producto .card:hover,
.met-index-products .card:hover {
  box-shadow: 0 14px 36px rgba(38, 50, 56, 0.14);
  transform: translateY(-5px);
}
.met-index-product .card-header.cover,
.met-index-producto .card-header.cover,
.met-index-products .card-header.cover {
  overflow: hidden;
}
.met-index-product .cover-image,
.met-index-producto .cover-image,
.met-index-products .cover-image {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.met-index-product .card:hover .cover-image,
.met-index-producto .card:hover .cover-image,
.met-index-products .card:hover .cover-image {
  transform: scale(1.07);
}

/* Scroll reveal for category tiles */
.st-img-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--st-reveal-delay, 0ms);
}
.st-img-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Lazy-load fade (MetInfo fadeIn enhancement) */
.met-index-product img.lazy,
.met-index-producto img.lazy,
.met-index-products img.lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.met-index-product img.lazy.imgloaded,
.met-index-producto img.lazy.imgloaded,
.met-index-products img.lazy.imgloaded,
.met-index-product img.lazy[data-lazyload="true"]:not(.imgloading),
.met-index-producto img.lazy[data-lazyload="true"]:not(.imgloading),
.met-index-products img.lazy[data-lazyload="true"]:not(.imgloading) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .st-img-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .met-index-product .card:hover,
  .met-index-producto .card:hover,
  .met-index-products .card:hover,
  .met-index-product .card:hover .cover-image,
  .met-index-producto .card:hover .cover-image,
  .met-index-products .card:hover .cover-image {
    transform: none;
  }
}