/* Decorative forecast state indication, never over applicant actions or faces. */
.weather-motion{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;mask-image:linear-gradient(to bottom,#000 0%,#000 12%,transparent 32%),linear-gradient(to right,#000,transparent 10%,transparent 92%,#000);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 12%,transparent 32%),linear-gradient(to right,#000,transparent 10%,transparent 92%,#000)}
.weather-motion>i{position:absolute;display:none;pointer-events:none}
.weather-motion[data-hidden=true]{visibility:hidden}
.weather-sun{width:70%;height:90%;left:-15%;top:-45%;background:radial-gradient(ellipse,#ffdc8a70,transparent 68%);transform-origin:50% 50%}
.weather-motion[data-effect=sun] .weather-sun{display:block;animation:mq-sunlight 18s cubic-bezier(.77,0,.175,1) infinite alternate}
.weather-particle{top:-24px;width:1px;height:18px;background:#7199b5;opacity:.45;animation-delay:var(--delay)}
.weather-motion[data-effect=rain] .weather-particle{display:block;animation-name:mq-rain;animation-duration:2.4s;animation-timing-function:linear;animation-iteration-count:infinite}
.weather-motion[data-effect=snow] .weather-particle{display:block;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #48667a40;opacity:.8;animation-name:mq-snow;animation-duration:12s;animation-timing-function:linear;animation-iteration-count:infinite}
.weather-wind{left:-20%;width:36%;height:18px;border-top:1px solid #97b7be;border-radius:50%;opacity:0}
.weather-motion[data-effect=wind] .weather-wind{display:block;animation:mq-wind 9s linear infinite}
.weather-motion[data-effect=harvest] .weather-sun{display:block;animation:mq-sunlight 18s cubic-bezier(.77,0,.175,1) infinite alternate}
.season-leaf{top:-26px;width:13px;height:22px;border-radius:80% 8% 75% 8%;background:#bb7b2d;box-shadow:inset 1px 0 0 #f0ca76;opacity:0}
.season-leaf:nth-child(3n){background:#d9a34c;width:10px;height:17px}
.weather-motion[data-effect=harvest] .season-leaf{display:block;animation:mq-harvest 21s linear infinite;animation-delay:var(--leaf-delay)}
.weather-motion[data-effect=winter] .weather-particle{display:block;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #48667a40;animation:mq-snow 18s linear infinite;animation-delay:var(--delay)}
.weather-motion[data-effect=winter] .weather-sun{display:block;background:radial-gradient(ellipse,#e7f2ff80,transparent 68%);animation:mq-sunlight 24s cubic-bezier(.77,0,.175,1) infinite alternate}
.weather-motion-theme{align-self:center;line-height:1.7;color:#5d624e}
@keyframes mq-harvest{0%{transform:translate(0,-20px) rotate(0deg);opacity:0}12%{opacity:.7}50%{transform:translate(var(--leaf-travel),290px) rotate(var(--leaf-turn));opacity:.65}90%{opacity:.5}100%{transform:translate(0,650px) rotate(240deg);opacity:0}}
.weather-motion[data-paused=true]>i:is(.weather-sun,.weather-particle,.weather-wind,.season-leaf){animation-play-state:paused}
@keyframes mq-sunlight{from{transform:translateX(0) rotate(-12deg);opacity:.4}to{transform:translateX(45%) rotate(12deg);opacity:.75}}
@keyframes mq-rain{from{transform:translate(0,-24px);opacity:0}10%{opacity:.45}to{transform:translate(-80px,650px);opacity:0}}
@keyframes mq-snow{from{transform:translate(0,-10px);opacity:0}10%{opacity:.8}to{transform:translate(var(--travel),650px);opacity:0}}
@keyframes mq-wind{from{transform:translateX(0);opacity:0}25%{opacity:.4}75%{opacity:.4}to{transform:translateX(380%);opacity:0}}
.weather-motion-controls{grid-column:2;display:flex;align-items:start;flex-wrap:wrap;gap:16px;padding:0 16px 20px;font-size:12px;color:#4b5e67}
.weather-motion-controls button,.weather-motion-controls summary{min-height:36px;padding:8px 10px;font:inherit;color:inherit;cursor:pointer}
.weather-motion-controls button{border:1px solid #c1cdd2;background:#fff;border-radius:2px}
.weather-motion-controls button:disabled{cursor:default;opacity:.7}
.weather-motion-controls select{font:inherit;padding:8px;min-height:40px;border:1px solid #91a9c7;background:#fff;color:#153650}
.weather-motion-controls label{display:block;margin:8px 0}.weather-motion-controls p{margin:8px 0;line-height:1.6}
@media(max-width:600px){.weather-motion .weather-particle:nth-of-type(n+18){display:none}.weather-motion-controls{padding:0 0 16px;gap:12px}.weather-motion-controls button,.weather-motion-controls summary{min-height:44px}}
@media(prefers-reduced-motion:reduce){.weather-motion{display:none}.weather-motion>i{animation:none!important}}
@media(max-width:600px){.weather-motion .season-leaf:nth-child(n+6){display:none}.season-leaf{width:10px;height:16px}.weather-motion-theme{flex-basis:100%}}