/* Final guest experience: visible landscapes, compact controls, and readable stays. */
:root {
  --experience-glass: rgba(248, 252, 246, 0.78);
  --experience-glass-strong: rgba(251, 253, 249, 0.92);
  --experience-control: rgba(18, 64, 53, 0.9);
  --experience-control-text: #f7fff9;
}

body {
  background-image:
    linear-gradient(rgba(242, 249, 239, 0.5), rgba(230, 242, 228, 0.62)),
    url("./assets/background-rainbow-valley.webp") !important;
}

body[data-atmosphere="morning"] {
  background-image:
    linear-gradient(rgba(247, 251, 239, 0.44), rgba(226, 241, 226, 0.58)),
    url("./assets/background-rainbow-valley.webp") !important;
}

body[data-atmosphere="sunset"] {
  --experience-glass: rgba(255, 248, 236, 0.8);
  --experience-glass-strong: rgba(255, 251, 244, 0.93);
  --experience-control: rgba(92, 50, 32, 0.9);
  background-image:
    linear-gradient(rgba(255, 239, 215, 0.46), rgba(244, 229, 207, 0.62)),
    url("./assets/hero-sunset-pool.webp") !important;
}

body[data-atmosphere="night"] {
  --experience-glass: rgba(20, 60, 52, 0.82);
  --experience-glass-strong: rgba(19, 55, 49, 0.94);
  --experience-control: rgba(8, 35, 34, 0.94);
  background-image:
    linear-gradient(rgba(11, 43, 41, 0.48), rgba(12, 47, 43, 0.68)),
    url("./assets/valley-night-lights.webp") !important;
}

/* Readable editorial copy without surrounding the photography in white boxes. */
.villa-card-content,
.journey-scene-copy,
.gallery-panel-copy,
.sound-copy {
  background: var(--experience-glass) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow: 0 18px 44px rgba(17, 66, 51, 0.12) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.villa-card-content {
  padding: clamp(1.4rem, 3vw, 2.35rem) !important;
  border-radius: 6px !important;
}

.villa-card-content :where(p, li, span),
.journey-scene-copy :where(p, span),
.gallery-panel-copy :where(p, span),
.sound-copy :where(p, small) {
  opacity: 1 !important;
}

body[data-atmosphere="night"] .villa-card-content :where(h3, p, li, span, a),
body[data-atmosphere="night"] .journey-scene-copy :where(h3, p, span),
body[data-atmosphere="night"] .gallery-panel-copy :where(h3, p, span),
body[data-atmosphere="night"] .sound-copy :where(h3, p, small) {
  color: #f3fff8 !important;
}

/* Preserve every image while avoiding dark letterboxing and decorative overlays. */
.property-window-stage,
.gallery-feature,
.gallery-photo,
.journey-scene-media {
  background: rgba(221, 238, 224, 0.42) !important;
  border: 0 !important;
  box-shadow: 0 24px 58px rgba(18, 66, 53, 0.16) !important;
}

:where(.property-window-slide img, .gallery-feature img, .gallery-photo img, .journey-scene-media img) {
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(225, 240, 226, 0.46) !important;
  filter: saturate(1.08) contrast(1.02) brightness(1.02) !important;
}

.stay-gallery-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  min-height: 2.85rem;
  padding: 0.7rem 1rem !important;
  border: 1px solid rgba(37, 103, 76, 0.35) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  color: #174c3e !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

.stay-gallery-trigger:hover,
.stay-gallery-trigger:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 26px rgba(19, 73, 56, 0.14) !important;
}

body[data-atmosphere="night"] .stay-gallery-trigger {
  border-color: rgba(208, 242, 222, 0.38) !important;
  background: rgba(235, 251, 242, 0.9) !important;
  color: #153f35 !important;
}

/* Keep guest controls visible without covering the pool or primary content. */
.atmosphere-switch {
  position: fixed !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
  z-index: 170 !important;
  max-width: calc(100vw - 2rem) !important;
  background: var(--experience-control) !important;
}

.ambient-audio-control {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(9.25rem + env(safe-area-inset-bottom));
  z-index: 171;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.62rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 4px;
  background: var(--experience-control);
  color: var(--experience-control-text);
  box-shadow: 0 12px 28px rgba(7, 32, 28, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
}

.ambient-audio-control svg {
  width: 1rem;
  height: 1rem;
}

.ambient-audio-control[aria-pressed="true"] {
  background: #f3fbf4;
  color: #16463a;
}

.sound-profile {
  display: block;
  margin-top: 0.65rem;
  color: var(--launch-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

body[data-atmosphere="night"] .sound-profile {
  color: #d9ece3;
}

@media (max-width: 720px) {
  .atmosphere-switch {
    right: 0.65rem !important;
    bottom: calc(4.65rem + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 1.3rem) !important;
    padding: 0.35rem !important;
  }

  .atmosphere-switch button {
    min-height: 2.15rem !important;
    padding: 0.42rem 0.55rem !important;
    font-size: 0.66rem !important;
  }

  .ambient-audio-control {
    right: 0.65rem;
    bottom: calc(8.2rem + env(safe-area-inset-bottom));
    width: 2.75rem;
    padding: 0;
  }

  .ambient-audio-control span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .villa-card-content {
    padding: 1.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stay-gallery-trigger {
    transition: none !important;
  }
}