/* Forest lakeside scene v2
 * Keeps the existing sky, weather and dog layers while replacing the
 * temporary geometric landscape with original painterly artwork.
 */

.room-scene.scene-forest .landscape-far,
.room-scene.scene-forest .landscape-mid,
.room-scene.scene-forest .scene-tree,
.room-scene.scene-forest .meadow-path {
  display: none;
}

/* The room/beach clouds are deliberately vector-styled. Keep them out of the
 * painterly forest so the scene reads as one coherent illustration. */
.room-scene.scene-forest .cloud {
  display: none;
}

.room-scene.scene-forest .window {
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
}

.room-scene.scene-forest .window::after {
  content: "";
  z-index: 0;
  pointer-events: none;
  background-color: #91a998;
  background-image: url("/scenes/forest-lakeside-landscape-v3.webp");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  inset: -3%;
  transform: scale(1.045) translate3d(-0.35%, 0, 0);
  transform-origin: center;
  filter: saturate(0.92) brightness(1.01);
  transition: filter 1.2s ease;
  animation: forest-scene-breathe 26s ease-in-out infinite alternate;
}

@keyframes forest-scene-breathe {
  from {
    transform: scale(1.045) translate3d(-0.35%, 0.15%, 0);
  }
  to {
    transform: scale(1.075) translate3d(0.55%, -0.35%, 0);
  }
}

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

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

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

.weather-rain .room-scene.scene-forest .window::after {
  filter: saturate(0.62) brightness(0.73) contrast(0.9) hue-rotate(6deg);
}

.period-night.weather-rain .room-scene.scene-forest .window::after {
  filter: saturate(0.52) brightness(0.34) contrast(0.9) hue-rotate(10deg);
}

.room-scene.scene-forest .window::before {
  opacity: 0.42;
  background:
    radial-gradient(
      circle at var(--sun-x, 78%) var(--sun-y, 18%),
      rgb(255 239 195 / 34%) 0,
      transparent 31%
    ),
    linear-gradient(180deg, rgb(255 249 232 / 8%), transparent 56%, rgb(32 63 46 / 8%));
}

.period-evening .room-scene.scene-forest .window::before {
  opacity: 0.58;
  background:
    radial-gradient(
      circle at var(--sun-x, 78%) var(--sun-y, 18%),
      rgb(255 190 126 / 38%) 0,
      transparent 34%
    ),
    linear-gradient(180deg, rgb(90 76 101 / 8%), rgb(122 69 51 / 13%));
}

.period-night .room-scene.scene-forest .window::before {
  opacity: 0.74;
  background: linear-gradient(180deg, rgb(29 42 67 / 20%), rgb(18 39 43 / 32%));
}

.weather-rain .room-scene.scene-forest .window::before {
  opacity: 0.63;
  background: linear-gradient(180deg, rgb(64 82 94 / 23%), rgb(42 66 61 / 24%));
}

.room-scene.scene-forest::after {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgb(47 83 55 / 6%) 34%, rgb(27 58 39 / 27%) 100%);
  border-radius: 0;
  height: 34%;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: none;
}

.weather-rain .room-scene.scene-forest::after {
  background: linear-gradient(180deg, transparent 0%, rgb(38 64 54 / 10%) 32%, rgb(24 48 42 / 34%) 100%);
}

.room-scene.scene-forest .ocean-wave {
  z-index: 4;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, rgb(244 245 221 / 78%), transparent);
  border-radius: 999px;
  width: 20%;
  height: 1px;
  top: 63%;
  left: 39%;
  transform-origin: center;
  animation: forest-lake-shimmer 6.6s ease-in-out infinite;
}

.room-scene.scene-forest .wave-two {
  width: 14%;
  top: 66%;
  left: 27%;
  animation-delay: -2.1s;
  animation-duration: 7.8s;
}

.room-scene.scene-forest .wave-three {
  width: 12%;
  top: 61%;
  left: 62%;
  animation-delay: -4.4s;
  animation-duration: 8.4s;
}

@keyframes forest-lake-shimmer {
  0%,
  100% {
    opacity: 0.14;
    transform: scaleX(0.74) translateX(-6%);
  }
  50% {
    opacity: 0.48;
    transform: scaleX(1.14) translateX(6%);
  }
}

.period-morning .room-scene.scene-forest .ambient-specks,
.period-day .room-scene.scene-forest .ambient-specks,
.weather-rain .room-scene.scene-forest .ambient-specks {
  opacity: 0;
}

.period-evening .room-scene.scene-forest .ambient-specks {
  opacity: 0.62;
}

.period-night .room-scene.scene-forest .ambient-specks {
  opacity: 1;
}

@media (width <= 860px) {
  .room-scene.scene-forest .window::after {
    background-image: url("/scenes/forest-lakeside-portrait-v3.webp");
    background-position: 50% 50%;
    inset: -2%;
  }
}

@media (width <= 860px) and (orientation: landscape) {
  .room-scene.scene-forest .window::after {
    background-image: url("/scenes/forest-lakeside-landscape-v3.webp");
  }
}

.time-page.wallpaper-mode .room-scene.scene-forest .window::after {
  background-image: url("/scenes/forest-lakeside-portrait-v3.webp");
  background-position: 50% 50%;
  inset: -2%;
}

@media (prefers-reduced-motion: reduce) {
  .room-scene.scene-forest .window::after,
  .room-scene.scene-forest .ocean-wave {
    animation: none !important;
  }
}