/* Contained in the existing Home scene box. No page background or layout changes. */
/* Clip decorative hills without making the Home card a hidden scroll container.
   Focusing a lower mood control must not scroll its animal out of the card. */
.sky:has(.animal-weather) {overflow:clip}
.animal-weather {position:relative;isolation:isolate;overflow:hidden;background:#f4eedf;--grade:none;--wash:transparent;--light:none;--cloud:0;--mist:0;--rain:0;--wind:0}
.mood-scene .animal-weather .weather-art {display:block;object-fit:contain;filter:var(--grade);animation:none}
.weather-atmosphere,.weather-atmosphere>span {position:absolute;inset:0;pointer-events:none}
.weather-atmosphere {background:var(--wash);overflow:hidden}
.weather-light {background:var(--light);mix-blend-mode:screen}
.weather-clouds {opacity:var(--cloud);background:radial-gradient(ellipse at 15% -12%,#283745 5%,transparent 63%),radial-gradient(ellipse at 75% -20%,#3d4d60 10%,transparent 60%);height:60%}
.weather-mist {opacity:var(--mist);background:linear-gradient(174deg,transparent 23%,#dde5dd77 32%,transparent 45%,#dde5dd66 64%,transparent 81%);animation:weather-mist-drift 18s ease-in-out infinite alternate}
.weather-moon {display:none;background:radial-gradient(circle at 82% 15%,#f4e8ce 0 2%,#e3d5b755 2.4%,transparent 12%)}
.weather-marks svg {width:100%;height:100%;display:block}
.weather-rain {opacity:var(--rain);animation:weather-rain-fall 1.7s linear infinite}
.weather-wind {opacity:var(--wind);stroke-width:1;animation:weather-wind-pass 9s ease-in-out infinite}
.weather-ripples {opacity:0}
.mood-scene>figcaption {z-index:2}
.animal-weather[data-weather=none] {--light:radial-gradient(ellipse at 75% 5%,#f4c89526,transparent 65%)}
.animal-weather[data-weather=bright] {--grade:saturate(1.08) brightness(1.03);--light:radial-gradient(circle at 78% 12%,#fff7c899 0,transparent 24%),conic-gradient(from 110deg at 80% 0%,transparent 0 19deg,#ffdfa833 20deg 26deg,transparent 27deg 40deg,#ffe0a033 41deg 50deg,transparent 51deg);--wash:#e8ba5310}
.animal-weather[data-weather=calm] {--grade:saturate(.82);--light:linear-gradient(#b5dfeb29,transparent 65%);--wash:#77c4d00e}
.animal-weather[data-weather=tender] {--grade:saturate(.78);--light:radial-gradient(ellipse at 12% 15%,#e9aca75c,transparent 76%);--wash:#df98a31c;--mist:.18}
.animal-weather[data-weather=restless] {--grade:saturate(.74) brightness(.96);--cloud:.32;--wind:.7;--mist:.18}
.animal-weather[data-weather=stretched] {--grade:saturate(.48) brightness(.7);--wash:#3b485d26;--cloud:.85;--wind:.8;--mist:.25}
.animal-weather[data-weather=heavy] {--grade:saturate(.38) brightness(.8);--wash:#29476532;--cloud:.65;--rain:.75;--mist:.18}
.animal-weather[data-weather=tired] {--grade:saturate(.45) brightness(.66);--wash:#26345042;--light:radial-gradient(ellipse at 80% 5%,#b2bac13b,transparent 80%)}
.animal-weather[data-weather=tired] .weather-moon {display:block}
.animal-weather[data-weather=anxious] {--grade:saturate(.45) brightness(.85);--wash:#8c97ad25;--cloud:.38;--mist:.83}
.animal-weather[data-weather=frustrated] {--grade:saturate(.75) brightness(.87);--wash:#ac5c382d;--light:linear-gradient(130deg,#dca26733,transparent 70%);--wind:.7;--cloud:.28}
.animal-weather[data-weather=lonely] {--grade:saturate(.4) brightness(.76);--wash:#39588230;--mist:.32;--light:linear-gradient(#798caf20,transparent 70%)}
.animal-weather[data-weather=hopeful] {--grade:saturate(.8) brightness(.96);--cloud:.2;--rain:.18;--light:radial-gradient(ellipse at 75% 0%,#fff3b688,transparent 52%),conic-gradient(from 125deg at 78% -5%,transparent 0deg 10deg,#f3d79755 11deg 22deg,transparent 23deg 35deg,#edd8a32c 36deg 44deg,transparent 45deg)}
.animal-weather[data-weather=content] {--grade:saturate(.86);--wash:#bb842214;--light:radial-gradient(ellipse at 100% 15%,#f1cb7655,transparent 75%)}
/* Aquatic subjects experience weather as surface light and currents. */
.animal-weather[data-habitat=water] .weather-clouds,.animal-weather[data-habitat=water] .weather-moon,.animal-weather[data-habitat=water] .weather-rain {display:none}
.animal-weather[data-habitat=water] .weather-wind {stroke:#b6e0de;stroke-width:2;filter:blur(2px)}
.animal-weather[data-habitat=water] .weather-light {background:var(--light),repeating-linear-gradient(103deg,transparent 0 12%,#badfdb1a 14% 17%,transparent 19% 35%)}
.animal-weather[data-habitat=water][data-weather=heavy] .weather-ripples,.animal-weather[data-habitat=water][data-weather=hopeful] .weather-ripples {opacity:.7;animation:weather-surface 7s ease-in-out infinite alternate}
@keyframes weather-rain-fall {from{transform:translate(6px,-20px)}to{transform:translate(-6px,20px)}}
@keyframes weather-wind-pass {0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
@keyframes weather-mist-drift {from{transform:translate(-2%,-2%)}to{transform:translate(2%,3%)}}
@keyframes weather-surface {from{transform:translateY(-2px) scaleX(.98)}to{transform:translateY(2px) scaleX(1.03)}}
@media(prefers-reduced-motion:reduce) {.animal-weather *{animation:none!important;transition:none!important}}

/* Separate subject and transparent-sky terrain: the actual sky changes behind
   the tree line, while ground and fur receive independent environmental light. */
.separated-weather {aspect-ratio:4/3;--sky-top:#7eabb8;--sky-base:#e8dfbf;--terrain-grade:saturate(.85);--fur-grade:saturate(.88);--cloud-tint:#fff7e9;--sky-clouds:.4;--sun:1;--stars:0}
.scene-sky,.scene-front-weather {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-sky {background:linear-gradient(var(--sky-top),var(--sky-base));transition:background .4s}
.scene-sky>span,.scene-front-weather>span {position:absolute;inset:0}
.scene-cloud-bank {opacity:var(--sky-clouds);background:radial-gradient(ellipse at 15% 16%,var(--cloud-tint) 0 5%,transparent 17%),radial-gradient(ellipse at 51% 6%,var(--cloud-tint) 0 12%,transparent 27%),radial-gradient(ellipse at 90% 24%,var(--cloud-tint) 0 8%,transparent 23%);filter:blur(4px);animation:weather-mist-drift 22s ease-in-out infinite alternate}
.scene-daylight {opacity:var(--sun);background:radial-gradient(circle at 83% 18%,#fff1c9 0 3.2%,#f4d49d55 3.7%,transparent 24%)}
.scene-stars {opacity:var(--stars);background:radial-gradient(circle at 49% 10%,#efe9c7 0 .6px,transparent 1.3px),radial-gradient(circle at 60% 24%,#efe9c7 0 .9px,transparent 1.4px),radial-gradient(circle at 91% 7%,#efe9c7 0 .7px,transparent 1.4px),radial-gradient(circle at 73% 5%,#efe9c7 0 .6px,transparent 1.3px)}
.mood-scene .separated-weather img {position:absolute;display:block;height:auto;aspect-ratio:auto;animation:none;background:none;object-fit:contain}
.mood-scene .separated-weather .scene-terrain {inset:0;width:100%;height:100%;object-fit:cover;filter:var(--terrain-grade)}
.mood-scene .separated-weather .scene-subject {width:88%;height:84%;left:6%;bottom:4%;object-fit:contain;object-position:center bottom;filter:var(--fur-grade);z-index:1}
.scene-contact-shadow {position:absolute;left:22%;right:13%;bottom:7%;height:7%;border-radius:50%;background:#172b20;opacity:.2;filter:blur(7px)}
.scene-front-weather {z-index:2}
.separated-weather[data-weather=bright] {--sky-top:#68bed6;--sky-base:#f4e8b4;--sky-clouds:.3;--terrain-grade:saturate(.92) brightness(1.04);--fur-grade:saturate(.94) brightness(1.04)}
.separated-weather[data-weather=calm] {--sky-top:#a1c7ce;--sky-base:#e2e9d9;--sky-clouds:.23;--sun:.2;--terrain-grade:saturate(.72);--fur-grade:saturate(.82)}
.separated-weather[data-weather=tender] {--sky-top:#cba5b4;--sky-base:#f2d9ca;--sky-clouds:.55;--sun:.4;--terrain-grade:saturate(.7) sepia(.14);--fur-grade:saturate(.8) sepia(.08)}
.separated-weather[data-weather=restless] {--sky-top:#7b9c9e;--sky-base:#d3d3b7;--sky-clouds:.7;--sun:.12;--terrain-grade:saturate(.65) brightness(.92);--fur-grade:saturate(.8) brightness(.96)}
.separated-weather[data-weather=stretched] {--sky-top:#485b70;--sky-base:#9eacaf;--cloud-tint:#354557;--sky-clouds:.95;--sun:0;--terrain-grade:saturate(.5) brightness(.72);--fur-grade:saturate(.65) brightness(.85)}
.separated-weather[data-weather=heavy] {--sky-top:#50697f;--sky-base:#9cabb3;--cloud-tint:#3b5066;--sky-clouds:.9;--sun:0;--terrain-grade:saturate(.4) brightness(.74);--fur-grade:saturate(.55) brightness(.87)}
.separated-weather[data-weather=tired] {--sky-top:#182942;--sky-base:#54677e;--cloud-tint:#8090a4;--sky-clouds:.18;--sun:.85;--stars:1;--terrain-grade:saturate(.3) brightness(.48);--fur-grade:saturate(.38) brightness(.7)}
.separated-weather[data-weather=tired] .scene-daylight {background:radial-gradient(circle at 83% 18%,#efe6ce 0 2.4%,#b7c7dc22 3.2%,transparent 18%)}
.separated-weather[data-weather=anxious] {--sky-top:#99a6ae;--sky-base:#d8ded8;--sky-clouds:.75;--sun:0;--terrain-grade:saturate(.4) brightness(.86);--fur-grade:saturate(.64) brightness(.93)}
.separated-weather[data-weather=frustrated] {--sky-top:#b57c6b;--sky-base:#e7b583;--cloud-tint:#9c6e63;--sky-clouds:.55;--sun:.45;--terrain-grade:saturate(.7) sepia(.2) brightness(.92);--fur-grade:saturate(.85) sepia(.15)}
.separated-weather[data-weather=lonely] {--sky-top:#435677;--sky-base:#b8a9ba;--sky-clouds:.3;--sun:0;--stars:.35;--terrain-grade:saturate(.4) brightness(.62);--fur-grade:saturate(.6) brightness(.8)}
.separated-weather[data-weather=hopeful] {--sky-top:#7f9fae;--sky-base:#efe0b2;--sky-clouds:.55;--sun:.9;--terrain-grade:saturate(.8) brightness(.96);--fur-grade:saturate(.9)}
.separated-weather[data-weather=content] {--sky-top:#c4b991;--sky-base:#f3d59c;--sky-clouds:.3;--sun:.7;--terrain-grade:saturate(.8) sepia(.16);--fur-grade:saturate(.88) sepia(.12)}
.separated-weather[data-placement=air] .scene-subject,.separated-weather[data-placement=swim] .scene-subject {bottom:14%;height:76%;object-position:center}
.separated-weather[data-placement=perch] .scene-subject {bottom:8%;height:84%}
.separated-weather[data-placement=air] .scene-contact-shadow,.separated-weather[data-placement=swim] .scene-contact-shadow,.separated-weather[data-placement=perch] .scene-contact-shadow {display:none}
.separated-weather[data-placement=surface] .scene-contact-shadow {bottom:19%;height:3%;background:#d5e7d8;opacity:.5;filter:blur(2px)}
.separated-weather[data-placement=surface] .scene-subject {bottom:15%;height:74%}
.scene-water-light {display:none}
/* Submerged scenes change water light/current, never display sky objects. */
.separated-weather[data-habitat=water] {--sky-top:#75b9ba;--sky-base:#295c6d;--terrain-grade:saturate(.75);--fur-grade:saturate(.85);--water-beams:.28}
.separated-weather[data-habitat=water] .scene-cloud-bank,.separated-weather[data-habitat=water] .scene-daylight,.separated-weather[data-habitat=water] .scene-stars {display:none}
.separated-weather[data-habitat=water] .scene-water-light {display:block;opacity:var(--water-beams);background:conic-gradient(from 165deg at 35% -10%,transparent 0 7deg,#edf6db 9deg 14deg,transparent 18deg 26deg,#e5f2da 28deg 31deg,transparent 35deg),linear-gradient(180deg,#bde0d666,transparent 60%);animation:weather-mist-drift 20s ease-in-out infinite alternate}
.separated-weather[data-habitat=water][data-weather=bright] {--sky-top:#83d3ce;--sky-base:#2b7284;--water-beams:.45;--fur-grade:saturate(.94) brightness(1.04)}
.separated-weather[data-habitat=water][data-weather=calm] {--sky-top:#88bfc6;--sky-base:#416c7f;--water-beams:.18}
.separated-weather[data-habitat=water][data-weather=tender] {--sky-top:#b0bfc5;--sky-base:#5e7182;--water-beams:.22}
.separated-weather[data-habitat=water][data-weather=restless] {--sky-top:#7fabae;--sky-base:#30596e;--water-beams:.2;--terrain-grade:saturate(.65) brightness(.9)}
.separated-weather[data-habitat=water][data-weather=stretched] {--sky-top:#526f7e;--sky-base:#213c58;--water-beams:.07;--terrain-grade:saturate(.5) brightness(.75);--fur-grade:saturate(.7) brightness(.88)}
.separated-weather[data-habitat=water][data-weather=heavy] {--sky-top:#6b8b9b;--sky-base:#28485e;--water-beams:.1;--terrain-grade:saturate(.55) brightness(.8);--fur-grade:saturate(.7) brightness(.9)}
.separated-weather[data-habitat=water][data-weather=tired] {--sky-top:#283c57;--sky-base:#13263f;--water-beams:.06;--terrain-grade:saturate(.4) brightness(.5);--fur-grade:saturate(.6) brightness(.78)}
.separated-weather[data-habitat=water][data-weather=anxious] {--sky-top:#8daeb2;--sky-base:#4b697b;--water-beams:.12;--terrain-grade:saturate(.5) brightness(.84);--fur-grade:saturate(.7) brightness(.95)}
.separated-weather[data-habitat=water][data-weather=frustrated] {--sky-top:#b4a68f;--sky-base:#426778;--water-beams:.3}
.separated-weather[data-habitat=water][data-weather=lonely] {--sky-top:#596b8d;--sky-base:#263e61;--water-beams:.12;--terrain-grade:saturate(.5) brightness(.65);--fur-grade:saturate(.6) brightness(.82)}
.separated-weather[data-habitat=water][data-weather=hopeful] {--sky-top:#9bc8c4;--sky-base:#396b7a;--water-beams:.5}
.separated-weather[data-habitat=water][data-weather=content] {--sky-top:#b8c5a5;--sky-base:#52776f;--water-beams:.3}
.separated-weather[data-habitat=water][data-environment=deep-ocean] {--sky-top:#293950;--sky-base:#101c30;--water-beams:0;--depth-light:1}
.separated-weather[data-environment=deep-ocean] .scene-sky {filter:brightness(var(--depth-light))}
.separated-weather[data-environment=deep-ocean][data-weather=bright] {--depth-light:1.5}
.separated-weather[data-environment=deep-ocean][data-weather=tender] {--depth-light:1.2}
.separated-weather[data-environment=deep-ocean][data-weather=stretched] {--depth-light:.8}
.separated-weather[data-environment=deep-ocean][data-weather=heavy] {--depth-light:.85}
.separated-weather[data-environment=deep-ocean][data-weather=tired] {--depth-light:.65}
.separated-weather[data-environment=deep-ocean][data-weather=lonely] {--depth-light:.75}
.separated-weather[data-environment=deep-ocean][data-weather=hopeful] {--depth-light:1.3}
.separated-weather[data-environment=deep-ocean][data-weather=content] {--depth-light:1.1}
.separated-weather[data-environment=deep-ocean] .scene-water-light,.separated-weather[data-environment=deep-ocean] .weather-ripples {display:none}
@media(max-width:860px) {.separated-weather{aspect-ratio:16/9}.mood-scene .separated-weather .scene-subject{width:84%;left:8%;height:86%}.separated-weather[data-placement=air] .scene-subject,.separated-weather[data-placement=swim] .scene-subject{height:78%}}