/* Painterly outdoor sun integration.
 * During daylight, a masked copy of each scene painting sits above the CSS
 * sun so real trunks and foliage can naturally pass in front of the disc.
 * The layer is disabled at night, leaving the established moon treatment
 * untouched. The room and fixed-night summit scenes are intentionally omitted.
 */

.room-scene.scene-forest .outdoor-landscape::before,
.room-scene.scene-beach .outdoor-landscape::before,
.room-scene.scene-creek .outdoor-landscape::before {
  content: "";
  z-index: 3;
  pointer-events: none;
  position: absolute;
  inset: -3%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform-origin: center;
  -webkit-mask-image: var(--sun-foreground-mask);
  mask-image: var(--sun-foreground-mask);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The established moon foreground copy remains the only night-time
 * occlusion layer, so none of the moon positioning or masking changes. */
.period-night .room-scene.scene-forest .outdoor-landscape::before,
.period-night .room-scene.scene-beach .outdoor-landscape::before,
.period-night .room-scene.scene-creek .outdoor-landscape::before {
  display: none;
}

/* Outdoor light should sit inside the hazy painted sky, not read as a flat
 * yellow sticker. Keep the time-driven coordinates intact while separating a
 * softly shaded core from a broad, low-contrast halo. */
.room-scene.scene-forest .sky-sun,
.room-scene.scene-beach .sky-sun,
.room-scene.scene-creek .sky-sun {
  width: clamp(52px, 4.8vw, 62px);
  height: clamp(52px, 4.8vw, 62px);
  background: radial-gradient(
    circle,
    rgb(255 244 194 / 42%) 0 45%,
    rgb(255 225 159 / 18%) 64%,
    transparent 100%
  );
  box-shadow: none;
  filter: saturate(0.84);
  overflow: visible;
}

.room-scene.scene-forest .sky-sun::before,
.room-scene.scene-beach .sky-sun::before,
.room-scene.scene-creek .sky-sun::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 34%,
    rgb(255 253 222 / 88%) 0 13%,
    rgb(255 239 184 / 82%) 43%,
    rgb(250 218 151 / 62%) 76%,
    rgb(244 206 140 / 28%) 100%
  );
  box-shadow:
    0 0 13px rgb(255 232 172 / 38%),
    0 0 32px rgb(255 229 164 / 22%);
  filter: blur(0.35px);
}

.room-scene.scene-forest .sky-sun::after,
.room-scene.scene-beach .sky-sun::after,
.room-scene.scene-creek .sky-sun::after {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 233 171 / 17%) 0 24%,
    rgb(255 226 157 / 8%) 48%,
    transparent 72%
  );
  filter: blur(6px);
}

