/* Outdoor weather scope and painterly moon integration v4.
 * Outdoor rain remains paused. Every outdoor scene reads the same real-time
 * moon coordinates, while duplicated foreground pixels from each scene cover
 * the moon where the original trees or ridge actually cross its path.
 */

/* Keep rain available only in the original room scene. */
.time-page:not(.scene-room) .rain-layer {
  display: none !important;
}

.time-page:not(.scene-room) .weather-control.is-fixed-clear {
  cursor: default;
}

.time-page:not(.scene-room) .weather-control.is-fixed-clear:hover {
  background: #fff9f280;
  border-color: #6545341f;
  transform: none;
}

/* One clean moon shared by all outdoor scenes. No scene-fixed offsets, clips,
 * rectangular masks or synthetic branch marks are applied to the disc. */
.room-scene.scene-forest .sky-moon,
.room-scene.scene-beach .sky-moon,
.room-scene.scene-summit .sky-moon,
.room-scene.scene-creek .sky-moon {
  z-index: 2;
  display: block;
  left: var(--moon-x, 22%);
  top: var(--moon-y, 24%);
  width: clamp(40px, 4.2vw, 52px);
  height: clamp(40px, 4.2vw, 52px);
  overflow: hidden;
  opacity: 0;
  clip-path: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 29%, rgb(255 255 235 / 88%) 0 8%, transparent 24%),
    radial-gradient(circle at 69% 65%, rgb(147 150 151 / 13%) 0 8%, transparent 9%),
    radial-gradient(circle at 48% 46%, #f5eccf 0 57%, #ded7bf 77%, #bfc2bd 100%);
  filter: none;
  transform: translate(-50%, -50%) scale(0.84);
  box-shadow:
    0 0 15px rgb(247 239 200 / 38%),
    0 0 42px rgb(209 224 214 / 18%);
  transition:
    opacity 1.2s,
    transform 1.2s,
    left 1s linear,
    top 1s linear;
}

.room-scene.scene-forest .sky-moon::before,
.room-scene.scene-beach .sky-moon::before,
.room-scene.scene-summit .sky-moon::before,
.room-scene.scene-creek .sky-moon::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 12px;
  left: 13px;
  inset: auto;
  opacity: 0.38;
  border-radius: 50%;
  background: rgb(151 151 143 / 34%);
  box-shadow: 15px 17px 0 1px rgb(151 151 143 / 17%);
}

.room-scene.scene-forest .sky-moon::after,
.room-scene.scene-beach .sky-moon::after,
.room-scene.scene-summit .sky-moon::after,
.room-scene.scene-creek .sky-moon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 11px;
  bottom: 13px;
  inset: auto 11px 13px auto;
  opacity: 0.28;
  border-radius: 50%;
  background: rgb(145 147 144 / 38%);
  box-shadow: -13px -19px 0 -1px rgb(255 255 240 / 18%);
}

.period-night .room-scene.scene-forest .sky-moon,
.period-night .room-scene.scene-beach .sky-moon,
.period-night .room-scene.scene-summit .sky-moon,
.period-night .room-scene.scene-creek .sky-moon {
  opacity: 0.76;
  transform: translate(-50%, -50%) scale(0.96);
}

/* The foreground is the scene painting itself, aligned with the animated base
 * image and revealed only through organic masks around the real framing trees.
 * It therefore covers the moon with original scene pixels rather than a fake
 * leaf-colored patch. */
