/* The sky is an illustration of the current forecast, never a location image.
   One clipped, inert layer keeps the environment behind the glass and content. */
.mc-app-weather {--mc-environment-tint:var(--mc-mint);--mc-environment-warmth:var(--mc-cream);}
.mc-app-weather[data-temperature-band=freezing] {--mc-environment-tint:var(--mc-blue);}
.mc-app-weather[data-temperature-band=cold] {--mc-environment-tint:color-mix(in srgb,var(--mc-blue) 70%,var(--mc-mint));}
.mc-app-weather[data-temperature-band=cool] {--mc-environment-tint:color-mix(in srgb,var(--mc-blue) 34%,var(--mc-mint));}
.mc-app-weather[data-temperature-band=warm] {--mc-environment-tint:var(--mc-cream);--mc-environment-warmth:color-mix(in srgb,var(--mc-cream) 80%,var(--mc-coral));}
.mc-app-weather[data-temperature-band=hot] {--mc-environment-tint:color-mix(in srgb,var(--mc-cream) 68%,var(--mc-coral));--mc-environment-warmth:var(--mc-coral);}
.mc-live-environment {
  position:absolute;inset:0 0 auto;height:min(260px,68%);overflow:hidden;
  border-radius:inherit;z-index:-1;pointer-events:none!important;contain:paint;
  background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--mc-environment-tint) 23%,transparent),transparent 72%),radial-gradient(ellipse at 0% 10%,color-mix(in srgb,var(--mc-mint) 17%,transparent),transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom,black 58%,transparent);mask-image:linear-gradient(to bottom,black 58%,transparent);
}
.mc-live-environment *,.mc-live-environment::before,.mc-live-environment::after {position:absolute;pointer-events:none!important;}
.mc-live-environment__orb {
  display:none;top:-26px;right:21%;width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,color-mix(in srgb,var(--mc-cream) 80%,var(--mc-surface)),color-mix(in srgb,var(--mc-environment-warmth) 62%,transparent) 62%,transparent 74%);
  box-shadow:0 0 60px 28px color-mix(in srgb,var(--mc-environment-warmth) 21%,transparent);opacity:.72;
}
.mc-app-weather[data-weather-sky=sunny] .mc-live-environment__orb {display:block;}
.mc-live-environment__cloud {
  display:none;top:28px;right:6%;width:150px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--mc-ink-secondary) 9%,var(--mc-glass-highlight));
  box-shadow:-42px 22px 0 -5px color-mix(in srgb,var(--mc-glass-highlight) 72%,transparent),80px -9px 0 4px color-mix(in srgb,var(--mc-glass-highlight) 46%,transparent);
  filter:blur(5px);opacity:.7;transform:translate3d(0,0,0);animation:mc-environment-cloud 24s ease-in-out infinite alternate;animation-play-state:paused;
}
.mc-live-environment__cloud::before,.mc-live-environment__cloud::after {content:"";bottom:4px;width:70px;height:62px;border-radius:50%;background:inherit;}
.mc-live-environment__cloud::before {left:18px;}
.mc-live-environment__cloud::after {left:65px;height:48px;width:55px;}
.mc-app-weather:is([data-weather-sky=cloudy],[data-weather-sky=rainy],[data-weather-sky=snowy],[data-weather-sky=foggy]) .mc-live-environment__cloud {display:block;}
.mc-app-weather[data-weather-sky=rainy] .mc-live-environment__cloud {background:color-mix(in srgb,var(--mc-blue) 16%,var(--mc-glass-highlight));opacity:.8;}
.mc-app-weather[data-weather-sky=snowy] .mc-live-environment__cloud {opacity:.85;}
.mc-live-environment__particles {display:none;inset:0;opacity:.45;animation-play-state:paused;}
.mc-app-weather[data-weather-sky=rainy] .mc-live-environment__particles {
  display:block;left:56%;top:58px;right:2%;bottom:6px;
  background:repeating-linear-gradient(110deg,transparent 0 22px,color-mix(in srgb,var(--mc-blue) 35%,transparent) 23px 24px,transparent 25px 42px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,transparent 82%);mask-image:linear-gradient(to bottom,transparent,black 20%,transparent 82%);
  animation:mc-environment-rain 9s linear infinite;animation-play-state:paused;
}
.mc-app-weather[data-weather-sky=snowy] .mc-live-environment__particles {
  display:block;left:43%;top:52px;right:0;bottom:0;
  background:radial-gradient(circle at 12% 30%,color-mix(in srgb,var(--mc-blue) 38%,var(--mc-surface)) 0 2px,transparent 2.5px),radial-gradient(circle at 66% 56%,color-mix(in srgb,var(--mc-blue) 32%,var(--mc-surface)) 0 2px,transparent 2.5px),radial-gradient(circle at 85% 14%,var(--mc-surface) 0 2px,transparent 2.5px);
  background-size:74px 74px,94px 96px,120px 92px;animation:mc-environment-snow 22s linear infinite;animation-play-state:paused;
}
.mc-app-weather[data-weather-sky=foggy] .mc-live-environment__particles {
  display:block;top:30px;background:repeating-linear-gradient(to bottom,transparent 0 29px,color-mix(in srgb,var(--mc-ink-secondary) 7%,transparent) 31px 36px,transparent 42px 58px);filter:blur(5px);
}
/* Night belongs to the forecast, rather than to the selected app theme. Rain
   and cloud scenes retain their conditions when the forecast is for night. */
