/* Night Coast scene: fixed behind the page. z-order: sky < stars/clouds < lights < far/mid ridges < sea < near headlands < trees.
   Painterly pass (2026-10-31): muted, natural dusk colours; smaller sun and moon with wide soft bloom. */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky { position: absolute; inset: 0; }
.sky--dusk  { background: linear-gradient(180deg, #1C2340 0%, #33375A 20%, #5E5070 34%, #9A6A74 45%, #CC8A70 53%, #ECB084 58%, #F4CC9E 61%); }
.sky--blue  { background: linear-gradient(180deg, #0C1430 0%, #1C2850 28%, #3C4470 45%, #6C6488 55%, #9A7C8E 61%); opacity: 0; }
.sky--night { background: linear-gradient(180deg, #03050A 0%, #060A15 32%, #0B1324 50%, #16213A 61%); opacity: 0; }
.stars { position: absolute; left: 0; top: 0; width: 100%; height: var(--hz); }
.lights { position: absolute; left: 0; top: 0; width: 100%; height: var(--hz); overflow: hidden; }
.sun, .moon { position: absolute; left: 0; top: 0; will-change: transform; }
.moon { opacity: 0; }
.sun__glow {
  position: absolute; width: 90vmin; height: 90vmin; left: -45vmin; top: -45vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 160, .5) 0%, rgba(250, 170, 110, .2) 18%, rgba(240, 140, 90, .07) 40%, rgba(240, 120, 70, 0) 66%);
}
.sun__disc {
  position: absolute; width: 6.5vmin; height: 6.5vmin; left: -3.25vmin; top: -3.25vmin; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFF8EA 0%, #FFE2B4 60%, #FBC688 100%);
  box-shadow: 0 0 18px 6px rgba(255, 226, 180, .55), 0 0 70px 24px rgba(255, 180, 120, .25);
}
.moon__glow {
  position: absolute; width: 46vmin; height: 46vmin; left: -23vmin; top: -23vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 228, 240, .22) 0%, rgba(200, 212, 230, .06) 35%, rgba(200, 212, 230, 0) 65%);
}
.moon__disc {
  position: absolute; width: 5vmin; height: 5vmin; left: -2.5vmin; top: -2.5vmin; border-radius: 50%;
  /* Soft-edged maria, not cartoon craters. */
  background:
    radial-gradient(ellipse 30% 22% at 36% 38%, rgba(160, 166, 178, .32), transparent 70%),
    radial-gradient(ellipse 26% 30% at 60% 58%, rgba(160, 166, 178, .26), transparent 70%),
    radial-gradient(ellipse 18% 14% at 55% 30%, rgba(160, 166, 178, .2), transparent 70%),
    radial-gradient(circle at 46% 46%, #F4F2EA 0%, #E2E2DA 65%, #CACCC6 100%);
  box-shadow: 0 0 14px 3px rgba(226, 232, 244, .35), 0 0 60px 18px rgba(200, 214, 236, .12);
}
.horizon-glow {
  position: absolute; left: 0; right: 0; top: calc(var(--hz) - 22vh); height: 26vh;
  background: radial-gradient(70% 100% at 55% 100%, rgba(255, 190, 130, .32), rgba(255, 170, 110, 0) 72%);
}
.ridge { position: absolute; display: block; will-change: transform; }
.ridge--far    { left: -2%; width: 104%; height: 15vh; top: calc(var(--hz) - 15vh + 1px); }
.ridge--mid-l  { left: -2%; width: 48%; height: 25vh; top: calc(var(--hz) - 25vh + 2px); }
.ridge--mid-r  { right: -2%; width: 48%; height: 22vh; top: calc(var(--hz) - 22vh + 2px); }
.ridge--near-l { left: -6%; width: 42%; top: calc(var(--hz) - 38vh); height: calc(100vh - var(--hz) + 38vh + 4vh); }
.ridge--near-r { right: -6%; width: 40%; top: calc(var(--hz) - 30vh); height: calc(100vh - var(--hz) + 30vh + 4vh); }
.sea, .trees { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.z-back { z-index: 1; } .z-lights { z-index: 2; } .z-far { z-index: 3; } .z-sea { z-index: 4; } .z-near { z-index: 5; } .z-trees { z-index: 6; }
@media (max-width: 700px) {
  .ridge--near-l { width: 34%; left: -8%; }
  .ridge--near-r { width: 32%; right: -8%; }
  .ridge--mid-l, .ridge--mid-r { width: 56%; }
}