.room-scene.scene-forest .outdoor-landscape::after,
.room-scene.scene-beach .outdoor-landscape::after,
.room-scene.scene-summit .outdoor-landscape::after,
.room-scene.scene-creek .outdoor-landscape::after {
  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(--moon-foreground-mask);
  mask-image: var(--moon-foreground-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Forest defaults to its landscape painting on desktop. */
.room-scene.scene-forest {
  --moon-foreground-mask:
    linear-gradient(90deg, #000 0 7%, transparent 13% 87%, #000 93% 100%),
    radial-gradient(ellipse 27% 31% at 0 13%, #000 0 70%, transparent 77%),
    radial-gradient(ellipse 24% 27% at 2% 37%, #000 0 66%, transparent 74%),
    radial-gradient(ellipse 25% 25% at 100% 12%, #000 0 70%, transparent 77%),
    radial-gradient(ellipse 24% 28% at 99% 38%, #000 0 66%, transparent 74%);
}

.room-scene.scene-forest .outdoor-landscape::after {
  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::after {
  filter: saturate(0.88) brightness(1.04) sepia(0.035);
}

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

.period-night .room-scene.scene-forest .outdoor-landscape::after {
  filter: saturate(0.68) brightness(0.45) contrast(0.94) hue-rotate(8deg);
}

/* Beach, summit and creek use their portrait compositions by default. */
.room-scene.scene-beach {
  --moon-foreground-mask:
    linear-gradient(90deg, #000 0 7%, transparent 13% 87%, #000 93% 100%),
    radial-gradient(ellipse 31% 23% at 0 7%, #000 0 68%, transparent 76%),
    radial-gradient(ellipse 27% 24% at 1% 27%, #000 0 64%, transparent 73%),
    radial-gradient(ellipse 30% 24% at 100% 9%, #000 0 69%, transparent 77%),
    radial-gradient(ellipse 28% 25% at 100% 31%, #000 0 64%, transparent 73%);
}

.room-scene.scene-beach .outdoor-landscape::after {
  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::after {
  filter: saturate(0.88) brightness(1.05) sepia(0.035);
}

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

.period-night .room-scene.scene-beach .outdoor-landscape::after {
  filter: saturate(0.64) brightness(0.42) contrast(0.96) hue-rotate(8deg);
}

.room-scene.scene-summit {
  --moon-foreground-mask:
    radial-gradient(ellipse 24% 34% at 0 64%, #000 0 64%, transparent 72%),
    radial-gradient(ellipse 23% 35% at 100% 65%, #000 0 64%, transparent 72%),
    radial-gradient(ellipse 34% 16% at 9% 76%, #000 0 70%, transparent 78%),
    radial-gradient(ellipse 34% 16% at 91% 77%, #000 0 70%, transparent 78%);
}

.room-scene.scene-summit .outdoor-landscape::after {
  background-image: url("/scenes/star-summit-portrait.webp");
  background-position: 50% 56%;
  filter: saturate(0.94) brightness(0.94) contrast(1.02);
  animation: summit-breathe 34s ease-in-out infinite alternate;
}

.room-scene.scene-creek {
  --moon-foreground-mask:
    linear-gradient(90deg, #000 0 9%, transparent 17% 83%, #000 91% 100%),
    radial-gradient(ellipse 25% 27% at 0 12%, #000 0 68%, transparent 76%),
    radial-gradient(ellipse 24% 30% at 0 38%, #000 0 66%, transparent 74%),
    radial-gradient(ellipse 24% 28% at 100% 11%, #000 0 68%, transparent 76%),
    radial-gradient(ellipse 24% 31% at 100% 39%, #000 0 66%, transparent 74%);
}

.room-scene.scene-creek .outdoor-landscape::after {
  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::after {
  filter: saturate(0.88) brightness(1.06) sepia(0.035);
}

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

.period-night .room-scene.scene-creek .outdoor-landscape::after {
  filter: saturate(0.64) brightness(0.41) contrast(0.95) hue-rotate(8deg);
}

/* Dedicated landscape artwork and masks on very wide or phone-landscape
 * layouts. All four continue to use the same --moon-x/--moon-y coordinates. */
@media (min-aspect-ratio: 43 / 20) {
  .room-scene.scene-forest,
  .room-scene.scene-beach {
    --moon-foreground-mask:
      linear-gradient(90deg, #000 0 8%, transparent 18% 82%, #000 92% 100%),
      radial-gradient(ellipse 25% 33% at 0 8%, #000 0 70%, transparent 77%),
      radial-gradient(ellipse 24% 32% at 0 34%, #000 0 66%, transparent 74%),
      radial-gradient(ellipse 25% 33% at 100% 8%, #000 0 70%, transparent 77%),
      radial-gradient(ellipse 24% 32% at 100% 35%, #000 0 66%, transparent 74%);
  }

  .room-scene.scene-summit {
    --moon-foreground-mask:
      radial-gradient(ellipse 22% 35% at 0 66%, #000 0 65%, transparent 73%),
      radial-gradient(ellipse 22% 35% at 100% 66%, #000 0 65%, transparent 73%);
  }

  .room-scene.scene-creek {
    --moon-foreground-mask:
      linear-gradient(90deg, #000 0 8%, transparent 15% 85%, #000 92% 100%),
      radial-gradient(ellipse 22% 35% at 0 16%, #000 0 68%, transparent 76%),
      radial-gradient(ellipse 21% 35% at 100% 18%, #000 0 68%, transparent 76%);
  }

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

  .room-scene.scene-summit .outdoor-landscape::after {
    background-image: url("/scenes/star-summit-landscape.webp");
    background-position: 50% 53%;
  }

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

@media (width <= 860px) {
  .room-scene.scene-forest {
    --moon-foreground-mask:
      linear-gradient(90deg, #000 0 7%, transparent 14% 86%, #000 93% 100%),
      radial-gradient(ellipse 34% 20% at 0 8%, #000 0 70%, transparent 78%),
      radial-gradient(ellipse 32% 20% at 0 28%, #000 0 68%, transparent 76%),
      radial-gradient(ellipse 30% 21% at 1% 47%, #000 0 64%, transparent 73%),
      radial-gradient(ellipse 34% 20% at 100% 9%, #000 0 70%, transparent 78%),
      radial-gradient(ellipse 32% 21% at 100% 30%, #000 0 68%, transparent 76%),
      radial-gradient(ellipse 29% 21% at 100% 48%, #000 0 64%, transparent 73%);
  }

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

  .room-scene.scene-beach .outdoor-landscape::after,
  .room-scene.scene-creek .outdoor-landscape::after {
    inset: -2%;
  }

  .room-scene.scene-summit .outdoor-landscape::after {
    inset: -2%;
    background-position: 50% 58%;
  }
}

@media (width <= 860px) and (orientation: landscape) {
  .room-scene.scene-forest,
  .room-scene.scene-beach,
  .room-scene.scene-creek {
    --moon-foreground-mask:
      linear-gradient(90deg, #000 0 8%, transparent 17% 83%, #000 92% 100%),
      radial-gradient(ellipse 25% 35% at 0 13%, #000 0 68%, transparent 76%),
      radial-gradient(ellipse 24% 35% at 100% 14%, #000 0 68%, transparent 76%);
  }

  .room-scene.scene-summit {
    --moon-foreground-mask:
      radial-gradient(ellipse 23% 36% at 0 67%, #000 0 65%, transparent 73%),
      radial-gradient(ellipse 23% 36% at 100% 67%, #000 0 65%, transparent 73%);
  }

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

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

  .room-scene.scene-summit .outdoor-landscape::after {
    background-image: url("/scenes/star-summit-landscape.webp");
    background-position: 50% 53%;
  }

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

/* Wallpaper mode always uses the dedicated 9:16 paintings, even on a
 * high-resolution 1080x1920 recording canvas. */
.time-page.wallpaper-mode .room-scene.scene-forest {
  --moon-foreground-mask:
    linear-gradient(90deg, #000 0 7%, transparent 14% 86%, #000 93% 100%),
    radial-gradient(ellipse 34% 20% at 0 8%, #000 0 70%, transparent 78%),
    radial-gradient(ellipse 32% 20% at 0 28%, #000 0 68%, transparent 76%),
    radial-gradient(ellipse 30% 21% at 1% 47%, #000 0 64%, transparent 73%),
    radial-gradient(ellipse 34% 20% at 100% 9%, #000 0 70%, transparent 78%),
    radial-gradient(ellipse 32% 21% at 100% 30%, #000 0 68%, transparent 76%),
    radial-gradient(ellipse 29% 21% at 100% 48%, #000 0 64%, transparent 73%);
}

.time-page.wallpaper-mode .room-scene.scene-forest .outdoor-landscape::after,
.time-page.wallpaper-mode .room-scene.scene-beach .outdoor-landscape::after,
.time-page.wallpaper-mode .room-scene.scene-summit .outdoor-landscape::after,
.time-page.wallpaper-mode .room-scene.scene-creek .outdoor-landscape::after {
  inset: -2%;
}

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

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

.time-page.wallpaper-mode .room-scene.scene-summit .outdoor-landscape::after {
  background-image: url("/scenes/star-summit-portrait.webp");
  background-position: 50% 58%;
}

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

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

  .room-scene.scene-forest .sky-moon,
  .room-scene.scene-beach .sky-moon,
  .room-scene.scene-summit .sky-moon,
  .room-scene.scene-creek .sky-moon {
    transition: opacity 1.2s, transform 1.2s;
  }
}