/* Keep photography behind the existing reading surfaces. */
html[data-season] :is(.public-main, .commercial-hero, .service-detail-hero, .pricing-hero, .rw-hero) {
  background:
    linear-gradient(90deg, rgba(251, 247, 241, .97), rgba(251, 247, 241, .76)),
    var(--home-hero-image) center 42% / cover no-repeat;
}

html[data-season] .public-page footer.site-footer {
  background:
    linear-gradient(rgba(251, 247, 241, .84), rgba(251, 247, 241, .84)),
    var(--home-hero-image) center 58% / cover no-repeat !important;
}

html[data-season] body:is(.lxe-page[data-surface="booking"], .lxe-page[data-surface="client-portal"], .lxe-page[data-surface="client-portal-redirect"], .lxe-page[data-surface="admin-concierge"]) {
  background:
    linear-gradient(rgba(251, 247, 241, .90), rgba(251, 247, 241, .84)),
    var(--home-hero-image) center top / cover no-repeat fixed !important;
}

html[data-season] body:is(.lxe-page-dark, .lxe-page[data-surface="client-login"], .lxe-page[data-surface="admin-login"], .lxe-page[data-surface="admin-reset"]) {
  background:
    linear-gradient(rgba(62, 47, 39, .55), rgba(62, 47, 39, .60)),
    var(--home-hero-image) center / cover no-repeat fixed !important;
}

html[data-season] .sw-header {
  background:
    linear-gradient(90deg, rgba(255, 250, 244, .98), rgba(255, 250, 244, .82)),
    var(--home-hero-image) center 33% / cover no-repeat;
}

html[data-season] .admin-topbar .admin-topbar-photo {
  background:
    linear-gradient(90deg, rgba(63, 45, 33, .96), rgba(74, 53, 38, .78) 43%, rgba(251, 247, 241, .94) 78%),
    var(--home-hero-image) center 38% / cover no-repeat;
}

/* Match the photos' 3:2 cover crop and clip the motion to the glass. */
.season-window {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.season-window-pane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 150cqh);
  height: max(100cqh, 66.6667cqw);
  transform: translate(-50%, -50%);
}

[data-season="winter"] .season-window-pane {
  clip-path: polygon(71.5% 47%, 71.5% 11%, 73% 4%, 76% 0, 93.5% 0, 95% 9%, 92% 34%, 88% 46%);
}

[data-season="spring"] .season-window-pane {
  clip-path: polygon(65.5% 42%, 65.5% 12%, 67% 4%, 70% 0, 88% 0, 91.5% 6%, 93% 39%, 89% 41%, 84% 41%, 79% 40%, 74% 44%, 70% 44%);
}

[data-season="summer"] .season-window-pane {
  clip-path: polygon(68.5% 54%, 68.5% 10%, 71% 5%, 76% 0, 89% 0, 89% 30%, 88% 35%, 87% 53%, 81% 54%);
}

[data-season="fall"] .season-window-pane {
  clip-path: polygon(68% 15%, 70% 5%, 73% 0, 100% 0, 100% 39%, 95% 36%, 91% 38%, 87% 34%, 83% 36%, 77% 39%, 70% 38%, 68% 40%);
}

.season-window-pane > span {
  position: absolute;
  aspect-ratio: 1;
  opacity: 0;
  background: var(--particle-color);
}

.season-leaf {
  aspect-ratio: 1.45;
  background: linear-gradient(155deg, var(--particle-color) 48%, #6e2d13 50%, var(--particle-color) 54%);
  filter: brightness(1.15);
  clip-path: polygon(0 55%, 20% 45%, 16% 24%, 37% 32%, 41% 8%, 60% 21%, 72% 9%, 76% 29%, 100% 34%, 84% 54%, 90% 66%, 65% 70%, 55% 93%, 41% 73%, 24% 82%, 27% 61%, 3% 64%);
}

.season-petal {
  aspect-ratio: 1.25;
  border-radius: 72% 32% 62% 42%;
  box-shadow: 0 0 2px #984966;
}

.season-snow,
.season-speck {
  border-radius: 50%;
}

.season-snow {
  box-shadow: 0 0 4px #fff, 0 0 2px #39516b;
}

.season-speck {
  box-shadow: 0 0 5px #f7ca72, 0 0 2px #73512f;
}

@media (max-width: 680px) {
  .season-window-pane {
    left: 62%;
    transform: translate(-62%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .season-window {
    display: none;
  }
}