.sauna-painted-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #b6cede;
}

/* Colour underneath the paint keeps the transition into the scene gentle. */
.sauna-painted-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 40%, rgb(242 244 228 / 24%), transparent 65%),
    radial-gradient(ellipse at 12% 8%, rgb(144 184 213 / 18%), transparent 62%),
    linear-gradient(180deg, #b4cede 0%, #b8cedc 45%, #c1d1db 75%, #dce0d8 100%);
}

.sauna-painted-brushwork {
  position: absolute;
  inset: 0;
  background: url('../assets/original/sauna-hero-painted-v2-sky-fine.webp') repeat;
  background-size: clamp(700px, 62vw, 1050px) auto;
  opacity: .7;
  /* Keep actual paint visible behind the copy, with slightly quieter contrast. */
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgb(0 0 0 / 58%) 0%, black 72%);
  mask-image: radial-gradient(ellipse at 50% 45%, rgb(0 0 0 / 58%) 0%, black 72%);
}

.sauna-painted-scene {
  position: absolute;
  inset: auto 0 0;
  display: block;
  height: min(66.6667vw, 64%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 6%) 9%, rgb(0 0 0 / 35%) 20%, rgb(0 0 0 / 80%) 32%, black 43%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 6%) 9%, rgb(0 0 0 / 35%) 20%, rgb(0 0 0 / 80%) 32%, black 43%);
}

.sauna-painted-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  user-select: none;
}

.sauna-painted-distant-scene { display: none; }

/* Separate the shores throughout desktop sizing so there is no scale jump at
   1800px. Keep the shores 15% smaller, hold their size through intermediate widths,
   then let the wide-screen sizing catch up. Only the open lake stretches. */
@media (min-width: 768px) {
  .sauna-painted-backdrop:not(.sauna-painted--shore) > .sauna-painted-scene { display: none; }
  .sauna-painted-distant-scene {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: min(32.3vw, clamp(357px, 25.5vw, 476px)) 1fr min(32.3vw, clamp(357px, 25.5vw, 476px));
    /* Shore width × 724 / (2172 × .38), preserving the painted proportions. */
    height: min(28.3333vw, clamp(313.158px, 22.3684vw, 417.546px));
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 35%) 20%, black 43%);
    mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 35%) 20%, black 43%);
  }
  .sauna-painted-distant-scene > span {
    background-image: url('../assets/original/sauna-hero-painted-v2-wide.webp');
    background-repeat: no-repeat;
    background-size: 263.1579% 100%;
  }
  .sauna-painted-distant-scene > span:first-child { background-position: left bottom; }
  .sauna-painted-distant-scene > span:nth-child(2) {
    background-size: 416.6667% 100%;
    background-position: center bottom;
  }
  .sauna-painted-distant-scene > span:last-child { background-position: right bottom; }
}

@media (min-width: 768px) {
  .sauna-painted-scene { height: min(33.3333vw, 56%); }
}

@media (max-width: 479px) {
  .sauna-painted-scene { height: min(177.7778vw, 50%); }
  .sauna-painted-scene img { object-position: right 62%; }
}

.sauna-painted--shore .sauna-painted-scene { height: 100%; }
.sauna-painted--shore .sauna-painted-scene img { object-position: right bottom; }
.sauna-painted--pricing {
  bottom: auto;
  height: 560px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 28%, transparent 100%);
}