/* Mountain stargazing and forest creek scenes.
 * Both scenes reuse the existing weather, clock and dog layers while their
 * painterly backdrops provide the landscape scale and atmosphere.
 */

.room-scene.scene-summit .outdoor-landscape,
.room-scene.scene-creek .outdoor-landscape {
  display: block;
}

.room-scene.scene-summit .window,
.room-scene.scene-creek .window {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  left: 0;
  box-shadow: none;
}

.room-scene.scene-summit .window-bar,
.room-scene.scene-creek .window-bar,
.room-scene.scene-summit .curtain,
.room-scene.scene-creek .curtain,
.room-scene.scene-summit .wall-print,
.room-scene.scene-creek .wall-print,
.room-scene.scene-summit .shelf,
.room-scene.scene-creek .shelf,
.room-scene.scene-summit .sofa,
.room-scene.scene-creek .sofa,
.room-scene.scene-summit .side-table,
.room-scene.scene-creek .side-table,
.room-scene.scene-summit .landscape-far,
.room-scene.scene-creek .landscape-far,
.room-scene.scene-summit .landscape-mid,
.room-scene.scene-creek .landscape-mid,
.room-scene.scene-summit .scene-tree,
.room-scene.scene-creek .scene-tree,
.room-scene.scene-summit .meadow-path,
.room-scene.scene-creek .meadow-path,
.room-scene.scene-summit .cloud,
.room-scene.scene-creek .cloud {
  display: none;
}

.room-scene.scene-summit .window::after,
.room-scene.scene-creek .window::after {
  content: "";
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  inset: -3%;
  transform-origin: center;
  transition: filter 1.2s ease;
}

/* The summit is intentionally a fixed-night special scene. Time still runs,
 * but its atmosphere remains starlit whenever the user visits it. */
.room-scene.scene-summit .window {
  background: #101c38;
}

.room-scene.scene-summit .window::after {
  background-color: #172440;
  background-image: url("/scenes/star-summit-portrait.webp");
  filter: saturate(0.94) brightness(0.94) contrast(1.02);
  animation: summit-breathe 34s ease-in-out infinite alternate;
}

@keyframes summit-breathe {
  from {
    transform: scale(1.04) translate3d(-0.3%, 0.12%, 0);
  }
  to {
    transform: scale(1.068) translate3d(0.45%, -0.25%, 0);
  }
}

.room-scene.scene-summit .window::before {
  z-index: 1;
  opacity: 0.7;
  background:
    radial-gradient(circle at 51% 26%, rgb(171 193 255 / 11%), transparent 31%),
    linear-gradient(180deg, rgb(11 18 43 / 6%), transparent 54%, rgb(7 16 31 / 18%));
}

.room-scene.scene-summit .sky-sun,
.room-scene.scene-summit .sky-moon {
  display: none;
}

.scene-summit .star-field {
  z-index: 2;
  opacity: 0.52;
}

.weather-rain .scene-summit .star-field {
  opacity: 0.09;
}

.weather-rain .room-scene.scene-summit .window::after {
  filter: saturate(0.72) brightness(0.58) contrast(0.96) hue-rotate(4deg);
}

.room-scene.scene-summit::after {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgb(9 18 35 / 5%) 34%, rgb(5 12 26 / 34%) 100%);
  border-radius: 0;
  height: 34%;
  inset: auto 0 0;
  box-shadow: none;
}

.room-scene.scene-summit .ocean-wave,
.room-scene.scene-summit .ambient-specks {
  display: none;
}

.room-scene.scene-summit .outdoor-landscape::before {
  content: "";
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(229 238 255 / 78%), white);
  border-radius: 999px;
  width: 76px;
  height: 1px;
  position: absolute;
  top: 22%;
  left: 68%;
  filter: drop-shadow(0 0 4px rgb(205 222 255 / 60%));
  transform: rotate(-22deg) translate3d(0, 0, 0);
  transform-origin: right center;
  animation: summit-meteor 15s ease-in infinite;
}

@keyframes summit-meteor {
  0%,
  82% {
    opacity: 0;
    transform: rotate(-22deg) translate3d(0, 0, 0) scaleX(0.35);
  }
  84% {
    opacity: 0.8;
  }
  89% {
    opacity: 0;
    transform: rotate(-22deg) translate3d(-150px, 58px, 0) scaleX(1);
  }
  100% {
    opacity: 0;
  }
}

.room-scene.scene-summit .dog-shadow {
  background: #10172a52;
  box-shadow: 0 0 20px #8199c92b;
}

/* The creek follows the normal time-of-day and weather system. */
.room-scene.scene-creek .window {
  background: #78938a;
}

.room-scene.scene-creek .window::after {
  background-color: #78938a;
  background-image: url("/scenes/forest-creek-portrait.webp");
  filter: saturate(0.91) brightness(1.02);
  animation: creek-breathe 29s ease-in-out infinite alternate;
}

@keyframes creek-breathe {
  from {
    transform: scale(1.04) translate3d(-0.25%, 0.1%, 0);
  }
  to {
    transform: scale(1.07) translate3d(0.4%, -0.28%, 0);
  }
}

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

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

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

.weather-rain .room-scene.scene-creek .window::after {
  filter: saturate(0.58) brightness(0.7) contrast(0.91) hue-rotate(6deg);
}

