/* The living landscape's stage (www/js/landscape.js): fixed behind the page. The plain-image layers give the first
   picture (and stay where WebGL2 is missing); the canvas fades in over them once its pictures are on the GPU. The
   default positions are the game's framing for a picture at least 4:3 wide and for a phone held upright; the script
   refines them. */

.landscape {
  --ls-zenith: #4FB3F9;
  --ls-horizon: #BCE4F9;
  --ls-light: 1;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  background: var(--ls-horizon);
}
.landscape__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ls-zenith) 0%, var(--ls-horizon) 52%);
}
.landscape__layers {
  position: absolute;
  inset: 0;
  filter: brightness(var(--ls-light));
  transition: filter 0.4s;
}
.landscape__layer {
  --top: -9.6vh;
  --height: 57.8vh;
  --tile: 330vh;
  --left: calc(50vw - 2.37 * var(--tile));
  position: absolute;
  inset: 0;
}
.landscape__layer[data-landscape-layer="far"] { --top: 26.5vh; --height: 83.9vh; --tile: 366.9vh; --fill: #95B659; }
.landscape__layer[data-landscape-layer="mid"] { --top: 38.6vh; --height: 71.9vh; --tile: 297vh; --fill: #AEAE36; }
.landscape__layer[data-landscape-layer="near"] { --top: 70vh; --height: 57.8vh; --tile: 226vh; --fill: #558B2E; }
@media (max-aspect-ratio: 4/3) {
  .landscape__layer { --top: 8.5vh; --height: 38.1vh; --tile: 473vw; }
  .landscape__layer[data-landscape-layer="far"] { --top: 33.5vh; --height: 47.9vh; --tile: 456vw; }
  .landscape__layer[data-landscape-layer="mid"] { --top: 39.9vh; --height: 35vh; --tile: 315vw; }
  .landscape__layer[data-landscape-layer="near"] { --top: 52.6vh; --height: 24.7vh; --tile: 210vw; }
}
.landscape__layer img {
  position: absolute;
  top: var(--top);
  left: calc(var(--left) + var(--tile) * var(--k, 0));
  width: var(--tile);
  max-width: none;
  height: var(--height);
}
.landscape__layer img:nth-child(2) { --k: 1; transform: scaleX(-1); }
.landscape__layer img:nth-child(3) { --k: 2; }
.landscape__layer img:nth-child(4) { --k: 3; transform: scaleX(-1); }
/* The game carries a ground layer's bottom row on downwards. */
.landscape__layer:not([data-landscape-layer="clouds"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) + var(--height) - 2px);
  height: 100vh;
  background: var(--fill, transparent);
}

.landscape__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.landscape.is-gl .landscape__gl { opacity: 1; }
.landscape.is-gl .landscape__layers,
.landscape.is-gl .landscape__sky { visibility: hidden; transition: visibility 0s 0.5s; }

/* The game's post-processing darkens the corners a little. */
.landscape__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(4, 8, 30, 0.22) 100%);
}

.landscape__debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 200;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(16, 22, 58, 0.85);
  color: #fff;
  font: 600 12px/1.3 ui-monospace, Menlo, monospace;
  pointer-events: none;
}