/*
 * Continuous wildlife atmosphere.
 * The complete ocelot photograph is the middle layer; a soft cover copy only
 * fills surplus screen area, so the principal image is never cropped.
 */

html {
  background: #e7eee8;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 248, 243, 0.7), rgba(231, 240, 233, 0.76)),
    url("./assets/ocelot-livewallpaper.png"),
    url("./assets/ocelot-livewallpaper.png");
  background-position: center;
  background-size: cover, contain, cover;
  background-repeat: no-repeat;
  filter: saturate(0.9) brightness(0.98);
  transform: translateZ(0);
  will-change: filter;
  animation: wildlife-live-light 24s ease-in-out infinite alternate;
}

main#main {
  background: transparent !important;
}

.intro,
.villas-section,
.property-details,
.experience,
.media-experience,
.global-film,
.concierge,
.trust,
.channels,
.guest-voice,
.booking,
.pay {
  background:
    linear-gradient(
      180deg,
      rgba(251, 252, 249, 0.9),
      rgba(238, 245, 239, 0.82)
    ) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.intro,
.property-details,
.global-film,
.trust,
.guest-voice,
.pay {
  background:
    linear-gradient(
      180deg,
      rgba(250, 251, 247, 0.86),
      rgba(244, 248, 243, 0.78)
    ) !important;
}

.villa-card,
.detail-panel,
.concierge-card,
.channel-board,
.guest-voice-card,
.booking-card,
.pay-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes wildlife-live-light {
  0% {
    filter: saturate(0.86) brightness(0.94);
  }

  48% {
    filter: saturate(0.94) brightness(1.02);
  }

  100% {
    filter: saturate(0.89) brightness(0.97);
  }
}

body[data-atmosphere="sunset"]::before {
  background-image:
    linear-gradient(rgba(63, 45, 29, 0.45), rgba(32, 39, 31, 0.58)),
    url("./assets/ocelot-livewallpaper.png"),
    url("./assets/ocelot-livewallpaper.png");
  filter: saturate(0.86) brightness(0.78);
}

body[data-atmosphere="sunset"] .intro,
body[data-atmosphere="sunset"] .villas-section,
body[data-atmosphere="sunset"] .property-details,
body[data-atmosphere="sunset"] .experience,
body[data-atmosphere="sunset"] .media-experience,
body[data-atmosphere="sunset"] .global-film,
body[data-atmosphere="sunset"] .concierge,
body[data-atmosphere="sunset"] .trust,
body[data-atmosphere="sunset"] .channels,
body[data-atmosphere="sunset"] .guest-voice,
body[data-atmosphere="sunset"] .booking,
body[data-atmosphere="sunset"] .pay {
  background:
    linear-gradient(
      180deg,
      rgba(251, 247, 238, 0.86),
      rgba(243, 235, 219, 0.78)
    ) !important;
}

body[data-atmosphere="night"]::before {
  background-image:
    linear-gradient(rgba(5, 22, 19, 0.54), rgba(4, 16, 14, 0.66)),
    url("./assets/ocelot-livewallpaper.png"),
    url("./assets/ocelot-livewallpaper.png");
  filter: saturate(0.78) brightness(0.66);
}

body[data-atmosphere="night"] .intro,
body[data-atmosphere="night"] .villas-section,
body[data-atmosphere="night"] .property-details,
body[data-atmosphere="night"] .experience,
body[data-atmosphere="night"] .media-experience,
body[data-atmosphere="night"] .global-film,
body[data-atmosphere="night"] .concierge,
body[data-atmosphere="night"] .trust,
body[data-atmosphere="night"] .channels,
body[data-atmosphere="night"] .guest-voice,
body[data-atmosphere="night"] .booking,
body[data-atmosphere="night"] .pay {
  background:
    linear-gradient(
      180deg,
      rgba(9, 35, 30, 0.82),
      rgba(5, 25, 22, 0.76)
    ) !important;
}

@media (max-width: 820px) {
  body::before {
    background-image:
      linear-gradient(rgba(244, 248, 243, 0.76), rgba(231, 240, 233, 0.8)),
      url("./assets/ocelot-livewallpaper.png"),
      url("./assets/ocelot-livewallpaper.png");
    background-size: cover, contain, cover;
    background-position: center;
  }

  .intro,
  .villas-section,
  .property-details,
  .experience,
  .media-experience,
  .global-film,
  .concierge,
  .trust,
  .channels,
  .guest-voice,
  .booking,
  .pay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}