/* =========================================================
   BWFGP Smooth Image Loading
   Keeps original card colors intact
   ========================================================= */

/*
   Only darken large hero/image containers.
   Do NOT apply background colors directly to amenity cards.
*/

.hero,
.gallery-hero,
.membership-hero,
.amenities-hero,
.detail-main-image-frame {
  background-color: #06150f;
}

/*
   Give image-only frames a dark placeholder while loading.
   This prevents the white top-to-bottom image paint.
*/

.detail-main-image-button,
.detail-thumbnail,
.modern-fish-tile,
.water-card,
.experience-card,
.carousel-card {
  background-color: #06150f;
  overflow: hidden;
}

/*
   Image fade-in behavior.
*/

.hero-bg-image,
.gallery-hero-bg,
.membership-hero-bg,
.amenities-hero-bg,
.amenities-detail-card img,
.water-card img,
.modern-fish-tile img,
.detail-main-image-button img,
.detail-thumbnail img,
.experience-card img,
.carousel-card img {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity .35s ease,
    filter .35s ease,
    transform .35s ease;
}

/*
   Normal images after loaded.
*/

.hero-bg-image.is-loaded,
.amenities-detail-card img.is-loaded,
.water-card img.is-loaded,
.modern-fish-tile img.is-loaded,
.detail-main-image-button img.is-loaded,
.detail-thumbnail img.is-loaded,
.experience-card img.is-loaded,
.carousel-card img.is-loaded {
  opacity: 1;
  filter: none;
}

/*
   Hero overlays keep their original dimmed look.
*/

.amenities-hero-bg.is-loaded {
  opacity: .16;
  filter: none;
}

.gallery-hero-bg.is-loaded,
.membership-hero-bg.is-loaded {
  opacity: .18;
  filter: blur(2px) saturate(.9) contrast(1.05);
}