/* =============================================================
   AMBIENT — massive, mood-driving SVG illustrations
   -------------------------------------------------------------
   These are NOT corner watermarks. They're large editorial
   illustrations sized to drive atmosphere across each section.
   Sources: Twemoji (CC-BY 4.0, hosted locally) used as
   CSS mask-images so we can paint them in the brand colors.
   ============================================================= */

/* Ensure decorated sections establish a stacking context */
.intro,
.philosophy,
.am-community,
.am-inhome,
.nb-day,
.fp-compare,
.fp-faq,
.trust {
  position: relative;
  overflow: hidden;
}
.intro > *,
.philosophy > *,
.am-community > *,
.am-inhome > *,
.nb-day > *,
.fp-compare > *,
.fp-faq > *,
.trust > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   1. HOMEPAGE INTRO — colossal palm tree, right side
   ============================================================ */
.intro::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -120px;
  width: clamp(420px, 50vw, 760px);
  height: clamp(420px, 50vw, 760px);
  background-color: var(--accent);
  -webkit-mask-image: url("/public/svg/palm.svg");
          mask-image: url("/public/svg/palm.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.10;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   2. HOMEPAGE PHILOSOPHY — radiant sun, top-left
   ============================================================ */
.philosophy::before {
  content: "";
  position: absolute;
  top: -160px;
  left: -160px;
  width: clamp(440px, 48vw, 680px);
  height: clamp(440px, 48vw, 680px);
  background-color: var(--warm);
  -webkit-mask-image: url("/public/svg/sun.svg");
          mask-image: url("/public/svg/sun.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   3. AMENITIES COMMUNITY — palm tree on the left, mirrored
   ============================================================ */
.am-community::before {
  content: "";
  position: absolute;
  top: 60px;
  left: -180px;
  width: clamp(380px, 42vw, 620px);
  height: clamp(380px, 42vw, 620px);
  background-color: var(--accent);
  -webkit-mask-image: url("/public/svg/palm.svg");
          mask-image: url("/public/svg/palm.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.09;
  transform: scaleX(-1) rotate(6deg);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   4. AMENITIES IN-HOME — herb cluster bottom-right
   ============================================================ */
.am-inhome::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -100px;
  width: clamp(360px, 38vw, 560px);
  height: clamp(360px, 38vw, 560px);
  background-color: var(--leaf);
  -webkit-mask-image: url("/public/svg/herb.svg");
          mask-image: url("/public/svg/herb.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.11;
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   5. NEIGHBORHOOD DAY — wave sweeping across the top
   ============================================================ */
.nb-day::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -120px;
  width: clamp(500px, 60vw, 880px);
  height: clamp(380px, 45vw, 660px);
  background-color: var(--water);
  -webkit-mask-image: url("/public/svg/wave.svg");
          mask-image: url("/public/svg/wave.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   6. FLOOR PLANS COMPARE — leaf bottom-left
   ============================================================ */
.fp-compare::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: clamp(360px, 42vw, 620px);
  height: clamp(360px, 42vw, 620px);
  background-color: var(--leaf);
  -webkit-mask-image: url("/public/svg/leaf.svg");
          mask-image: url("/public/svg/leaf.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.10;
  transform: rotate(-22deg);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   7. FLOOR PLANS FAQ — sun bottom-right
   ============================================================ */
.fp-faq::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: clamp(280px, 28vw, 420px);
  height: clamp(280px, 28vw, 420px);
  background-color: var(--warm);
  -webkit-mask-image: url("/public/svg/sun.svg");
          mask-image: url("/public/svg/sun.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   8. CONTACT TRUST BAND — deciduous tree right side
   ============================================================ */
.trust::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -180px;
  width: clamp(360px, 42vw, 580px);
  height: clamp(360px, 42vw, 580px);
  background-color: var(--accent);
  -webkit-mask-image: url("/public/svg/tree.svg");
          mask-image: url("/public/svg/tree.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* =============================================================
   DARK-SECTION AMBIENTS — paper-white masks at very low opacity
   so navy sections don't read as flat blue blocks.
   ============================================================= */

/* Setup: every dark section gets relative + overflow so masks anchor cleanly */
.closer,
.neighborhood,
.site-footer,
.gx-hero,
.gx-cta,
.fp-cta,
.am-hero,
.am-cta,
.nb-hero,
.nb-cta,
.pull-quote,
.visit-hero,
.lost {
  position: relative;
  overflow: hidden;
}
.closer > *,
.neighborhood > *,
.site-footer > *,
.gx-hero > *,
.gx-cta > *,
.fp-cta > *,
.am-hero > *,
.am-cta > *,
.nb-hero > *,
.nb-cta > *,
.pull-quote > *,
.visit-hero > *,
.lost > * {
  position: relative;
  z-index: 1;
}

/* Shared dark-ambient base — class to keep mask declarations DRY */
.dark-ambient {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-color: var(--oasis-paper);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ---- Homepage closer "Visit." band — 2 SVGs: palm + sun ---- */
.closer::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -120px;
  width: clamp(360px, 40vw, 620px);
  height: clamp(360px, 40vw, 620px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.07;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}
.closer::after {
  content: "";
  position: absolute;
  bottom: -200px;
  right: -140px;
  width: clamp(380px, 44vw, 640px);
  height: clamp(380px, 44vw, 640px);
  background-color: var(--oasis-pool);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* ---- Homepage neighborhood teaser (navy band) — wave on left, palm right ---- */
.neighborhood::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -160px;
  width: clamp(420px, 50vw, 720px);
  height: clamp(320px, 38vw, 540px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/wave.svg") no-repeat center / contain;
          mask: url("/public/svg/wave.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.neighborhood::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -180px;
  width: clamp(360px, 42vw, 580px);
  height: clamp(360px, 42vw, 580px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.06;
  transform: rotate(14deg);
  pointer-events: none;
  z-index: 0;
}

/* ---- Footer — palm on left, tree on right ---- */
.site-footer::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -160px;
  width: clamp(380px, 36vw, 540px);
  height: clamp(380px, 36vw, 540px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.05;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 0;
}
.site-footer::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -160px;
  width: clamp(380px, 36vw, 540px);
  height: clamp(380px, 36vw, 540px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/tree.svg") no-repeat center / contain;
          mask: url("/public/svg/tree.svg") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* ---- Gallery hero — wave + sun, paper white ---- */
.gx-hero::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -80px;
  width: clamp(380px, 42vw, 620px);
  height: clamp(280px, 32vw, 460px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/wave.svg") no-repeat center / contain;
          mask: url("/public/svg/wave.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.gx-hero::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: clamp(280px, 30vw, 460px);
  height: clamp(280px, 30vw, 460px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

/* ---- Gallery closer CTA — palm + sun ---- */
.gx-cta::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: clamp(280px, 32vw, 460px);
  height: clamp(280px, 32vw, 460px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.gx-cta::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -120px;
  width: clamp(360px, 40vw, 580px);
  height: clamp(360px, 40vw, 580px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.07;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
}

/* ---- Floor plans CTA closer — palm ---- */
.fp-cta::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -140px;
  width: clamp(360px, 40vw, 600px);
  height: clamp(360px, 40vw, 600px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.07;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}
.fp-cta::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: clamp(280px, 30vw, 420px);
  height: clamp(280px, 30vw, 420px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ---- Amenities hero ---- */
.am-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: clamp(360px, 42vw, 580px);
  height: clamp(360px, 42vw, 580px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ---- Amenities CTA closer ---- */
.am-cta::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -100px;
  width: clamp(320px, 36vw, 500px);
  height: clamp(320px, 36vw, 500px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.am-cta::after {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -120px;
  width: clamp(380px, 42vw, 600px);
  height: clamp(380px, 42vw, 600px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.07;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}

/* ---- Neighborhood hero + CTA ---- */
.nb-hero::before {
  content: "";
  position: absolute;
  bottom: -160px;
  right: -120px;
  width: clamp(380px, 44vw, 620px);
  height: clamp(280px, 32vw, 460px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/wave.svg") no-repeat center / contain;
          mask: url("/public/svg/wave.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.nb-cta::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -120px;
  width: clamp(320px, 36vw, 520px);
  height: clamp(320px, 36vw, 520px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.nb-cta::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -100px;
  width: clamp(280px, 32vw, 440px);
  height: clamp(280px, 32vw, 440px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* ---- Contact visit hero + pull-quote ---- */
.visit-hero::before {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -100px;
  width: clamp(320px, 38vw, 540px);
  height: clamp(320px, 38vw, 540px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.pull-quote::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: clamp(300px, 34vw, 480px);
  height: clamp(300px, 34vw, 480px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/leaf.svg") no-repeat center / contain;
          mask: url("/public/svg/leaf.svg") no-repeat center / contain;
  opacity: 0.07;
  transform: rotate(20deg);
  pointer-events: none;
  z-index: 0;
}
.pull-quote::after {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: clamp(280px, 32vw, 440px);
  height: clamp(280px, 32vw, 440px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/sun.svg") no-repeat center / contain;
          mask: url("/public/svg/sun.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ---- 404 page ambient ---- */
.lost::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: clamp(360px, 40vw, 580px);
  height: clamp(360px, 40vw, 580px);
  background-color: var(--oasis-paper);
  -webkit-mask: url("/public/svg/palm.svg") no-repeat center / contain;
          mask: url("/public/svg/palm.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Tone-down for small screens — keep navy sections breathable on mobile */
@media (max-width: 640px) {
  .closer::before,
  .closer::after,
  .neighborhood::before,
  .neighborhood::after,
  .site-footer::before,
  .site-footer::after,
  .gx-hero::before,
  .gx-hero::after,
  .gx-cta::before,
  .gx-cta::after,
  .fp-cta::before,
  .fp-cta::after,
  .am-hero::before,
  .am-cta::before,
  .am-cta::after,
  .nb-hero::before,
  .nb-cta::before,
  .nb-cta::after,
  .visit-hero::before,
  .pull-quote::before,
  .pull-quote::after,
  .lost::before {
    opacity: 0.04;
  }
}

/* Tone down on small screens (cream sections) */
@media (max-width: 640px) {
  .intro::after,
  .philosophy::before,
  .am-community::before,
  .am-inhome::after,
  .nb-day::before,
  .fp-compare::after,
  .fp-faq::after,
  .trust::before {
    opacity: 0.07;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro::after,
  .philosophy::before,
  .am-community::before,
  .am-inhome::after,
  .nb-day::before,
  .fp-compare::after,
  .fp-faq::after,
  .trust::before {
    opacity: 0.06;
  }
}