/* Salah Focus scenery: each prop stands behind the dune that owns it. */
:root { --scene-ink: #A17E52; }
.moonlit .disc-rig { opacity: calc(var(--disc-o, 1) * 0.24); }
/* The same offset crescent used by the app's Salah Focus night sky. */
.moonlit .disc::after {
  content: "";
  position: absolute;
  inset: -6% 26% 6% -26%;
  border-radius: 50%;
  background: var(--bg);
}
.landscape {
  position: absolute;
  inset: auto 0 0;
  height: clamp(180px, 29vh, 350px);
  pointer-events: none;
  --settlement-unit: clamp(0.48px, 0.055vw, 0.92px);
  --settlement-edge: clamp(15px, 2vw, 44px);
}
.landscape__layer { position: absolute; inset: 0; }
.landscape__layer--far { --sand: var(--dune1); transform: translate3d(0, var(--dfar, 0px), 0); }
.landscape__layer--mid { --sand: var(--dune2); transform: translate3d(0, var(--dmid, 0px), 0); }
.landscape__layer--near { --sand: var(--dune3); transform: translate3d(0, var(--dnear, 0px), 0); }
.landscape__sand { position: absolute; inset: 0; background: var(--sand); mask: var(--ridge) center / 100% 100% no-repeat; -webkit-mask: var(--ridge) center / 100% 100% no-repeat; }
.landscape__layer--far { --ridge: url("images/refresh-165/dunes-far.svg"); }
.landscape__layer--mid { --ridge: url("images/refresh-165/dunes-mid.svg"); }
.landscape__layer--near { --ridge: url("images/refresh-165/dunes-near.svg"); }
/* The paint continues below the viewport as the dunes move upward. */
.landscape__layer::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; right: 0; height: 120px; background: var(--sand); }
/* Every prop carries a static ridge position and a static bite, so the scene
   stands correctly with scripts disabled. scenery.js overwrites both inline
   with the exact per-width solve once it runs; these are only the fallback.
   --ground values are crest() sampled at each prop's resting x. */
.landscape__prop {
  position: absolute;
  display: block;
  top: calc(var(--ground, 0.2) * 100%);
  width: var(--prop-w);
  transform: translate(-50%, calc(-100% + var(--bite)));
  --bite: calc(var(--prop-w) * var(--bite-frac, 0));
  background: var(--scene-ink);
  mask: var(--asset) center / contain no-repeat;
  -webkit-mask: var(--asset) center / contain no-repeat;
}
.landscape__village { --asset: url("images/refresh-165/city-cluster.webp"); left: calc(100% - var(--settlement-edge) - 101 * var(--settlement-unit)); --prop-w: calc(92 * var(--settlement-unit)); --bite-frac: 0.108696; --ground: 0.067; aspect-ratio: 720 / 229; }
.landscape__small-palms { --asset: url("images/refresh-165/palms.webp"); left: calc(100% - var(--settlement-edge) - 171 * var(--settlement-unit)); --prop-w: calc(44 * var(--settlement-unit)); --bite-frac: 0.181818; --ground: 0.069; aspect-ratio: 720 / 862; }
.landscape__masjid { --asset: url("images/refresh-165/masjid.webp"); left: calc(100% - var(--settlement-edge) - 35 * var(--settlement-unit)); --prop-w: calc(70 * var(--settlement-unit)); --bite-frac: 0.342857; --ground: 0.066; aspect-ratio: 720 / 997; }
.landscape__camel { --asset: url("images/refresh-165/silhouette-sabr.webp"); left: 38%; --prop-w: clamp(22px, 2.2vw, 34px); --bite-frac: 0.105263; --ground: 0.301; aspect-ratio: 720 / 694; }
.landscape__palms { --asset: url("images/refresh-165/palms.webp"); left: 2.7%; --prop-w: clamp(44px, 5vw, 84px); --bite-frac: 0.195652; --ground: 0.478; aspect-ratio: 720 / 862; }
@media (max-width: 700px) {
  .landscape { height: clamp(145px, 22vh, 215px); }
  .landscape__palms { left: 5%; --prop-w: 42px; --ground: 0.477; }
  .landscape__camel { left: 38%; --prop-w: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .landscape__layer { transform: none; }
}