/* Bright nature canvas: views, forest color and wildlife in one continuous composition. */

:root {
  --nature-wash: rgba(231, 247, 238, 0.2);
  --nature-band: rgba(248, 253, 250, 0.67);
  --nature-band-alt: rgba(219, 243, 230, 0.59);
  --nature-glass: rgba(252, 255, 253, 0.76);
  --nature-leaf: #16845c;
  --nature-water: #168ca2;
  --nature-flower: #c75f69;
  --nature-sun: #e0a13b;
  --nature-shadow: 0 10px 26px rgba(16, 74, 54, 0.07);
}

body[data-atmosphere="morning"],
body[data-atmosphere="light"] {
  --wmv-page: #dff2e8;
  --wmv-surface: rgba(249, 253, 251, 0.78);
  --wmv-surface-solid: #f8fcfa;
  --wmv-ink: #113e33;
  --wmv-muted: #3e6659;
  --wmv-line: rgba(20, 101, 75, 0.22);
  --wmv-accent: #17845b;
  --wmv-accent-strong: #0e6547;
  --wmv-secondary: #147f91;
  --wmv-warm: #d89c37;
  --wmv-shadow: var(--nature-shadow);
  --nature-wash: rgba(224, 245, 234, 0.18);
  --nature-band: rgba(249, 253, 251, 0.66);
  --nature-band-alt: rgba(211, 240, 224, 0.57);
}

body[data-atmosphere="sunset"] {
  --wmv-page: #f4eadc;
  --wmv-surface: rgba(255, 251, 244, 0.81);
  --wmv-surface-solid: #fffaf2;
  --wmv-ink: #443329;
  --wmv-muted: #6e5849;
  --wmv-line: rgba(151, 89, 48, 0.23);
  --wmv-accent: #b4553b;
  --wmv-accent-strong: #8c3c2c;
  --wmv-secondary: #217d85;
  --wmv-warm: #c98627;
  --wmv-shadow: 0 16px 38px rgba(112, 67, 36, 0.11);
  --nature-wash: rgba(255, 235, 209, 0.2);
  --nature-band: rgba(255, 249, 239, 0.68);
  --nature-band-alt: rgba(247, 218, 183, 0.58);
  --nature-glass: rgba(255, 251, 244, 0.78);
  --nature-leaf: #397b57;
  --nature-water: #287f8c;
  --nature-flower: #bd5261;
  --nature-sun: #d38725;
}

body[data-atmosphere="night"] {
  --wmv-page: #b8d7ca;
  --wmv-surface: rgba(236, 248, 242, 0.82);
  --wmv-surface-solid: #eef8f3;
  --wmv-ink: #103b32;
  --wmv-muted: #365f55;
  --wmv-line: rgba(30, 103, 84, 0.25);
  --wmv-accent: #1d8060;
  --wmv-accent-strong: #126047;
  --wmv-secondary: #197f91;
  --wmv-warm: #bd862b;
  --wmv-shadow: 0 17px 40px rgba(4, 36, 28, 0.14);
  --nature-wash: rgba(17, 56, 47, 0.17);
  --nature-band: rgba(232, 247, 239, 0.64);
  --nature-band-alt: rgba(188, 224, 207, 0.58);
  --nature-glass: rgba(239, 249, 244, 0.8);
  --nature-leaf: #176f52;
  --nature-water: #13788c;
  --nature-flower: #a74757;
  --nature-sun: #c38b2c;
}

