.living-layers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.water-line{position:absolute;left:8%;right:6%;bottom:5%;height:3%;border-radius:50%;background:linear-gradient(90deg,#7ddac8a1,#b5f3e5c0,#5ec0cd9e);box-shadow:0 0 18px #7bcde7,0 5px 11px #092a36a1;animation:waterFlow 5s ease-in-out infinite}
.water-line.low{height:1.6%;opacity:.6}
.water-line.dry{height:1%;background:#b9a17b;box-shadow:none;opacity:.55}
.field{position:absolute;left:24%;bottom:8%;width:46%;height:13%;display:flex;align-items:end;justify-content:space-around;transform:skewX(-12deg)}
.field i{display:block;width:2px;height:calc(17px + var(--n)*2px);background:#e5cf80;transform-origin:bottom;box-shadow:2px -7px 0 -1px #f0d48c,-3px -10px 0 -1px #d1b56d;animation:sway 3s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-270ms)}
.field.thin i{height:13px;background:#adab77;opacity:.65}
.field.starved i{height:6px;background:#77644e;opacity:.5}
.grove i{position:absolute;left:calc(8% + var(--n)*12%);bottom:calc(10% + var(--n)*1%);width:15px;height:27px;border-radius:55% 55% 38% 38%;background:#548469;box-shadow:inset -4px -3px 0 #2b5948,0 4px 4px #0006;animation:sway 4s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-200ms)}
.grove i:after{content:'';position:absolute;left:7px;top:25px;width:2px;height:12px;background:#725341}
.people i{position:absolute;left:calc(16% + var(--n)*8%);bottom:calc(7% + (var(--n)*3%));height:14px;width:8px;border-radius:45% 45% 20% 20%;background:var(--color);box-shadow:0 5px 4px #0007;animation:personWalk 5s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-420ms)}
.people i:before{content:'';position:absolute;width:8px;height:8px;left:0;top:-6px;border-radius:50%;background:#d6b997}
.people.weary i{opacity:.55;transform:rotate(12deg)}
.people.afraid i{animation-duration:1.4s}
.people.free i:nth-child(2n){transform:rotate(-11deg)}
.observatory,.watchtower,.workshop{position:absolute;bottom:25%;font-size:28px;text-shadow:0 0 15px #fff}
.observatory{right:19%;color:#e8dbb3}
.watchtower{left:17%;color:#a6a7af}
.workshop{right:31%;bottom:19%;color:#edd18e}
.scene-cue{position:absolute;inset:0;display:grid;place-items:center;animation:cueFade 3.5s ease-out forwards}
.scene-cue span{font-size:clamp(90px,18vw,260px);color:#ffefa7;text-shadow:0 0 30px #fff,0 0 80px #f7d47d;animation:cueRise 2.7s ease-out forwards}
.scene-cue.build span{color:#b1eedf;text-shadow:0 0 35px #b1eedf}
.scene-cue.change span{color:#c8eabd}
.scene-cue.watch span{color:#d7e8ed}
@keyframes sway{to{transform:rotate(13deg)}}
@keyframes waterFlow{50%{transform:translateX(2%);opacity:.65}}
@keyframes personWalk{to{transform:translateX(15px)}}
@keyframes cueFade{0%,55%{opacity:.95}100%{opacity:0}}
@keyframes cueRise{from{transform:scale(.3) translateY(70px)}to{transform:scale(1.2) translateY(-30px)}}
@media(prefers-reduced-motion:reduce){.living-layers *{animation:none!important}}