/* =========================
   HOME SKELETON / REVEAL
========================= */

.mfh-reveal-card{
  position:relative;
}

.mfh-skeleton-block{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    rgba(226,232,240,.85) 0%,
    rgba(241,245,249,.98) 50%,
    rgba(226,232,240,.85) 100%
  );
  background-size:200% 100%;
  animation:mfhSkeletonShimmer 1.2s linear infinite;
  pointer-events:none;
  z-index:0;
}

.mfh-skeleton-banner{
  border-radius:18px;
}

.mfh-skeleton-inline-banner{
  border-radius:20px;
}

.mfh-skeleton-square{
  border-radius:inherit;
}

.mfh-reveal-media{
  position:relative;
  z-index:1;
  opacity:0;
  transition:opacity .28s ease;
}

.mfh-reveal-card.is-loaded .mfh-reveal-media{
  opacity:1;
}

.mfh-reveal-card.is-loaded .mfh-skeleton-block{
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}

/* fallback/no-image cards should not keep skeleton forever */
.v1-category-card .v1-fallback,
.mfh-card2 .mfh-card2-fallback{
  position:relative;
  z-index:1;
}

.v1-category-card:has(.v1-fallback) .mfh-skeleton-block,
.mfh-card2:has(.mfh-card2-fallback) .mfh-skeleton-block{
  display:none;
}

/* keep content above skeleton */
.v1-hero-content,
.mfh-banner-overlay,
.mfh-card2-body,
.mfh-card2-addwrap{
  position:relative;
  z-index:2;
}

@keyframes mfhSkeletonShimmer{
  0%{
    background-position:200% 0;
  }
  100%{
    background-position:-200% 0;
  }
}