/* Landscape study; the production scene remains in scene.css. */
:root { --landscape-height: clamp(230px, 34vh, 310px); }
.landscape-sky, .landscape-hills, .landscape-clouds {
  position: absolute;
  inset: auto 0 0;
  height: var(--landscape-height);
  pointer-events: none;
}
.landscape-sky {
  --sky-feather: clamp(180px, 26vh, 300px);
  z-index: 0;
  height: calc(var(--landscape-height) + var(--sky-feather) * .4);
  /* Ease both ends of the fade; only the sky extends upward. */
  background: linear-gradient(to bottom,
    rgb(198 227 251 / 0) 0,
    rgb(198 227 251 / .016) calc(var(--sky-feather) * .125),
    rgb(198 227 251 / .104) calc(var(--sky-feather) * .25),
    rgb(198 227 251 / .275) calc(var(--sky-feather) * .375),
    rgb(198 227 251 / .5) calc(var(--sky-feather) * .5),
    rgb(198 227 251 / .725) calc(var(--sky-feather) * .625),
    rgb(198 227 251 / .896) calc(var(--sky-feather) * .75),
    rgb(198 227 251 / .984) calc(var(--sky-feather) * .875),
    #c6e3fb var(--sky-feather));
}
.landscape-hills {
  z-index: 2;
  background: url('./grass/hills-sky-matched.png') center bottom / cover no-repeat;
  filter: brightness(.93);
  image-rendering: pixelated;
}
.landscape-clouds {
  z-index: 1;
  /* Keep every cloud above the tallest part of the rendered panorama. */
  --hill-height: calc(max(33.333vw, var(--landscape-height)) * .4);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 25%);
}
.grass-strip { z-index: 3; }
.landscape-cloud {
  position: absolute;
  left: calc(-1 * var(--cloud-width));
  bottom: calc(var(--hill-height) + (var(--landscape-height) - var(--hill-height)) * var(--cloud-level));
  width: var(--cloud-width);
  opacity: var(--cloud-opacity);
  animation: cloud-drift var(--cloud-duration) linear infinite;
  animation-delay: calc(var(--cloud-duration) * -1 * var(--cloud-phase));
}
.landscape-cloud img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform: scaleX(var(--cloud-flip, 1));
}
.landscape-cloud:nth-child(1) { --cloud-width: 100px; --cloud-duration: 360s; --cloud-phase: .15; --cloud-level: .12; --cloud-opacity: .9; }
.landscape-cloud:nth-child(2) { --cloud-width: 132px; --cloud-duration: 420s; --cloud-phase: .33; --cloud-level: .36; --cloud-opacity: .82; --cloud-flip: -1; }
.landscape-cloud:nth-child(3) { --cloud-width: 90px; --cloud-duration: 480s; --cloud-phase: .53; --cloud-level: .06; --cloud-opacity: .75; }
.landscape-cloud:nth-child(4) { --cloud-width: 156px; --cloud-duration: 390s; --cloud-phase: .74; --cloud-level: .22; --cloud-opacity: .88; }
.landscape-cloud:nth-child(5) { --cloud-width: 76px; --cloud-duration: 450s; --cloud-phase: .91; --cloud-level: .4; --cloud-opacity: .78; --cloud-flip: -1; }
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + var(--cloud-width))); }
}
:root[data-sky-paused] .landscape-cloud { animation-play-state: paused; }
:root[data-landscape='current'] .landscape-sky,
:root[data-landscape='current'] .landscape-clouds,
:root:not([data-landscape='hills']) .landscape-hills,
:root[data-landscape='hills'] .grass-strip { display: none; }
.landscape-picker {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 80;
  display: flex;
  gap: 3px;
  padding: 6px;
  border: 1px solid #deded8;
  border-radius: 14px;
  background: #fffffff5;
  box-shadow: 0 3px 16px #27251f08;
  font: 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.landscape-choice {
  appearance: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: transparent;
  color: #777671;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.landscape-choice[aria-pressed='true'] { color: #304c27; background: #eaf0e4; }
.landscape-choice:hover { color: #26251f; }
.landscape-choice:focus-visible { outline: 2px solid #667c54; outline-offset: 2px; }
@media (min-width: 1800px) {
  :root { --landscape-height: clamp(310px, 17.5vw, 450px); }
}
@media (max-width: 1050px) {
  .landscape-picker { position: relative; top: auto; right: auto; width: fit-content; margin: 0 var(--gutter, 24px) 24px; }
}
@media (max-width: 479px) {
  :root { --landscape-height: 230px; }
  .landscape-picker { max-width: calc(100% - 2 * var(--gutter, 24px)); flex-wrap: wrap; }
  .landscape-cloud:nth-child(2), .landscape-cloud:nth-child(4) { display: none; }
  .landscape-cloud:nth-child(1) { --cloud-phase: .23; }
  .landscape-cloud:nth-child(3) { --cloud-phase: .54; --cloud-level: .32; }
  .landscape-cloud:nth-child(5) { --cloud-phase: .83; }
}
@media (prefers-reduced-motion: reduce) {
  .landscape-cloud {
    animation: none;
    transform: translateX(calc((100vw + var(--cloud-width)) * var(--cloud-phase)));
  }
}
@media print { .landscape-picker { display: none; } }