/* Painterly beach cove scene.
 * Keeps the existing sky, weather, sun/moon and dog layers while replacing
 * the temporary geometric beach with original landscape artwork.
 */

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

/* The rounded CSS clouds belong to the original geometric scene. The new
 * background already carries its own soft atmospheric depth. */
.room-scene.scene-beach .cloud {
  display: none;
}

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

.room-scene.scene-beach .window::after {
  content: "";
  z-index: 0;
  pointer-events: none;
  background-color: #9db6b4;
  background-image: url("/scenes/beach-cove-portrait.webp");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  inset: -3%;
  transform: scale(1.045) translate3d(-0.25%, 0, 0);
  transform-origin: center;
  filter: saturate(0.92) brightness(1.02);
  transition: filter 1.2s ease;
  animation: beach-cove-breathe 28s ease-in-out infinite alternate;
}

@keyframes beach-cove-breathe {
  from {
    transform: scale(1.045) translate3d(-0.3%, 0.12%, 0);
  }
  to {
    transform: scale(1.07) translate3d(0.45%, -0.28%, 0);
  }
}

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

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

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

.weather-rain .room-scene.scene-beach .window::after {
  filter: saturate(0.58) brightness(0.7) contrast(0.92) hue-rotate(7deg);
}

.period-night.weather-rain .room-scene.scene-beach .window::after {
  filter: saturate(0.48) brightness(0.32) contrast(0.92) hue-rotate(10deg);
}

.room-scene.scene-beach .window::before {
  opacity: 0.38;
  background:
    radial-gradient(
      circle at var(--sun-x, 78%) var(--sun-y, 18%),
      rgb(255 235 190 / 30%) 0,
      transparent 30%
    ),
    linear-gradient(180deg, rgb(255 250 232 / 7%), transparent 55%, rgb(45 81 82 / 8%));
}

.period-evening .room-scene.scene-beach .window::before {
  opacity: 0.56;
  background:
    radial-gradient(
      circle at var(--sun-x, 78%) var(--sun-y, 18%),
      rgb(255 181 113 / 38%) 0,
      transparent 34%
    ),
    linear-gradient(180deg, rgb(86 73 101 / 8%), rgb(137 79 53 / 13%));
}

.period-night .room-scene.scene-beach .window::before {
  opacity: 0.72;
  background: linear-gradient(180deg, rgb(28 42 68 / 21%), rgb(20 48 58 / 31%));
}

.weather-rain .room-scene.scene-beach .window::before {
  opacity: 0.62;
  background: linear-gradient(180deg, rgb(64 82 94 / 24%), rgb(44 72 73 / 24%));
}

.room-scene.scene-beach::after {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgb(119 87 55 / 4%) 38%, rgb(73 52 35 / 20%) 100%);
  border-radius: 0;
  height: 31%;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: none;
}

.weather-rain .room-scene.scene-beach::after {
  background: linear-gradient(180deg, transparent 0%, rgb(73 77 70 / 8%) 34%, rgb(47 58 55 / 27%) 100%);
}

.room-scene.scene-beach .ocean-wave {
  z-index: 4;
  opacity: 0.34;
  border: 0;
  background: linear-gradient(90deg, transparent, rgb(255 249 226 / 82%), transparent);
  border-radius: 999px;
  height: 2px;
  transform-origin: center;
  animation: beach-cove-shimmer 6.4s ease-in-out infinite;
}

.room-scene.scene-beach .wave-one {
  width: 25%;
  top: 60%;
  bottom: auto;
  left: 11%;
}

.room-scene.scene-beach .wave-two {
  width: 31%;
  top: 63%;
  right: 7%;
  bottom: auto;
  animation-delay: -2.2s;
  animation-duration: 7.6s;
}

.room-scene.scene-beach .wave-three {
  width: 19%;
  top: 57%;
  bottom: auto;
  left: 45%;
  animation-delay: -4.4s;
  animation-duration: 8.2s;
}

@keyframes beach-cove-shimmer {
  0%,
  100% {
    opacity: 0.13;
    transform: scaleX(0.74) translateX(-5%);
  }
  50% {
    opacity: 0.48;
    transform: scaleX(1.13) translateX(5%);
  }
}

.room-scene.scene-beach .ambient-specks {
  z-index: 5;
  inset: 44% 7% 31%;
}

.room-scene.scene-beach .ambient-specks i {
  background: #fff4cf;
  width: 3px;
  height: 3px;
  box-shadow: 0 0 9px rgb(255 246 211 / 78%);
  animation: 4.4s ease-in-out infinite beach-cove-glint;
}

@keyframes beach-cove-glint {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(0.7, 0.55);
  }
  48% {
    opacity: 0.82;
    transform: scale(1.75, 0.72);
  }
}

.weather-rain .room-scene.scene-beach .ambient-specks {
  display: none;
}

/* The normal desktop layout gives the scene a tall, narrow panel even on a
 * wide screen, so the portrait composition preserves both framing trees. */
@media (min-aspect-ratio: 43 / 20) {
  .room-scene.scene-beach .window::after {
    background-image: url("/scenes/beach-cove-landscape.webp");
  }
}

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

  .room-scene.scene-beach .wave-one {
    top: 55.5%;
  }

  .room-scene.scene-beach .wave-two {
    top: 58.5%;
  }

  .room-scene.scene-beach .wave-three {
    top: 53.5%;
  }

  .room-scene.scene-beach .ambient-specks {
    inset: 49% 7% 36%;
  }
}

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

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

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