.css-cloud{
  position:absolute;
  left:-200px;
  animation:cloudMove var(--dur,22s) linear var(--delay,0s) infinite;
  transform:scale(var(--scale,1));
  transform-origin:left center;
}
.css-cloud.reverse{
  left:calc(100% + 200px);
  animation-name:cloudMoveReverse;
}
.css-cloud::before,.css-cloud::after,.css-cloud span{content:'';display:block;position:absolute;background:rgba(255,255,255,0.9);border-radius:50%;}
.css-cloud::before{width:110px;height:46px;border-radius:23px;background:rgba(255,255,255,0.92);top:18px;left:0;box-shadow:0 4px 12px rgba(0,0,0,0.12);}
.css-cloud::after{width:62px;height:62px;top:-14px;left:18px;}
/* make it a real cloud using box-model via a wrapper */
.css-cloud{width:130px;height:80px;}
.css-cloud::before{width:130px;height:42px;top:22px;left:0;border-radius:21px;}
.css-cloud::after{width:58px;height:58px;top:-8px;left:20px;}
/* third puff via inner child trick — use outline shadow approach */
.css-cloud{box-shadow:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.12));}

/* Rain weather: clouds are darker */
.sky-rain .css-cloud::before,.sky-rain .css-cloud::after,
.sky-storm .css-cloud::before,.sky-storm .css-cloud::after,
.sky-hail .css-cloud::before,.sky-hail .css-cloud::after{background:rgba(160,170,180,0.85);}

.css-cloud-sm{width:90px;height:55px;}
.css-cloud-sm::before{width:90px;height:30px;top:16px;border-radius:15px;}
.css-cloud-sm::after{width:40px;height:40px;top:-4px;left:15px;}

@keyframes cloudMove{from{left:-200px}to{left:calc(100% + 200px)}}
@keyframes cloudMoveReverse{from{left:calc(100% + 200px)}to{left:-200px}}

/* Weather FX */
.weather-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.rain-drop{position:absolute;width:2px;height:14px;background:linear-gradient(180deg,transparent,rgba(120,190,255,0.85));border-radius:1px;animation:rainFall linear infinite;}
@keyframes rainFall{from{transform:translateY(-20px) translateX(0);opacity:1}to{transform:translateY(110vh) translateX(-30px);opacity:0.4}}
.hail-drop{position:absolute;width:5px;height:5px;background:rgba(220,240,255,0.9);border-radius:50%;animation:rainFall linear infinite;}
.snow-flake{position:absolute;color:rgba(220,240,255,0.9);animation:snowFall linear infinite;}
@keyframes snowFall{from{transform:translateY(-20px) rotate(0deg);opacity:1}to{transform:translateY(110vh) rotate(360deg);opacity:0.5}}
.wind-streak{position:absolute;left:-60px;width:80px;height:2px;background:linear-gradient(90deg,transparent,rgba(200,220,255,0.5),transparent);border-radius:1px;animation:windStreakMove linear infinite;}
@keyframes windStreakMove{from{left:-80px}to{left:110%}}