body[data-atmosphere] {
  background-image: url("./assets/background-rainbow-valley.webp") !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body[data-atmosphere="sunset"] {
  background-image: url("./assets/hero-sunset-pool.webp") !important;
}

body[data-atmosphere="night"] {
  background-image: url("./assets/valley-night-lights.webp") !important;
}

body[data-atmosphere]::before {
  background:
    linear-gradient(180deg, rgba(242, 252, 247, 0.06), var(--nature-wash) 34%, var(--nature-wash) 76%, rgba(225, 242, 233, 0.12)) !important;
}

body[data-atmosphere="sunset"]::before {
  background:
    linear-gradient(180deg, rgba(255, 244, 225, 0.06), var(--nature-wash) 36%, rgba(247, 220, 188, 0.17)) !important;
}

body[data-atmosphere="night"]::before {
  background:
    linear-gradient(180deg, rgba(7, 34, 29, 0.09), var(--nature-wash) 34%, rgba(17, 55, 47, 0.2)) !important;
}

body[data-atmosphere] .ambient-wallpaper,
body[data-atmosphere] .ambient-page-tint,
body[data-atmosphere] .page-depth-canvas {
  display: none !important;
}

body[data-atmosphere] main {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body[data-atmosphere] main > section:not(.hero),
body[data-atmosphere] main > .section-pad,
body[data-atmosphere="sunset"] main > .section-pad,
body[data-atmosphere="night"] main > .section-pad {
  position: relative;
  overflow: clip;
  color: var(--wmv-ink) !important;
  background: var(--nature-band) !important;
  border-color: var(--wmv-line) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(1.2) blur(1px) !important;
}

body[data-atmosphere] main > section:nth-of-type(even):not(.hero) {
  background: var(--nature-band-alt) !important;
}

body[data-atmosphere] main > section:not(.hero)::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 8%;
  width: 84%;
  height: 2px;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--nature-leaf) 70%, transparent),
    color-mix(in srgb, var(--nature-water) 65%, transparent),
    color-mix(in srgb, var(--nature-sun) 65%, transparent),
    transparent
  );
  opacity: 0.74;
}

body[data-atmosphere] main > section:not(.hero) > * {
  position: relative;
  z-index: 2;
}

