/* Continuous Blended Photographic Background (Beach 1–7)
 * Runs from immediately after the Hero until immediately before the Footer.
 * Fully responsive, full-bleed, soft-feathered crossfades, natural colors without green tint.
 */

.site-main {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #000000;
}

/* Background Canvas Container */
.site-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(14px);
  transform: translateZ(0);
}

/* Common Beach Layer Styles */
.bg-beach {
  position: absolute;
  left: -30px;
  right: -30px;
  width: calc(100% + 60px);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.74;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  will-change: transform;
}

/* 1. Destinations - Beach 1 (Twilight Sunset Ocean) */
.bg-beach-1 {
  top: 0%;
  height: 19%;
  background-image: url("../../assets/images/beach/beach1.webp");
  background-position: center 25%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}

/* 2. About Us - Beach 2 (Vibrant Pink Sunset Shoreline) */
.bg-beach-2 {
  top: 11%;
  height: 20%;
  background-image: url("../../assets/images/beach/beach2.webp");
  background-position: center 35%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
}

/* 3. Trips by Length - Beach 3 (Golden Warm Sunset Ocean) */
.bg-beach-3 {
  top: 24%;
  height: 22%;
  background-image: url("../../assets/images/beach/beach3.webp");
  background-position: center 35%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
}

/* 4. Special Offers & Inclusions - Beach 4 (Golden Dawn Horizon) */
.bg-beach-4 {
  top: 39%;
  height: 22%;
  background-image: url("../../assets/images/beach/beach4.webp");
  background-position: center 30%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
}

/* 5. Inclusions & Upper Gallery - Beach 5 (Silhouette Ocean & Twilight Clouds) */
.bg-beach-5 {
  top: 54%;
  height: 22%;
  background-image: url("../../assets/images/beach/beach5.webp");
  background-position: center 30%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
}

/* 6. Gallery & Reviews - Beach 6 (Lilac Ocean Waves) */
.bg-beach-6 {
  top: 68%;
  height: 21%;
  background-image: url("../../assets/images/beach/beach6.webp");
  background-position: center 35%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 65%, transparent 100%);
}

/* 7. Plan Your Trip - Beach 7 (Golden Wet Sand Sunset Reflections) */
.bg-beach-7 {
  top: 81%;
  height: 19%;
  background-image: url("../../assets/images/beach/beach7.webp");
  background-position: center 40%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 80%, transparent 100%);
}

/* Neutral Atmosphere Overlay (No green tint, ensures premium readability) */
.site-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* Soft feather into black footer at bottom edge */
.site-bg-footer-feather {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #000000);
  pointer-events: none;
  z-index: 1;
}

/* Disable old individual section backdrop images and filters */
#dest::before,
#about::before,
.trips-continuous-flow::before,
#inc::before,
#plan::before {
  display: none !important;
}

/* Ensure sections and continuous flow wrapper remain transparent to reveal the blended canvas */
#dest,
#about,
.trips-continuous-flow,
#trips,
#offers,
#inc,
#gal,
.gal,
#rev,
#plan {
  background: transparent !important;
  position: relative;
  z-index: 2;
}

/* Mobile responsive fine-tuning */
@media (max-width: 860px) {
  .site-bg-canvas {
    filter: blur(12px);
  }
  .bg-beach {
    left: -18px;
    right: -18px;
    width: calc(100% + 36px);
  }
}