/* Data-driven decoration stays behind text and never changes the card dimensions. */
.reassurance-tile::before{content:none}
.condition-art{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;user-select:none;opacity:.27}
.condition-art i{position:absolute;display:block}
.condition-art .sun{width:88px;height:88px;left:calc(50% - 44px);top:calc(50% - 44px);border-radius:50%;background:#e9aa16;box-shadow:0 0 0 13px #edb63040,0 0 0 26px #edb63025;animation:condition-sun 7s ease-in-out infinite}
.condition-art .sun::before{content:"";position:absolute;inset:-26px;background:repeating-conic-gradient(from 0deg,#d69912 0deg 5deg,transparent 5deg 30deg);border-radius:50%;mask:radial-gradient(circle,transparent 48%,#000 49%,#000 61%,transparent 62%);animation:condition-turn 45s linear infinite}
.condition-art .cloud{width:144px;height:44px;left:calc(50% - 72px);top:38%;background:#6d94ae;border-radius:35px;animation:condition-drift 8s ease-in-out infinite alternate}
.condition-art .cloud::before,.condition-art .cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.condition-art .cloud::before{width:61px;height:61px;left:24px;top:-29px}
.condition-art .cloud::after{width:78px;height:78px;right:20px;top:-40px}
.condition-art[data-condition="sun"] .cloud,.condition-art:not([data-condition="sun"]):not([data-condition="sky"]) .sun{display:none}
.condition-art[data-condition="sky"] .sun{left:25%;top:10%;width:64px;height:64px}
.condition-art .rain{display:none;width:4px;height:16px;background:#35769f;top:65%;left:35%;border-radius:5px;box-shadow:27px -3px #35769f,54px 3px #35769f,81px -4px #35769f;animation:condition-rain 1.35s linear infinite}
.condition-art[data-condition="rain"] .rain,.condition-art[data-condition="storm"] .rain{display:block}
.condition-art .bolt{display:none;left:54%;top:38%;width:32px;height:58px;background:#c88c00;clip-path:polygon(47% 0,100% 0,65% 39%,94% 39%,10% 100%,34% 53%,0 53%);animation:condition-lightning 4s ease-in-out infinite}
.condition-art[data-condition="storm"] .bolt{display:block}
.condition-art .mist{display:none;inset:24% 10%;background:repeating-linear-gradient(0deg,transparent 0 13px,#69878b 14px 19px,transparent 20px 30px);border-radius:45%;animation:condition-drift 9s ease-in-out infinite alternate}
.condition-art[data-condition="mist"] .mist{display:block}
.condition-art[data-condition="mist"] .cloud{opacity:.35}
.condition-weather[data-condition="unknown"]{opacity:.12}
.condition-weather[data-condition="unknown"] i{animation:none}
.condition-hotspot .calm{width:112px;height:112px;left:calc(50% - 56px);top:calc(50% - 56px);border:2px solid #508e7a;border-radius:50%;box-shadow:0 0 0 18px #72a79530;animation:condition-calm 5s ease-in-out infinite}
.condition-hotspot .calm::after{content:"";position:absolute;width:36px;height:18px;left:34px;top:38px;border-left:6px solid #40896b;border-bottom:6px solid #40896b;transform:rotate(-45deg)}
.condition-hotspot .flame{display:none;left:calc(50% - 40px);top:calc(50% - 47px);width:80px;height:96px;background:linear-gradient(25deg,#eab834,#db5c27 65%,#ba392a);border-radius:65% 15% 55% 48%;transform:rotate(-28deg);animation:condition-flame 2.4s ease-in-out infinite}
.condition-hotspot .flame::after{content:"";position:absolute;inset:40% 22% 8%;border-radius:60% 10% 65% 45%;background:#ffcf40}
.condition-hotspot[data-condition="heat"] .calm{display:none}
.condition-hotspot[data-condition="heat"] .flame{display:block}
.condition-hotspot[data-condition="unknown"] .calm{border-style:dashed;animation:none;box-shadow:none}
.condition-hotspot[data-condition="unknown"] .calm::after{display:none}
.condition-air{color:var(--air-ink,#71828c);opacity:.24}
.condition-air .wave{width:85%;height:52px;left:-12%;top:4%;border:12px solid currentColor;border-left:0;border-right:0;border-radius:50%;filter:blur(2px);animation:condition-air 11s ease-in-out infinite alternate}
.condition-air .wave:nth-child(2){left:25%;top:39%;width:85%;animation-delay:-4s;animation-duration:13s}
.condition-air .wave:nth-child(3){left:-8%;top:75%;width:70%;animation-delay:-7s}
.condition-air .particles{width:6px;height:6px;left:20%;top:24%;background:currentColor;border-radius:50%;box-shadow:34px 47px currentColor,85px 10px currentColor,149px 51px currentColor,184px -5px currentColor,220px 25px currentColor;animation:condition-particles 9s linear infinite}
.condition-air[data-condition="good"] .particles,.condition-air[data-condition="unknown"] .particles{display:none}
.condition-air[data-condition="good"] .wave{border-width:5px;filter:none}
.condition-air[data-condition="moderate"] .wave{border-width:7px}
.condition-air[data-condition="unhealthy"]{--air-ink:#a68b00}
.condition-air[data-condition="very-unhealthy"] .wave,.condition-air[data-condition="hazardous"] .wave{border-width:19px;filter:blur(4px)}
.condition-air[data-condition="unknown"]{opacity:.12}
.condition-air[data-condition="unknown"] i{animation:none}
@keyframes condition-sun{50%{transform:scale(1.1);opacity:.7}}
@keyframes condition-turn{to{transform:rotate(360deg)}}
@keyframes condition-drift{from{transform:translateX(-17px)}to{transform:translateX(17px)}}
@keyframes condition-rain{from{transform:translate(8px,-9px);opacity:0}30%{opacity:1}to{transform:translate(-8px,20px);opacity:0}}
@keyframes condition-lightning{0%,65%,100%{opacity:.35}70%,78%{opacity:1}}
@keyframes condition-calm{50%{transform:scale(1.09);opacity:.55}}
@keyframes condition-flame{0%,100%{transform:rotate(-28deg) scale(.96,1)}50%{transform:rotate(-23deg) scale(1.04,1.09)}}
@keyframes condition-air{from{transform:translateX(-8%) scaleY(.9)}to{transform:translateX(15%) scaleY(1.15)}}
@keyframes condition-particles{from{transform:translate(-12px,7px);opacity:.4}50%{opacity:1}to{transform:translate(22px,-10px);opacity:.4}}
@media(prefers-reduced-motion:reduce){.condition-art i,.condition-art i::before,.condition-art i::after{animation:none!important}}