.room-scene.scene-forest {
  --sun-foreground-mask:
    linear-gradient(90deg, #000 0 7%, transparent 13% 87%, #000 93% 100%),
    radial-gradient(ellipse 28% 34% at 0 15%, #000 0 70%, transparent 78%),
    radial-gradient(ellipse 26% 30% at 1% 39%, #000 0 67%, transparent 75%),
    radial-gradient(ellipse 28% 34% at 100% 15%, #000 0 70%, transparent 78%),
    radial-gradient(ellipse 26% 30% at 99% 39%, #000 0 67%, transparent 75%);
}

.room-scene.scene-forest .outdoor-landscape::before {
  background-image: url("/scenes/forest-lakeside-landscape-v3.webp");
  filter: saturate(0.92) brightness(1.01);
  animation: forest-scene-breathe 26s ease-in-out infinite alternate;
}

.period-morning .room-scene.scene-forest .outdoor-landscape::before {
  filter: saturate(0.88) brightness(1.04) sepia(0.035);
}

.period-evening .room-scene.scene-forest .outdoor-landscape::before {
  filter: saturate(0.88) brightness(0.84) sepia(0.12) hue-rotate(-5deg);
}

.room-scene.scene-beach {
  --sun-foreground-mask:
    linear-gradient(90deg, #000 0 7%, transparent 13% 87%, #000 93% 100%),
    radial-gradient(ellipse 31% 25% at 0 8%, #000 0 69%, transparent 77%),
    radial-gradient(ellipse 28% 26% at 1% 29%, #000 0 65%, transparent 74%),
    radial-gradient(ellipse 31% 25% at 100% 9%, #000 0 69%, transparent 77%),
    radial-gradient(ellipse 28% 26% at 99% 31%, #000 0 65%, transparent 74%);
}

.room-scene.scene-beach .outdoor-landscape::before {
  background-image: url("/scenes/beach-cove-portrait.webp");
  filter: saturate(0.92) brightness(1.02);
  animation: beach-cove-breathe 28s ease-in-out infinite alternate;
}

.period-morning .room-scene.scene-beach .outdoor-landscape::before {
  filter: saturate(0.88) brightness(1.05) sepia(0.035);
}

.period-evening .room-scene.scene-beach .outdoor-landscape::before {
  filter: saturate(0.9) brightness(0.82) sepia(0.14) hue-rotate(-7deg);
}

/* Creek uses a continuous, image-derived alpha silhouette rather than a few
 * fixed ellipses. It follows the painted trunks, conifers and foliage across
 * the full sky, so the time-driven sun cannot slip through gaps as it moves. */
.room-scene.scene-creek {
  --sun-foreground-mask: url("/scenes/forest-creek-sun-mask-portrait.png");
}

.room-scene.scene-creek .outdoor-landscape::before {
  background-image: url("/scenes/forest-creek-portrait.webp");
  filter: saturate(0.91) brightness(1.02);
  animation: creek-breathe 29s ease-in-out infinite alternate;
}

.period-morning .room-scene.scene-creek .outdoor-landscape::before {
  filter: saturate(0.88) brightness(1.06) sepia(0.035);
}

.period-evening .room-scene.scene-creek .outdoor-landscape::before {
  filter: saturate(0.88) brightness(0.82) sepia(0.11) hue-rotate(-5deg);
}

/* Wide and phone-landscape layouts use their matching landscape paintings. */
@media (min-aspect-ratio: 43 / 20),
  (width <= 860px) and (orientation: landscape) {
  .room-scene.scene-forest,
  .room-scene.scene-beach {
    --sun-foreground-mask:
      linear-gradient(90deg, #000 0 8%, transparent 18% 82%, #000 92% 100%),
      radial-gradient(ellipse 25% 35% at 0 10%, #000 0 70%, transparent 78%),
      radial-gradient(ellipse 24% 34% at 0 36%, #000 0 67%, transparent 75%),
      radial-gradient(ellipse 25% 35% at 100% 10%, #000 0 70%, transparent 78%),
      radial-gradient(ellipse 24% 34% at 100% 36%, #000 0 67%, transparent 75%);
  }

  .room-scene.scene-creek {
    --sun-foreground-mask: url("/scenes/forest-creek-sun-mask-landscape.png");
  }

  .room-scene.scene-forest .outdoor-landscape::before {
    background-image: url("/scenes/forest-lakeside-landscape-v3.webp");
  }

  .room-scene.scene-beach .outdoor-landscape::before {
    background-image: url("/scenes/beach-cove-landscape.webp");
  }

  .room-scene.scene-creek .outdoor-landscape::before {
    background-image: url("/scenes/forest-creek-landscape.webp");
  }
}

@media (width <= 860px) {
  .room-scene.scene-forest .outdoor-landscape::before,
  .room-scene.scene-beach .outdoor-landscape::before,
  .room-scene.scene-creek .outdoor-landscape::before {
    inset: -2%;
  }

  .room-scene.scene-forest .outdoor-landscape::before {
    background-image: url("/scenes/forest-lakeside-portrait-v3.webp");
  }
}

/* Wallpaper mode always follows the 9:16 paintings. */
.time-page.wallpaper-mode .room-scene.scene-forest .outdoor-landscape::before,
.time-page.wallpaper-mode .room-scene.scene-beach .outdoor-landscape::before,
.time-page.wallpaper-mode .room-scene.scene-creek .outdoor-landscape::before {
  inset: -2%;
}

.time-page.wallpaper-mode .room-scene.scene-forest .outdoor-landscape::before {
  background-image: url("/scenes/forest-lakeside-portrait-v3.webp");
}

.time-page.wallpaper-mode .room-scene.scene-beach .outdoor-landscape::before {
  background-image: url("/scenes/beach-cove-portrait.webp");
}

.time-page.wallpaper-mode .room-scene.scene-creek .outdoor-landscape::before {
  background-image: url("/scenes/forest-creek-portrait.webp");
}

.time-page.wallpaper-mode .room-scene.scene-creek {
  --sun-foreground-mask: url("/scenes/forest-creek-sun-mask-portrait.png");
}

@media (prefers-reduced-motion: reduce) {
  .room-scene.scene-forest .outdoor-landscape::before,
  .room-scene.scene-beach .outdoor-landscape::before,
  .room-scene.scene-creek .outdoor-landscape::before {
    animation: none !important;
  }
}