.weather-visual {
    position: relative;
    width: 280px;
    height: 180px;
    flex: 0 0 auto;
    overflow: visible;
}

.weather-stage {
    position: absolute;
    inset: 0;
    width: 280px;
    height: 180px;
    transform-origin: center;
}

.weather-visual.compact {
    width: 150px;
    height: 92px;
    overflow: visible;
    margin: 0;
}

.weather-visual.compact .weather-stage {
    transform-origin: top left;
    transform: translate(5px, 1px) scale(.50);
}

.weather-sun {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    top: 24px;
    left: 99px;
    background: radial-gradient(circle at 36% 32%, #fff6a8 0 9%, #ffd94a 42%, #ffb72c 100%);
    box-shadow: 0 0 28px rgba(255,221,78,.8), 0 0 75px rgba(255,207,64,.35);
    animation: weatherSunPulse 3.6s ease-in-out infinite;
}
.weather-sun::before,.weather-sun::after { content:""; position:absolute; inset:-18px; border:3px dashed rgba(255,229,112,.7); border-radius:50%; animation:weatherSunSpin 18s linear infinite; }
.weather-sun::after { inset:-29px; opacity:.38; animation-duration:28s; animation-direction:reverse; }
.weather-cloud { position:absolute; width:146px; height:48px; border-radius:48px; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(215,232,247,.97)); box-shadow:0 12px 22px rgba(0,41,95,.18); }
.weather-cloud::before,.weather-cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.weather-cloud::before { width:72px; height:72px; left:24px; top:-35px; }
.weather-cloud::after { width:88px; height:88px; right:15px; top:-46px; }
.weather-cloud.front { top:88px; left:62px; z-index:4; animation:weatherCloudDrift 6.2s ease-in-out infinite; }
.weather-cloud.back { top:51px; left:120px; z-index:2; opacity:.64; transform:scale(.68); animation:weatherCloudDriftBack 10s ease-in-out infinite; }
.weather-visual.is-cloudy .weather-cloud.front { background:linear-gradient(180deg,#f1f5f8,#b9c9d8); }
.weather-visual.is-thunder .weather-cloud.front { background:linear-gradient(180deg,#b9c7d3,#687d91); }
.weather-rain { position:absolute; left:83px; top:127px; width:120px; height:55px; z-index:3; overflow:visible; }
.weather-drop { position:absolute; top:-22px; width:3px; height:21px; border-radius:4px; background:linear-gradient(180deg,rgba(188,235,255,.35),#79d2ff); transform:rotate(9deg); animation:weatherRainDrop .92s linear infinite; }
.weather-drop:nth-child(1){left:7px;animation-delay:-.1s}.weather-drop:nth-child(2){left:29px;animation-delay:-.55s}.weather-drop:nth-child(3){left:51px;animation-delay:-.25s}.weather-drop:nth-child(4){left:76px;animation-delay:-.72s}.weather-drop:nth-child(5){left:99px;animation-delay:-.39s}
.weather-lightning { position:absolute; top:112px; left:126px; width:38px; height:72px; z-index:6; background:#fff36d; clip-path:polygon(46% 0,100% 0,67% 39%,100% 39%,24% 100%,43% 55%,0 55%); filter:drop-shadow(0 0 8px rgba(255,245,93,1)) drop-shadow(0 0 18px rgba(255,255,255,.92)) drop-shadow(0 0 32px rgba(255,221,64,.65)); opacity:.48; }
.weather-visual.is-thunder .weather-lightning { animation:weatherCloudDrift 6.2s ease-in-out infinite,weatherLightningPulse 2.6s ease-in-out infinite; }
.weather-stage::after { content:""; position:absolute; inset:45px 50px 5px 50px; z-index:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,220,.22),rgba(255,232,85,.08) 38%,transparent 70%); opacity:0; pointer-events:none; }
.weather-visual.is-thunder .weather-stage::after { opacity:.35; animation:weatherStormGlow 2.6s ease-in-out infinite; }
.weather-fog { position:absolute; inset:55px 24px auto 24px; z-index:5; }
.weather-fog-line { height:7px; margin:14px 0; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.82) 18%,rgba(255,255,255,.82) 82%,transparent); animation:weatherFog 5s ease-in-out infinite; }
.weather-fog-line:nth-child(2){width:84%;margin-left:8%;animation-delay:-1.7s}.weather-fog-line:nth-child(3){width:70%;margin-left:15%;animation-delay:-3.1s}
.weather-visual.is-clear .weather-cloud,.weather-visual.is-clear .weather-rain,.weather-visual.is-clear .weather-lightning,.weather-visual.is-clear .weather-fog,.weather-visual.is-partly .weather-rain,.weather-visual.is-partly .weather-lightning,.weather-visual.is-partly .weather-fog,.weather-visual.is-cloudy .weather-sun,.weather-visual.is-cloudy .weather-rain,.weather-visual.is-cloudy .weather-lightning,.weather-visual.is-cloudy .weather-fog,.weather-visual.is-rain .weather-sun,.weather-visual.is-rain .weather-lightning,.weather-visual.is-rain .weather-fog,.weather-visual.is-thunder .weather-sun,.weather-visual.is-thunder .weather-fog,.weather-visual.is-fog .weather-sun,.weather-visual.is-fog .weather-rain,.weather-visual.is-fog .weather-lightning { display:none; }
.weather-visual.is-fog .weather-cloud.front { opacity:.55; transform:scale(.88); left:66px; top:57px; }
.weather-visual.is-fog .weather-cloud.back { display:none; }

/* Compact partly-cloudy cards: lower clouds to expose the sun naturally. */
.weather-visual.compact.is-partly .weather-sun {
    width: 64px;
    height: 64px;
    top: 38px;
    left: 105px;
    box-shadow: 0 0 20px rgba(255,221,78,.72), 0 0 42px rgba(255,207,64,.26);
}
.weather-visual.compact.is-partly .weather-sun::before { inset:-13px; border-width:2px; }
.weather-visual.compact.is-partly .weather-sun::after { inset:-20px; border-width:2px; }
.weather-visual.compact.is-partly .weather-cloud.front { top:96px; left:66px; }
.weather-visual.compact.is-partly .weather-cloud.back { top:68px; left:122px; transform:scale(.58); animation:weatherCloudDriftBackCompact 10s ease-in-out infinite; }

@keyframes weatherSunPulse { 0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.07);filter:brightness(1.08)} }
@keyframes weatherSunSpin { to{transform:rotate(360deg)} }
@keyframes weatherCloudDrift { 0%,100%{transform:translateX(-8px)}50%{transform:translateX(14px)} }
@keyframes weatherCloudDriftBack { 0%,100%{transform:translateX(10px) scale(.68)}50%{transform:translateX(-17px) scale(.68)} }
@keyframes weatherCloudDriftBackCompact { 0%,100%{transform:translateX(8px) scale(.58)}50%{transform:translateX(-12px) scale(.58)} }
@keyframes weatherRainDrop { 0%{transform:translateY(-24px) translateX(-3px) rotate(9deg);opacity:0}16%{opacity:1}100%{transform:translateY(60px) translateX(8px) rotate(9deg);opacity:0} }
@keyframes weatherLightningPulse { 0%,100%{opacity:.48;filter:brightness(.95) drop-shadow(0 0 8px rgba(255,245,93,.9))}12%{opacity:1;filter:brightness(1.7) drop-shadow(0 0 16px rgba(255,245,93,1)) drop-shadow(0 0 30px rgba(255,255,255,.95))}20%{opacity:.58}31%{opacity:1;filter:brightness(1.9) drop-shadow(0 0 18px rgba(255,245,93,1)) drop-shadow(0 0 36px rgba(255,255,255,1))}43%{opacity:.52}63%{opacity:.82}74%{opacity:1;filter:brightness(1.8) drop-shadow(0 0 17px rgba(255,245,93,1)) drop-shadow(0 0 34px rgba(255,255,255,.95))}86%{opacity:.55} }
@keyframes weatherStormGlow { 0%,100%{opacity:.22;transform:scale(.94)}12%,31%,74%{opacity:.72;transform:scale(1.08)}20%,43%,86%{opacity:.28;transform:scale(.98)} }
@keyframes weatherFog { 0%,100%{transform:translateX(-10px);opacity:.58}50%{transform:translateX(10px);opacity:.95} }
@media (prefers-reduced-motion:reduce) { .weather-visual *, .weather-visual *::before, .weather-visual *::after { animation:none!important; } .weather-visual.is-thunder .weather-lightning { opacity:.9; } }