/* Existing watercolor atlas and landscape; separate weather dimensions, no
 * clothing, camera travel, full-screen flashes or invented astronomical arc.
 * The host may set --scene-height to fit a phone or a larger reading panel.
 */
.pw-scene{position:relative;isolation:isolate;width:100%;height:var(--scene-height,180px);overflow:hidden;contain:layout paint;border-radius:18px;background:#e6ece5;--pw-drift:0px;--pw-slant:0px;--pw-cloud-time:28s;--pw-wind-time:5s;--pw-fall-time:2.2s;--pw-fall-distance:calc(var(--scene-height,180px) + 36px)}
.pw-scene span{display:block;position:absolute;pointer-events:none}.pw-scene [hidden]{display:none!important}
.pw-sky{inset:0;background:linear-gradient(180deg,#d5ecf5 0%,#e5eee7 63%,#fff2d7 100%)}
.pw-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 18%,#fff6 0,transparent 26%),radial-gradient(ellipse at 67% 42%,#fff4 0,transparent 27%);opacity:.45}
.pw-scene[data-phase=unknown] .pw-sky{background:linear-gradient(180deg,#dde6e5,#fff5e4)}
.pw-scene[data-clouds="4"] .pw-sky,.pw-scene[data-clouds="5"] .pw-sky{background:linear-gradient(180deg,#c5d3d8,#e2e8e3 70%,#f0e9d9)}
.pw-scene[data-phase=night] .pw-sky{background:linear-gradient(180deg,#294758,#58707d 66%,#a2aaa0)}
.pw-scene[data-phase=night][data-clouds="5"] .pw-sky{background:linear-gradient(180deg,#2a3e4b,#586c74 70%,#899790)}
.pw-stars{inset:0;background:radial-gradient(circle at 16% 16%,#fff5d9b3 0 1px,transparent 2px),radial-gradient(circle at 46% 9%,#fff5d980 0 1px,transparent 2px),radial-gradient(circle at 74% 22%,#fff5d9b3 0 1.2px,transparent 2px),radial-gradient(circle at 89% 12%,#fff5d973 0 1px,transparent 2px)}
.pw-sun,.pw-cloud{background-image:url('/assets/weather-atlas.5eebfad22a1f.webp');background-repeat:no-repeat}
.pw-sun{left:65%;top:9%;width:clamp(28px,24%,64px);aspect-ratio:289/287;background-size:433.9100% 436.9338%;background-position:66.2176% 92.6577%;animation:pw-sun-breathe 24s ease-in-out infinite alternate;transform-origin:center}
.pw-cloud-field{inset:0}
.pw-cloud{width:38%;max-width:126px;aspect-ratio:292/181;background-size:429.4521% 692.8177%;background-position:97.9210% 83.9702%;clip-path:polygon(0 0,100% 0,100% 100%,79% 100%,79% 98%,64% 98%,64% 100%,31% 100%,31% 98%,14% 98%,14% 100%,0 100%);filter:brightness(1.4) saturate(.55);animation:pw-cloud-drift var(--pw-cloud-time) ease-in-out infinite alternate}
.pw-cloud-0{left:-6%;top:6%;animation-delay:-7s}.pw-cloud-1{left:34%;top:1%;animation-delay:-17s}.pw-cloud-2{left:69%;top:23%;width:27%;animation-delay:-3s}.pw-cloud-3{left:20%;top:12%;animation-delay:-11s}
/* A miniature uses two overlapping cloud bands, leaving the lower sky open
 * for precipitation and wind rather than stacking the Flutter field's nine. */
.pw-scene[data-clouds="4"] .pw-cloud,.pw-scene[data-clouds="5"] .pw-cloud{width:55%;max-width:118px}.pw-scene[data-clouds="4"] .pw-cloud-0,.pw-scene[data-clouds="5"] .pw-cloud-0{left:-13%;top:-7%}.pw-scene[data-clouds="4"] .pw-cloud-1,.pw-scene[data-clouds="5"] .pw-cloud-1{left:25%;top:-8%}.pw-scene[data-clouds="4"] .pw-cloud-2,.pw-scene[data-clouds="5"] .pw-cloud-2{left:64%;top:-2%}.pw-scene[data-clouds="4"] .pw-cloud-3,.pw-scene[data-clouds="5"] .pw-cloud-3{left:18%;top:11%;width:48%;max-width:110px}
.pw-scene[data-clouds="5"] .pw-cloud{filter:brightness(.9) saturate(.55)}.pw-scene[data-phase=night] .pw-cloud{filter:brightness(.76) saturate(.45)}
.pw-landscape{left:0;right:0;bottom:-2px;height:43%;background-image:url('/assets/landscape.4e6ef1d1d39b.webp');background-position:center bottom;background-size:auto 100%;background-repeat:repeat-x}
.pw-scene[data-phase=night] .pw-landscape{filter:brightness(.64) saturate(.62)}.pw-scene[data-available=false] .pw-landscape{filter:saturate(.55);opacity:.72}
.pw-fog{inset:0}.pw-fog-band{left:-12%;right:-12%;top:45%;height:22%;background:linear-gradient(180deg,transparent,#e4ebe6a6 45%,#e4ebe68c 65%,transparent);filter:blur(2px);animation:pw-fog-drift 22s ease-in-out infinite alternate}.pw-fog-band-back{top:64%;height:26%;opacity:.7;animation-delay:-11s}
.pw-precipitation,.pw-wind-field{inset:0;overflow:hidden}
.pw-particle{top:-18px;width:1.3px;height:12px;border-radius:70% 40% 65% 50%;background:linear-gradient(180deg,#547f9b16,#547f9bb3);opacity:.65;animation:pw-rain-fall var(--pw-fall-time) linear infinite;transform:translate3d(0,0,0)}
.pw-scene[data-phase=night] .pw-particle{background:linear-gradient(180deg,#daeaf016,#daeaf0bd)}
.pw-scene[data-amount="1"]{--pw-fall-time:2.7s}.pw-scene[data-amount="2"]{--pw-fall-time:2.3s}.pw-scene[data-amount="3"]{--pw-fall-time:1.9s}.pw-scene[data-amount="4"]{--pw-fall-time:1.5s}.pw-scene[data-amount="5"]{--pw-fall-time:1.25s}
.pw-scene[data-precipitation=snow] .pw-particle,.pw-scene[data-precipitation=mixed] .pw-particle:nth-child(odd){width:4px;height:4px;border-radius:40% 60% 45% 55%;background:#fffaf0;box-shadow:0 0 1px #94a7ac;opacity:.85;animation-name:pw-snow-fall;animation-duration:7s}
.pw-scene[data-precipitation=hail] .pw-particle{width:3px;height:3px;border-radius:50%;background:#edf5f5;box-shadow:0 0 1px #6e8797;opacity:.85}
.pw-gust{left:-32%;width:32%;height:12px;animation:pw-wind-pass var(--pw-wind-time) linear infinite;opacity:.4}.pw-wind-stroke{width:100%;height:9px;top:0;border-top:1.3px solid #7793a1;border-radius:50%}.pw-leaf{right:24%;top:7px;width:7px;height:4px;border-radius:90% 0 90% 0;background:#92a754;opacity:.75;transform:rotate(-25deg)}
.pw-scene[data-phase=night] .pw-wind-stroke{border-color:#c3d3d6}.pw-scene[data-wind="1"] .pw-leaf{display:none}.pw-gust:nth-child(3n) .pw-leaf{background:#ba914b;transform:rotate(36deg)}
.pw-gust-0{top:21%;animation-delay:-.7s}.pw-gust-1{top:68%;animation-delay:-3.7s}.pw-gust-2{top:38%;animation-delay:-1.9s}.pw-gust-3{top:80%;animation-delay:-4.5s}.pw-gust-4{top:13%;animation-delay:-2.8s}.pw-gust-5{top:57%;animation-delay:-1.2s}.pw-gust-6{top:44%;animation-delay:-4.1s}.pw-gust-7{top:73%;animation-delay:-2.3s}.pw-gust-8{top:28%;animation-delay:-3.4s}.pw-gust-9{top:87%;animation-delay:-.3s}
.pw-scene[data-wind="1"]{--pw-drift:2px;--pw-slant:6px;--pw-wind-time:7s;--pw-cloud-time:32s}.pw-scene[data-wind="2"]{--pw-drift:4px;--pw-slant:15px;--pw-wind-time:5.5s;--pw-cloud-time:26s}.pw-scene[data-wind="3"]{--pw-drift:6px;--pw-slant:28px;--pw-wind-time:4s;--pw-cloud-time:22s}.pw-scene[data-wind="4"]{--pw-drift:9px;--pw-slant:45px;--pw-wind-time:3s;--pw-cloud-time:18s}.pw-scene[data-wind="5"]{--pw-drift:12px;--pw-slant:65px;--pw-wind-time:2.3s;--pw-cloud-time:14s}
.pw-bolt{left:29%;top:27%;width:18px;height:38px;background:#ffe7a6;clip-path:polygon(53% 0,13% 53%,50% 48%,29% 100%,88% 35%,56% 40%,81% 0);filter:blur(.3px);opacity:.65;animation:pw-bolt-soften 8s ease-in-out infinite alternate}
.pw-motion-toggle{min-height:44px;max-width:100%;font:inherit;font-weight:800;color:#ba4020;border:0;border-radius:18px;background:transparent;padding:8px 12px;cursor:pointer;text-align:center}.pw-motion-toggle:hover:not(:disabled){background:#fce8cf}.pw-motion-toggle:focus-visible{outline:3px solid #123957;outline-offset:3px}.pw-motion-toggle:disabled{cursor:default;color:#536b7b;opacity:1}
@keyframes pw-sun-breathe{from{transform:rotate(-2deg) scale(.98)}to{transform:rotate(2deg) scale(1.02)}}
@keyframes pw-cloud-drift{from{transform:translateX(calc(-1 * var(--pw-drift)))}to{transform:translateX(var(--pw-drift))}}
@keyframes pw-rain-fall{from{transform:translate3d(0,-12px,0) rotate(-7deg)}to{transform:translate3d(var(--pw-slant),var(--pw-fall-distance),0) rotate(-7deg)}}
@keyframes pw-snow-fall{0%{transform:translate3d(0,-12px,0) rotate(0)}50%{transform:translate3d(calc(var(--pw-slant) * .5 + 7px),calc(var(--pw-fall-distance) * .5),0) rotate(80deg)}100%{transform:translate3d(var(--pw-slant),var(--pw-fall-distance),0) rotate(150deg)}}
@keyframes pw-wind-pass{from{transform:translateX(0)}to{transform:translateX(420%)}}
@keyframes pw-fog-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
@keyframes pw-bolt-soften{from{opacity:.5}to{opacity:.75}}
.pw-scene[data-running=false] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.pw-scene *{animation-play-state:paused!important}}

/* Fixed particle positions and phases avoid frame-to-frame flicker. */
.pw-particle-0{left:5%;animation-delay:-0.317s;opacity:0.4}
.pw-particle-1{left:42%;animation-delay:-0.890s;opacity:0.5}
.pw-particle-2{left:79%;animation-delay:-1.463s;opacity:0.6}
.pw-particle-3{left:12%;animation-delay:-2.036s;opacity:0.7}
.pw-particle-4{left:49%;animation-delay:-2.609s;opacity:0.8}
.pw-particle-5{left:86%;animation-delay:-3.182s;opacity:0.4}
.pw-particle-6{left:19%;animation-delay:-3.755s;opacity:0.5}
.pw-particle-7{left:56%;animation-delay:-4.328s;opacity:0.6}
.pw-particle-8{left:93%;animation-delay:-4.901s;opacity:0.7}
.pw-particle-9{left:26%;animation-delay:-5.474s;opacity:0.8}
.pw-particle-10{left:63%;animation-delay:-6.047s;opacity:0.4}
.pw-particle-11{left:100%;animation-delay:-6.620s;opacity:0.5}
.pw-particle-12{left:33%;animation-delay:-7.193s;opacity:0.6}
.pw-particle-13{left:70%;animation-delay:-7.766s;opacity:0.7}
.pw-particle-14{left:3%;animation-delay:-8.339s;opacity:0.8}
.pw-particle-15{left:40%;animation-delay:-8.912s;opacity:0.4}
.pw-particle-16{left:77%;animation-delay:-9.485s;opacity:0.5}
.pw-particle-17{left:10%;animation-delay:-10.058s;opacity:0.6}
.pw-particle-18{left:47%;animation-delay:-10.631s;opacity:0.7}
.pw-particle-19{left:84%;animation-delay:-11.204s;opacity:0.8}
.pw-particle-20{left:17%;animation-delay:-11.777s;opacity:0.4}
.pw-particle-21{left:54%;animation-delay:-12.350s;opacity:0.5}
.pw-particle-22{left:91%;animation-delay:-12.923s;opacity:0.6}
.pw-particle-23{left:24%;animation-delay:-13.496s;opacity:0.7}
.pw-particle-24{left:61%;animation-delay:-14.069s;opacity:0.8}
.pw-particle-25{left:98%;animation-delay:-14.642s;opacity:0.4}
.pw-particle-26{left:31%;animation-delay:-15.215s;opacity:0.5}
.pw-particle-27{left:68%;animation-delay:-15.788s;opacity:0.6}
.pw-particle-28{left:1%;animation-delay:-16.361s;opacity:0.7}
.pw-particle-29{left:38%;animation-delay:-16.934s;opacity:0.8}
.pw-particle-30{left:75%;animation-delay:-17.507s;opacity:0.4}
.pw-particle-31{left:8%;animation-delay:-18.080s;opacity:0.5}
.pw-particle-32{left:45%;animation-delay:-18.653s;opacity:0.6}
.pw-particle-33{left:82%;animation-delay:-19.226s;opacity:0.7}
.pw-particle-34{left:15%;animation-delay:-19.799s;opacity:0.8}
.pw-particle-35{left:52%;animation-delay:-20.372s;opacity:0.4}
.pw-particle-36{left:89%;animation-delay:-20.945s;opacity:0.5}
.pw-particle-37{left:22%;animation-delay:-21.518s;opacity:0.6}
.pw-particle-38{left:59%;animation-delay:-22.091s;opacity:0.7}
.pw-particle-39{left:96%;animation-delay:-22.664s;opacity:0.8}
.pw-particle-40{left:29%;animation-delay:-23.237s;opacity:0.4}
.pw-particle-41{left:66%;animation-delay:-23.810s;opacity:0.5}
.pw-particle-42{left:-1%;animation-delay:-24.383s;opacity:0.6}
.pw-particle-43{left:36%;animation-delay:-24.956s;opacity:0.7}
.pw-particle-44{left:73%;animation-delay:-25.529s;opacity:0.8}
.pw-particle-45{left:6%;animation-delay:-26.102s;opacity:0.4}

/* Wide, unframed view: preserve the entire painted landscape at 3:1.
 * The watercolor alpha and a fading sky join the illustration to the paper.
 */
.pw-scene{height:auto;aspect-ratio:3/1;border-radius:0;background:transparent;contain:layout paint;--pw-fall-distance:clamp(190px,36vw,400px)}
.pw-sky{mask-image:radial-gradient(ellipse at 50% 48%,#000 20%,#0009 50%,transparent 73%)}
.pw-landscape{left:0;right:0;bottom:0;height:auto;aspect-ratio:3/1;background-size:100% auto;background-repeat:no-repeat}
.pw-sun{left:71%;top:5%;width:12%;max-width:100px}
.pw-cloud{width:22%;max-width:210px}
.pw-cloud-0{left:8%;top:6%}.pw-cloud-1{left:40%;top:1%}.pw-cloud-2{left:73%;top:9%;width:18%}.pw-cloud-3{left:24%;top:8%}
.pw-scene[data-clouds="4"] .pw-cloud,.pw-scene[data-clouds="5"] .pw-cloud{width:25%;max-width:240px}
.pw-scene[data-clouds="4"] .pw-cloud-0,.pw-scene[data-clouds="5"] .pw-cloud-0{left:2%;top:0}
.pw-scene[data-clouds="4"] .pw-cloud-1,.pw-scene[data-clouds="5"] .pw-cloud-1{left:28%;top:2%}
.pw-scene[data-clouds="4"] .pw-cloud-2,.pw-scene[data-clouds="5"] .pw-cloud-2{left:70%;top:0}
.pw-scene[data-clouds="4"] .pw-cloud-3,.pw-scene[data-clouds="5"] .pw-cloud-3{left:48%;top:6%;width:27%;max-width:240px}
.pw-scene[data-clouds="5"] .pw-landscape{filter:brightness(.87) saturate(.7)}
.pw-scene[data-phase=night] .pw-landscape{filter:brightness(.54) saturate(.5)}
.pw-scene[data-phase=night] .pw-stars{mask-image:radial-gradient(ellipse at 50% 35%,#000 15%,transparent 73%)}
@media(max-width:600px){.pw-scene{aspect-ratio:2.15/1}.pw-cloud{width:29%}.pw-sun{width:16%;top:8%}.pw-scene[data-clouds="4"] .pw-cloud,.pw-scene[data-clouds="5"] .pw-cloud{width:31%}.pw-scene[data-clouds="4"] .pw-cloud-3,.pw-scene[data-clouds="5"] .pw-cloud-3{width:31%;top:12%}}