/* The existing sky phases remain the source of light and time. */
:root { --terrain-shadow: #243e39; --terrain-surface: #42594a; --terrain-light: #62705a; --lake-surface-light: #91afb0; --lake-surface: #547e83; --lake-surface-deep: #284c5c; --lake-shore: #465b4a; }
.sky-glow { opacity: .75; }
.atmosphere::before { content: ''; position: absolute; inset: 40% -10% 22%; background: radial-gradient(ellipse at 50% 40%, #d5c6ac2b, transparent 66%); filter: blur(14px); }
.forest-ridge { background: url('../assets/woodland.svg') bottom / 100% 100% no-repeat; clip-path: none; }
.forest-ridge--far { bottom: 39%; height: 39%; opacity: .32; filter: blur(2px); transform: scaleX(-1); }
.forest-ridge--near { bottom: 34%; height: 35%; opacity: .76; }
.terrain { background: radial-gradient(ellipse at 64% 20%, #a2a17a20, transparent 45%), linear-gradient(165deg, var(--terrain-light),var(--terrain-surface) 42%,var(--terrain-shadow)); }
.terrain::after { left: 26%; bottom: -25%; width: 26%; height: 115%; border-radius: 60% 20% 70% 30%; transform: rotate(28deg); background: linear-gradient(90deg,transparent,#b8a17a12 42%,#b8a17a19 55%,transparent); }
.lake-water { border-color: #cad6bf38; box-shadow: 0 0 0 5px #283d3520,0 0 0 11px #a5a17c0a,inset 0 -20px 35px #0b303f5e,0 15px 30px #142c3240; }
.lake-water::before { background: linear-gradient(145deg,#6c7460,#354f46 65%,#263e38); }
.lake-water::after { height: 42%; left: 22%; width: 45%; background: repeating-linear-gradient(178deg,transparent 0 8px,#d3d9c925 9px 10px,transparent 12px 17px); filter: blur(1px); }
.lake-ripples { opacity: .6; }
.tree-trunk { background: url('../assets/old-tree.svg') center bottom / 100% 100% no-repeat; width: clamp(230px,31vw,470px); height: clamp(290px,53vh,580px); left: 12%; bottom: 20%; transform: none; }
.tree-trunk__core,.tree-trunk::before,.tree-trunk::after,.tree-crown { visibility: hidden; }
.shoreline-rock { background: linear-gradient(145deg,#858574,#626d62 42%,#3e514a); clip-path: polygon(2% 78%,14% 27%,42% 4%,74% 17%,95% 53%,100% 84%,64% 100%,21% 97%); }
.scene-framing { position: absolute; inset: 0; z-index: 82; pointer-events: none; background: radial-gradient(ellipse at 50% 35%,transparent 35%,#102a2926 100%); }
.scene-framing::before,.scene-framing::after { content: ''; position: absolute; bottom: -2%; width: 23%; height: 18%; opacity: .85; background: repeating-conic-gradient(from 350deg at 50% 100%,transparent 0deg 6deg,#1a3631 7deg 9deg,transparent 10deg 15deg); clip-path: polygon(0 100%,0 24%,8% 52%,14% 3%,23% 48%,35% 15%,42% 57%,51% 25%,64% 62%,74% 36%,85% 75%,100% 88%,100% 100%); }
.scene-framing::before { left: -2%; }.scene-framing::after { right: -2%; transform: scaleX(-1); }
.shore-reeds { position: absolute; left: 51%; bottom: 12%; width: min(35vw,480px); height: 5vh; z-index: 81; pointer-events: none; }
.shore-reeds i { position: absolute; left: var(--reed-x); bottom: 0; width: 16px; height: var(--reed-h); border-left: 2px solid #63725a; border-radius: 80% 0 0; transform: rotate(var(--reed-r)); }
.shore-reeds i::after { content: ''; position: absolute; left: -6px; top: 3px; width: 5px; height: 16px; border-radius: 50%; background: #615a42; }
.distant-mist { position: absolute; left: -10%; bottom: 35%; width: 120%; height: 17%; background: radial-gradient(ellipse,#c9c1ab1c,transparent 68%); z-index: 63; pointer-events: none; animation: mist-drift 50s ease-in-out infinite alternate; }
@keyframes mist-drift { to { transform: translateX(4%); opacity: .45; } }
@media (min-width:1025px) { .tree-trunk { left: 27%; transform: translateX(-50%); bottom: 20.5%; } }
@media (max-width:720px) and (orientation:portrait) { .tree-trunk { left: -4%; bottom: 25%; width: 54vw; height: 39vh; } .forest-ridge--near { height: 26%; bottom: 38%; background-size: auto 100%; } .forest-ridge--far { height: 29%; bottom: 42%; background-size: auto 100%; } .shore-reeds { left: 48%; bottom: 13%; width: 42vw; } .scene-framing::before,.scene-framing::after { width: 30%; height: 12%; } }
@media (min-width:721px) and (max-width:1024px) and (orientation:portrait) { .tree-trunk { left: 2%; bottom: 23%; width: 45vw; height: 40vh; } }
@media (max-height:520px) and (orientation:landscape) { .tree-trunk { left: 25%; bottom: 18%; width: 28vw; height: 67vh; transform: translateX(-50%); } .shore-reeds { bottom: 10%; } }
@media (prefers-reduced-motion:reduce) { .distant-mist { animation: none; } }