/* Landscape windows continue the mountain view without turning sections into cards. */
body[data-atmosphere] :is(.intro, .day-journey, .experience, .trust) {
  background-image:
    linear-gradient(var(--nature-band), var(--nature-band)),
    url("./assets/background-rainbow-valley.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-atmosphere] :is(.media-experience, .concierge, .channels) {
  background-image:
    linear-gradient(var(--nature-band-alt), var(--nature-band-alt)),
    url("./assets/mountain-retreat-pool-view.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Native wildlife appears as a quiet part of the landscape, with no frame or box. */
body[data-atmosphere] .concierge::after,
body[data-atmosphere] .amenities::after {
  position: absolute;
  z-index: 1;
  right: clamp(22px, 5vw, 90px);
  bottom: 18px;
  width: clamp(170px, 19vw, 290px);
  aspect-ratio: 4 / 3;
  content: "";
  pointer-events: none;
  background: url("./assets/background-toucan.jpg") center / contain no-repeat;
  filter: saturate(1.12) contrast(1.04);
  mix-blend-mode: multiply;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at center, #000 44%, transparent 78%);
  mask-image: radial-gradient(ellipse 74% 72% at center, #000 44%, transparent 78%);
}

body[data-atmosphere] .trust::after,
body[data-atmosphere] .channels::after {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 4vw, 76px);
  bottom: 12px;
  width: clamp(160px, 18vw, 270px);
  aspect-ratio: 4 / 3;
  content: "";
  pointer-events: none;
  background: url("./assets/background-cattle.jpg") center / contain no-repeat;
  filter: saturate(1.08) contrast(1.04);
  mix-blend-mode: multiply;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse 76% 70% at center, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 76% 70% at center, #000 40%, transparent 78%);
}

body[data-atmosphere="night"] :is(.concierge, .amenities, .trust, .channels)::after {
  mix-blend-mode: normal;
  opacity: 0.12;
}

body[data-atmosphere] .topbar,
body[data-atmosphere] .nav-panel,
body[data-atmosphere] .site-header {
  background: color-mix(in srgb, var(--nature-glass) 95%, transparent) !important;
  border-color: var(--wmv-line) !important;
  box-shadow: 0 5px 18px rgba(15, 67, 50, 0.06) !important;
  backdrop-filter: blur(16px) saturate(1.16) !important;
}

body[data-atmosphere] .site-header :is(.brand-text strong, .brand-text small, .desktop-nav a, .nav-toggle) {
  color: var(--wmv-ink) !important;
  text-shadow: none !important;
}

body[data-atmosphere] .site-header .brand-mark {
  color: #fff !important;
  background: var(--wmv-accent-strong) !important;
}

body[data-atmosphere] .atmosphere-switch {
  color: var(--wmv-ink) !important;
  background: color-mix(in srgb, var(--nature-glass) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--wmv-accent) 35%, transparent) !important;
  box-shadow: 0 9px 24px rgba(15, 67, 50, 0.09) !important;
}

body[data-atmosphere] .atmosphere-switch button {
  color: var(--wmv-muted) !important;
}

body[data-atmosphere] .atmosphere-switch button[aria-pressed="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--wmv-accent-strong), var(--wmv-secondary)) !important;
}

body[data-atmosphere="night"] .atmosphere-switch button[aria-pressed="true"] {
  color: #fff !important;
}

body[data-atmosphere] :is(
  .booking-panel,
  .amenity,
  .service-card,
  .info-panel,
  .booking-card,
  .direct-booking-hub,
  .guest-voice-panel,
  .pay-card,
  .trust-card,
  .concierge-card
) {
  background: var(--nature-glass) !important;
  border-color: var(--wmv-line) !important;
  box-shadow: 0 7px 20px rgba(18, 78, 57, 0.055) !important;
  backdrop-filter: blur(5px) saturate(1.12) !important;
}

body[data-atmosphere] :is(
  .property-window-stage,
  .gallery-stage,
  .experience-media,
  .media-experience-frame,
  .journey-visual,
  .film-frame
) {
  box-shadow: var(--nature-shadow) !important;
}

body[data-atmosphere] :is(
  .property-window-slide img,
  .gallery-slide img,
  .experience-media img,
  .media-experience img,
  .journey-visual img,
  .house-gallery img
) {
  filter: saturate(1.2) contrast(1.045) brightness(1.035) !important;
}

body[data-atmosphere] .villas-section .property-window-stage {
  box-shadow: 0 10px 25px rgba(13, 67, 49, 0.075) !important;
}

body[data-atmosphere] .villas-section .villa-card-content {
  background: linear-gradient(90deg, color-mix(in srgb, var(--nature-glass) 43%, transparent), transparent) !important;
}

body[data-atmosphere] .villas-section .villa-card:nth-child(even) .villa-card-content {
  background: linear-gradient(270deg, color-mix(in srgb, var(--nature-glass) 43%, transparent), transparent) !important;
}

body[data-atmosphere] .villas-section .stay-facts > * {
  background: color-mix(in srgb, var(--nature-glass) 83%, transparent) !important;
}

body[data-atmosphere] footer {
  color: #effaf5 !important;
  background:
    linear-gradient(135deg, rgba(8, 70, 50, 0.94), rgba(12, 85, 79, 0.93)),
    url("./assets/background-rainbow-valley.webp") center / cover !important;
  box-shadow: none !important;
}

body[data-atmosphere] footer :is(p, a, span, strong, small, h2, h3) {
  color: inherit !important;
}

@media (max-width: 900px) {
  body[data-atmosphere] {
    background-attachment: scroll !important;
  }

  body[data-atmosphere] main > section:not(.hero) {
    backdrop-filter: none !important;
  }

  body[data-atmosphere] .concierge::after,
  body[data-atmosphere] .amenities::after,
  body[data-atmosphere] .trust::after,
  body[data-atmosphere] .channels::after {
    width: 150px;
    opacity: 0.09;
  }
}

@media (max-width: 620px) {
  body[data-atmosphere] main > section:not(.hero)::before {
    left: 12%;
    width: 76%;
  }

  body[data-atmosphere] :is(.concierge, .amenities, .trust, .channels)::after {
    display: none;
  }

  body[data-atmosphere] .villas-section .villa-card-content,
  body[data-atmosphere] .villas-section .villa-card:nth-child(even) .villa-card-content {
    background: color-mix(in srgb, var(--nature-glass) 45%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-atmosphere],
  body[data-atmosphere] main > section:not(.hero) {
    transition: none !important;
  }
}