/* Original left-hand composition: alpine valley left, overlook and watchtower right. */
.cdf-world { width:min(100%,2400px); height:100%; left:50%; bottom:max(0px,calc(var(--cdf-footer-height,170px) - 90px)); mask-image:none; }
.cdf-sky { width:120%; left:-20%; top:-10%; height:76%; object-fit:fill; }
.cdf-sky,.cdf-sun-haze { translate:0 calc(var(--cdf-scroll) * .06); }
.cdf-mountains { width:100%; left:0; bottom:12%; translate:0 calc(var(--cdf-scroll) * .1); }
.cdf-valley { position:absolute; width:100%; height:auto; aspect-ratio:1942/809; left:0; bottom:0; translate:0 calc(var(--cdf-scroll) * .24); }
.cdf-lake { width:100%; inset:0; }
.cdf-water { left:35%; top:39%; width:24%; height:48%; translate:none; }
.cdf-mist { left:8%; top:40%; width:53%; height:17%; translate:none; }
.cdf-near { scale:var(--cdf-push,1); transform-origin:75% 80%; translate:0 calc(var(--cdf-scroll) * -.18); }
.cdf-overlook { position:absolute; width:78%; left:28%; bottom:-6%; aspect-ratio:1941/810; }
.cdf-rock-surface { position:absolute; inset:0; }
.cdf-rocks { width:100%; left:0; bottom:0; filter:none; mask-image:none; }
.cdf-rock-light { aspect-ratio:1941/810; mask-image:url('layers/left-day/sunlit-overlook-rounded.png'); background:radial-gradient(ellipse at 58% 30%,#ffbc6255,transparent 55%); }
/* Positions are measured against the rock PNG, independent of viewport height. */
.cdf-tower { width:21.8%; max-width:none; left:42.3%; bottom:49.5%; }
.cdf-tower-body { mask-image:none; filter:none; }
.cdf-cat { width:13%; left:65.3%; bottom:61%; filter:none; }
.cdf-tower::before,.cdf-cat::before { content:""; position:absolute; left:16%; bottom:4%; width:68%; height:3%; border-radius:50%; background:radial-gradient(ellipse,#17140ed9,transparent 70%); filter:blur(2px); }
.cdf-tower::before { left:12%; bottom:3.5%; width:76%; height:4%; background:radial-gradient(ellipse,#17140ef5 12%,#17140e80 40%,transparent 72%); }
.cdf-beacon,.cdf-beacon-canvas { left:50%; top:8%; }
.cdf-lamp-bloom { left:33%; top:52%; }
.cdf-tree img { filter:brightness(var(--tree-light,1)); }
.cdf-tree-left-near { --tree-x:-9%; --tree-width:24%; --tree-bottom:-8%; --tree-light:1; }
.cdf-tree-left-mid { --tree-x:7%; --tree-width:13%; --tree-bottom:-4%; --tree-light:.95; }
.cdf-tree-left-far { --tree-x:19%; --tree-width:8%; --tree-bottom:1%; --tree-light:.9; }
.cdf-tree-right-near { --tree-x:92%; --tree-width:18%; --tree-bottom:-6%; --tree-light:1; }
.cdf-tree-right-mid { --tree-x:88%; --tree-width:10%; --tree-bottom:2%; --tree-light:.95; }
.cdf-tree-right-far { --tree-x:54%; --tree-width:7%; --tree-bottom:1%; --tree-light:.9; }
.cdf-copy { left:max(7%,calc((100vw - 1400px)/2)); right:auto; top:15%; width:37%; max-width:530px; }
.cdf-copy :is(h1,h2) { font-size:clamp(36px,4.3vw,68px); }
.cdf-shade { background:linear-gradient(180deg,#080e1a 0%,#080e1a66 10%,transparent 28%,transparent 72%,#111c2230 100%),linear-gradient(90deg,#13294166,transparent 50%); }
.cdf-sun-haze { left:28%; top:36%; width:48%; height:35%; }
.cdf-scroll-cue { left:38%; text-shadow:0 1px 5px #172322; }
@media(max-width:760px) {
  .cdf-world { width:850px; height:520px; left:calc(50% - 145px); }
  .cdf-mountains { width:115%; left:-14%; bottom:23%; }
  .cdf-valley { width:115%; left:-14%; bottom:0; }
  .cdf-overlook { width:86%; left:22%; bottom:-3%; }
  .cdf-tower { width:19.8%; left:36%; bottom:49.5%; }
  .cdf-cat { width:11.8%; left:56.9%; bottom:61%; }
  .cdf-tree-left-near { --tree-x:25%; --tree-width:15%; --tree-bottom:-8%; }
  .cdf-tree-left-mid { --tree-x:35%; --tree-width:8%; --tree-bottom:0%; }
  .cdf-tree-left-far { --tree-x:42%; --tree-width:6%; --tree-bottom:4%; }
  .cdf-tree-right-near { --tree-x:85%; --tree-width:15%; --tree-bottom:-8%; }
  .cdf-tree-right-mid { --tree-x:82%; --tree-width:8%; --tree-bottom:2%; }
  .cdf-tree-right-far { --tree-x:78%; --tree-width:6%; --tree-bottom:3%; }
  .cdf-copy { top:78px; left:24px; right:24px; width:auto; max-width:450px; }
  .cdf-copy :is(h1,h2) { font-size:36px; }
  .cdf-sky { width:150%; left:-45%; top:0; height:76%; }
  .cdf-shade { background:linear-gradient(180deg,#080e1a 0%,#080e1ac9 18%,#213c5040 38%,transparent 55%,transparent 75%,#111c2230 100%); }
  .cdf-scroll-cue { left:30%; }
}
@media(prefers-reduced-motion:reduce) {
  .cdf-near { scale:1; }
  .cdf-world>*,.cdf-sky-field>* { translate:none; }
}

/* Two detailed sections per depth, overlapping to keep a continuous horizon. */
.cdf-terrain-pair { aspect-ratio:1942/809; }
.cdf-terrain-piece { position:absolute; bottom:0; width:58%; height:100%; object-fit:fill; max-width:none; }
.cdf-terrain-left { left:0; }
.cdf-terrain-right { right:0; }
.cdf-mountains .cdf-terrain-piece { height:86%; }
/* Match the distant waterline and hide the duplicated shore in the overlap. */
.cdf-lake .cdf-terrain-right { width:64%; bottom:-3.5%; }
.cdf-lake .cdf-terrain-left { mask-image:linear-gradient(90deg,#000 70%,transparent 90%); }

/* Resolution-independent sky and sun; only clouds need raster detail. */
.cdf-sky-gradient { position:absolute; inset:0; background:radial-gradient(ellipse at 44% 47%,#fff6bd 0%,#ffdc8580 17%,transparent 48%),linear-gradient(180deg,#16355b 0%,#427eb3 28%,#a7b7c7 43%,#f6c58f 57%,#f9b56b 72%,#8a929e 100%); }
.cdf-sun { position:absolute; left:44%; top:44%; width:clamp(38px,4vw,66px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#ffffed 50%,#fff9d9 68%,#fff0b300 73%); translate:-50% calc(var(--cdf-scroll) * .04); }
.cdf-sun::before { content:""; position:absolute; inset:-180%; border-radius:50%; background:radial-gradient(circle,#fff3ac70,transparent 68%); }
.cdf-cloud { position:absolute; height:auto; max-width:none; translate:0 calc(var(--cdf-scroll) * var(--cloud-depth,.08)); animation:cdf-cloud-drift 65s ease-in-out infinite alternate; }
.cdf-cloud-0 { width:61%; left:17%; top:3%; opacity:.55; --cloud-depth:.04; --cloud-drift:12px; animation-duration:90s; }
.cdf-cloud-1 { width:58%; left:-9%; top:28%; --cloud-depth:.09; --cloud-drift:22px; animation-delay:-22s; }
.cdf-cloud-2 { width:64%; right:-6%; top:16%; --cloud-depth:.13; --cloud-drift:-26px; animation-delay:-38s; animation-duration:78s; }
@keyframes cdf-cloud-drift { to { transform:translateX(var(--cloud-drift)); } }
@media(max-width:760px) {
  .cdf-sky-gradient { background:radial-gradient(ellipse at 60% 46%,#fff6bd 0%,#ffdc8580 17%,transparent 48%),linear-gradient(180deg,#16355b 0%,#427eb3 28%,#a7b7c7 43%,#f6c58f 57%,#f9b56b 72%,#8a929e 100%); }
  .cdf-sun { left:60%; top:43%; width:40px; }
  .cdf-cloud-0 { width:125%; left:-20%; top:12%; }
  .cdf-cloud-1 { width:130%; left:-55%; top:36%; }
  .cdf-cloud-2 { width:150%; right:-60%; top:25%; }
}
@media(prefers-reduced-motion:reduce) { .cdf-cloud { translate:none; } .cdf-sun { translate:-50% 0; } }