.period-night.weather-rain .room-scene.scene-creek .window::after {
  filter: saturate(0.49) brightness(0.31) contrast(0.91) hue-rotate(10deg);
}

.room-scene.scene-creek .window::before {
  z-index: 1;
  opacity: 0.43;
  background:
    radial-gradient(circle at var(--sun-x, 74%) var(--sun-y, 18%), rgb(255 237 188 / 34%) 0, transparent 30%),
    linear-gradient(180deg, rgb(255 250 229 / 7%), transparent 55%, rgb(28 66 54 / 10%));
}

.period-evening .room-scene.scene-creek .window::before {
  opacity: 0.56;
  background:
    radial-gradient(circle at var(--sun-x, 78%) var(--sun-y, 18%), rgb(255 186 116 / 35%) 0, transparent 33%),
    linear-gradient(180deg, rgb(79 72 101 / 8%), rgb(111 70 53 / 13%));
}

.period-night .room-scene.scene-creek .window::before {
  opacity: 0.7;
  background: linear-gradient(180deg, rgb(25 39 65 / 20%), rgb(17 43 42 / 32%));
}

.weather-rain .room-scene.scene-creek .window::before {
  opacity: 0.63;
  background: linear-gradient(180deg, rgb(62 80 91 / 23%), rgb(40 64 57 / 26%));
}

.room-scene.scene-creek::after {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgb(40 72 53 / 6%) 32%, rgb(20 47 35 / 28%) 100%);
  border-radius: 0;
  height: 34%;
  inset: auto 0 0;
  box-shadow: none;
}

.weather-rain .room-scene.scene-creek::after {
  background: linear-gradient(180deg, transparent 0%, rgb(36 61 53 / 10%) 30%, rgb(22 45 39 / 35%) 100%);
}

.room-scene.scene-creek .ocean-wave {
  z-index: 4;
  opacity: 0.32;
  border: 0;
  background: linear-gradient(90deg, transparent, rgb(236 247 226 / 82%), transparent);
  border-radius: 999px;
  width: 16%;
  height: 1px;
  top: 61%;
  left: 20%;
  transform-origin: center;
  animation: creek-shimmer 6.8s ease-in-out infinite;
}

.room-scene.scene-creek .wave-two {
  width: 12%;
  top: 65%;
  left: 34%;
  animation-delay: -2.2s;
  animation-duration: 7.7s;
}

.room-scene.scene-creek .wave-three {
  width: 10%;
  top: 58%;
  left: 48%;
  animation-delay: -4.4s;
  animation-duration: 8.5s;
}

@keyframes creek-shimmer {
  0%,
  100% {
    opacity: 0.12;
    transform: scaleX(0.72) translateX(-5%);
  }
  50% {
    opacity: 0.46;
    transform: scaleX(1.12) translateX(5%);
  }
}

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

.scene-creek .ambient-specks {
  z-index: 5;
  inset: 34% 5% 22%;
  transition: opacity 1.2s ease;
}

.scene-creek .ambient-specks i {
  background: #f2d889;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 4.8s ease-in-out infinite forest-firefly;
  box-shadow: 0 0 10px #f8e6a7;
}

.period-evening .scene-creek .ambient-specks {
  opacity: 0.56;
}

.period-night .scene-creek .ambient-specks {
  opacity: 0.9;
}

.room-scene.scene-creek .dog-shadow {
  background: #21382b42;
}

.time-page.wallpaper-mode.scene-summit .scene-calendar {
  color: #e6edff;
  background: rgb(18 27 52 / 66%);
  border-color: rgb(181 198 239 / 27%);
  box-shadow: 0 14px 30px rgb(3 8 24 / 24%), inset 0 1px rgb(255 255 255 / 18%);
}

.time-page.wallpaper-mode.scene-summit .scene-calendar::before,
.time-page.wallpaper-mode.scene-summit .scene-calendar::after {
  background: #a8b6da;
}

.time-page.wallpaper-mode.scene-creek .scene-calendar {
  color: #27483b;
  background: rgb(241 242 220 / 82%);
  border-color: rgb(49 87 70 / 24%);
}

/* On very wide pages the scene panel becomes wide enough to benefit from the
 * dedicated landscape paintings. The regular two-column layout stays closer
 * to portrait, so it deliberately uses the portrait composition by default. */
@media (min-aspect-ratio: 43 / 20) {
  .room-scene.scene-summit .window::after {
    background-image: url("/scenes/star-summit-landscape.webp");
  }

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

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

  .room-scene.scene-creek .window::after {
    background-image: url("/scenes/forest-creek-portrait.webp");
    background-position: 50% 50%;
    inset: -2%;
  }

  .room-scene.scene-creek .ocean-wave {
    top: 60%;
    left: 15%;
  }

  .room-scene.scene-creek .wave-two {
    top: 64%;
    left: 31%;
  }

  .room-scene.scene-creek .wave-three {
    top: 57%;
    left: 45%;
  }
}

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

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

.time-page.wallpaper-mode .room-scene.scene-summit .window,
.time-page.wallpaper-mode .room-scene.scene-creek .window {
  border: 0;
  width: 100%;
  height: 100%;
  left: 0;
}

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

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

@media (width <= 560px) {
  .scene-picker {
    max-width: calc(100% - 24px);
    top: 12px;
    right: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scene-picker::-webkit-scrollbar {
    display: none;
  }

  .scene-choice {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 9px;
    font-size: 11px;
  }
}

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