.mc-app-weather[data-weather-daylight=night] .mc-live-environment {background:radial-gradient(ellipse at 12% 2%,color-mix(in srgb,var(--mc-environment-tint) 15%,transparent),transparent 62%),radial-gradient(ellipse at 84% 0%,color-mix(in srgb,var(--mc-blue) 23%,transparent),transparent 75%),radial-gradient(ellipse at 14% 0%,color-mix(in srgb,var(--mc-deep-blue) 12%,transparent),transparent 68%);}
.mc-app-weather[data-weather-sky=night] .mc-live-environment__orb {display:block;top:12px;right:23%;width:55px;height:55px;background:transparent;box-shadow:inset 11px -5px 0 0 color-mix(in srgb,var(--mc-ink-secondary) 44%,var(--mc-glass-highlight)),0 0 42px color-mix(in srgb,var(--mc-blue) 12%,transparent);opacity:.65;}
.mc-app-weather[data-weather-sky=night] .mc-live-environment__particles {display:block;background:radial-gradient(circle at 72% 14%,var(--mc-ink-secondary) 0 1px,transparent 1.5px),radial-gradient(circle at 91% 32%,var(--mc-blue) 0 1px,transparent 1.5px),radial-gradient(circle at 57% 7%,var(--mc-ink-secondary) 0 1px,transparent 1.5px),radial-gradient(circle at 31% 24%,var(--mc-blue) 0 1px,transparent 1.5px);opacity:.4;}
.mc-app-weather[data-weather-sky=neutral][data-temperature-band=neutral] .mc-live-environment {display:none;}
.mc-app-weather[data-live-active=true] .mc-live-environment :is(.mc-live-environment__cloud,.mc-live-environment__particles) {animation-play-state:running;}
.mc-app-weather[data-weather-intensity=soft] .mc-live-environment :is(.mc-live-environment__cloud,.mc-live-environment__particles) {opacity:.25;}
@keyframes mc-environment-cloud {from {transform:translate3d(-9px,0,0)}to {transform:translate3d(12px,3px,0)}}
@keyframes mc-environment-rain {from {transform:translate3d(0,-12px,0)}to {transform:translate3d(-5px,12px,0)}}
@keyframes mc-environment-snow {from {transform:translate3d(-4px,-18px,0)}to {transform:translate3d(5px,18px,0)}}
.mc-app-weather:is([data-live-active=false],[data-motion-reduced=true],[data-weather-animations=false],[data-data-saving-motion=true],[data-weather-intensity=still]) .mc-live-environment *,
:root[data-reduced-motion=true] .mc-live-environment * {animation:none;transform:none;}
.mc-app-weather:is([data-live-effects=false],[data-live-text=strong],[data-weather-contrast=strong]) .mc-live-environment,
:root[data-reduced-transparency=true] .mc-live-environment,body.is-privacy-locked .mc-live-environment {display:none;}
@media(prefers-reduced-motion:reduce) {.mc-live-environment * {animation:none;transform:none;}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active) {.mc-live-environment {display:none;}}
@media(max-width:440px) {.mc-live-environment {height:min(280px,62%);}.mc-live-environment__orb {right:14%;}.mc-live-environment__cloud {right:-4%;width:130px;}}