/* ═══════════════════════════════════
   SCENE — Sky, Ground, Pot, Plant
   Woli Farm · Web3 Demo
═══════════════════════════════════ */
#scene{width:100%;max-width:var(--max);position:relative;user-select:none}
#sky{width:100%;height:280px;background:#050c12;position:relative;overflow:hidden;transition:background 4s ease}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d,3s) var(--delay,0s) ease-in-out infinite}
#sun{position:absolute;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#ffe066 40%,#ffb830 100%);box-shadow:0 0 40px 20px rgba(255,200,50,.2);left:50%;transform:translateX(-50%);bottom:-80px;transition:bottom 3s ease,opacity 3s ease;opacity:0}
#moon{position:absolute;width:38px;height:38px;border-radius:50%;background:#e8e0c8;box-shadow:inset -8px -4px 0 #b8b090,0 0 20px 4px rgba(232,224,200,.12);right:55px;top:28px;opacity:1;transition:opacity 3s ease}
.cloud{position:absolute;background:rgba(255,255,255,.06);border-radius:50px;animation:drift var(--spd,40s) linear infinite;opacity:0;transition:opacity 2s}
.cloud::before,.cloud::after{content:'';position:absolute;background:rgba(255,255,255,.05);border-radius:50%}
.cloud::before{width:60%;height:140%;top:-30%;left:20%}
.cloud::after{width:40%;height:120%;top:-20%;right:10%}

#ground{width:100%;position:relative;background:linear-gradient(to bottom,var(--soil) 0%,var(--soil2) 60%,#2a1a08 100%);height:150px;overflow:visible}
#ground::before{content:'';position:absolute;top:0;left:0;right:0;height:16px;background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(76,175,120,.12),transparent)}
.grass{position:absolute;bottom:100%;width:3px;border-radius:3px 3px 0 0;transform-origin:bottom center;animation:sway var(--sw,3s) var(--sd,0s) ease-in-out infinite}

/* Soil moisture bar */
#soil-bar{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:88px;height:5px;background:rgba(0,0,0,.3);border-radius:3px;overflow:hidden}
#soil-fill{height:100%;background:linear-gradient(to right,#4a8abe,#7ef);border-radius:3px;width:0%;transition:width .8s ease}

#pot-wrap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:110px;display:flex;flex-direction:column;align-items:center}
#pot{width:86px;height:70px;background:linear-gradient(160deg,#8B4513 0%,#6B3410 50%,#4a2008 100%);clip-path:polygon(8% 0%,92% 0%,82% 100%,18% 100%);position:relative;box-shadow:inset -6px 0 16px rgba(0,0,0,.4)}
#pot::before{content:'';position:absolute;top:0;left:0;right:0;height:13px;background:#a0521a;border-radius:3px 3px 0 0}
#pot-soil{width:86px;height:16px;background:linear-gradient(to bottom,var(--soil2),var(--soil));border-radius:3px 3px 0 0}
#plant-wrap{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);width:200px;height:280px;pointer-events:none}
#plant-svg{width:200px;height:280px}
.drop{position:absolute;width:7px;height:11px;background:radial-gradient(ellipse at 30% 30%,#7ef,#2af);border-radius:50% 50% 50% 50%/40% 40% 60% 60%;opacity:0;animation:fall .8s ease-in forwards}
.fert-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:#4caf78;opacity:0;animation:fertPop .9s ease-out forwards}
.woli-mark{position:absolute;bottom:6px;right:8px;font-family:var(--font-m);font-size:.5rem;color:rgba(76,175,120,.2);letter-spacing:.08em;pointer-events:none}