/* Full watercolor cloud assets. The host controls placement and --mascot-size;
 * contain preserves the cloud/umbrella silhouette without thumbnail cropping.
 */
.pm-mascot{position:relative;isolation:isolate;width:min(100%,var(--mascot-size,240px));aspect-ratio:1;margin-inline:auto;overflow:visible;pointer-events:none}
.pm-mascot span{position:absolute;display:block}.pm-mascot [hidden]{display:none!important}
.pm-float{inset:3%;z-index:1;animation:pm-float 7s ease-in-out infinite}
.pm-reaction,.pm-tremble{inset:0;transform-origin:50% 76%}
.pm-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}
.pm-sun{z-index:0;left:66%;top:5%;width:29%;aspect-ratio:289/287;background-image:url('/assets/weather-atlas.5eebfad22a1f.webp');background-repeat:no-repeat;background-size:433.9100% 436.9338%;background-position:66.2176% 92.6577%;animation:pm-sun 18s ease-in-out infinite alternate}
.pm-mascot[data-cold=true] .pm-tremble{animation:pm-cold 5.5s linear infinite}
.pm-mascot[data-umbrella=true] .pm-reaction{animation:pm-umbrella 8s ease-in-out infinite}
@keyframes pm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pm-sun{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes pm-umbrella{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.3deg)}}
/* A short, quiet shiver with a long rest, not continuous shaking. */
@keyframes pm-cold{0%,77%,94%,100%{transform:translateX(0)}79%,83%{transform:translateX(-1.6px)}81%,85%{transform:translateX(1.6px)}87%{transform:translateX(-1px)}89%{transform:translateX(1px)}91%{transform:translateX(-.5px)}93%{transform:translateX(.5px)}}
.pm-mascot[data-running=false] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.pm-mascot *{animation:none!important;transform:none!important}}