.room-weather{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.4s ease;z-index:0;contain:strict;border-radius:28px}
.room-weather.is-on{opacity:calc(.55 + .45 * var(--energy,.6))}

.room-weather::after{content:'';position:absolute;left:50%;top:52%;width:min(820px,98%);height:86%;border-radius:50%;filter:blur(22px);
  transform:translate(-50%,-50%) scale(calc(.96 + var(--kick,0) * .05));
  background:radial-gradient(ellipse at 50% 35%,rgb(235 241 255 / calc(var(--flash,0) * .45)),transparent 62%),
             radial-gradient(ellipse,hsl(var(--chord-hue,40) 85% 62% / calc(.07 + var(--kick,0) * .2)),transparent 70%)}
.room-weather span{position:absolute;left:var(--x);top:var(--y);display:block;animation-play-state:paused!important;will-change:transform,opacity}
.room-weather.is-on span{animation-play-state:running!important}
.room-weather::before{content:'';position:absolute;inset:0;opacity:0}


.room-weather[data-weather="rain"] span{top:-12%;width:1.5px;height:calc(26px * var(--s));background:linear-gradient(#9fc4ff00,#9fc4ffc4);animation:weather-rain calc(1.05s / var(--s)) linear var(--d) infinite}
@keyframes weather-rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,560px,0)}}


.room-weather[data-weather="neon"] span{width:calc(120px * var(--s));height:calc(120px * var(--s));margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,hsl(calc(270 + 60 * var(--s)) 90% 62% / .32),transparent 68%);animation:weather-neon var(--beat,.43s) ease-out var(--d) infinite}
.room-weather[data-weather="neon"] span:nth-child(n+7){display:none}
@keyframes weather-neon{0%{transform:scale(1.08);opacity:.9}70%,100%{transform:scale(.82);opacity:.35}}


.room-weather[data-weather="fireflies"] span{width:4px;height:4px;border-radius:50%;background:#ffe39a;box-shadow:0 0 10px 3px #ffcf6a88;animation:weather-firefly-drift calc(7s / var(--s)) ease-in-out var(--d) infinite alternate,weather-firefly-blink calc(var(--beat,.8s) * 4) ease-in-out var(--d) infinite}
.room-weather[data-weather="fireflies"] span:nth-child(n+13){display:none}
@keyframes weather-firefly-drift{from{transform:translate3d(-14px,10px,0)}to{transform:translate3d(18px,-22px,0)}}
@keyframes weather-firefly-blink{0%,100%{opacity:.15}45%{opacity:1}}


.room-weather[data-weather="storm"]::before{background:radial-gradient(ellipse at 70% 0%,#cfe0ffcc,transparent 60%);animation:weather-lightning 9s steps(1) infinite;animation-play-state:paused}
.room-weather[data-weather="storm"].is-on::before{animation-play-state:running}
.room-weather[data-weather="storm"] span{top:-12%;width:1.5px;height:calc(34px * var(--s));background:linear-gradient(#c9d6ff00,#d9e3ffe0);animation:weather-storm-rain calc(.7s / var(--s)) linear var(--d) infinite}
@keyframes weather-storm-rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-80px,560px,0)}}
@keyframes weather-lightning{0%,62%,66%,100%{opacity:0}63%{opacity:.55}64%{opacity:.1}65%{opacity:.4}}


.room-weather[data-weather="sunset"]::before{background:radial-gradient(ellipse at 50% 100%,#ff9d6b33,transparent 65%);opacity:1;animation:weather-haze calc(var(--beat,.58s) * 8) ease-in-out infinite alternate;animation-play-state:paused}
.room-weather[data-weather="sunset"].is-on::before{animation-play-state:running}
.room-weather[data-weather="sunset"] span{width:6px;height:6px;background:radial-gradient(circle,#fff3d1,#ffb57a00 70%);border-radius:50%;animation:weather-sparkle calc(var(--beat,.58s) * 6) ease-in-out var(--d) infinite}
.room-weather[data-weather="sunset"] span:nth-child(n+11){display:none}
@keyframes weather-haze{from{transform:scale(1);opacity:.6}to{transform:scale(1.08);opacity:1}}
@keyframes weather-sparkle{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1.4);opacity:.9}}

.room-weather[data-weather="none"]{display:none}
.music-room.is-motion-off .room-weather{display:none}
@media(prefers-reduced-motion:reduce){.room-weather{display:none}}