/* 跟随天气：天空与云层独立于皮肤，底部和文字区域保留主题底色。 */
.weather-scene {
  --sky-top: #388aca;
  --sky-horizon: #c3dfed;
  --sky-glow: #f7dba474;
  --sky-depth: #123d6b50;
  --haze: #eff8ff66;
  --cloud-light: 1;
  --cloud-shadow: #52677955;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --tinted-top: color-mix(in srgb, var(--sky-top), var(--sky-tint, transparent) var(--sky-tint-amount, 0%));
  --tinted-horizon: color-mix(in srgb, var(--sky-horizon), var(--sky-tint, transparent) var(--sky-tint-amount, 0%));
  background:
    radial-gradient(100vmax 48vmax at 92% 0%, var(--sky-glow), transparent 58%),
    radial-gradient(120vmax 62vmax at 16% 115%, var(--sky-depth), transparent 64%),
    linear-gradient(180deg, var(--tinted-top) 0%, color-mix(in srgb, var(--tinted-top) 44%, var(--tinted-horizon)) 52%, var(--tinted-horizon) 100%);
  transition: background 1.2s ease, filter 1.2s ease;
}
/* The sky takes on each theme's hue so switching themes still changes the page, not just the cards. */
html[data-skin="aurora"] { --sky-tint: #4b3aa6; --sky-tint-amount: 14%; }
html[data-skin="cyber"] { --sky-tint: #0b5a3a; --sky-tint-amount: 40%; }
html[data-skin="ember"] { --sky-tint: #8c3312; --sky-tint-amount: 44%; }
html[data-skin="abyss"] { --sky-tint: #06586a; --sky-tint-amount: 34%; }
html[data-skin="nebula"] { --sky-tint: #3a2a8c; --sky-tint-amount: 36%; }
html[data-skin="prism"] { --sky-tint: #5b3a9c; --sky-tint-amount: 26%; }
html[data-skin="obsidian"] { --sky-tint: #5c4518; --sky-tint-amount: 46%; }
html[data-skin="paper"] { --sky-tint: #d7ae74; --sky-tint-amount: 42%; }
html[data-skin="sakura"] { --sky-tint: #f0a3c3; --sky-tint-amount: 36%; }
html[data-skin="celadon"] { --sky-tint: #78c3a6; --sky-tint-amount: 36%; }
/* Ink-painting themes keep their artwork: weather only adds drifting cloud, mist and particles. */
html:is([data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"], [data-skin="yemo"]) .weather-scene {
  background: none;
  opacity: .72;
}
html:is([data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"], [data-skin="yemo"]) .weather-scene::before { opacity: .3; }
html:is([data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"], [data-skin="yemo"]) .weather-scene::after,
html:is([data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"], [data-skin="yemo"]) .weather-orb { display: none; }
.weather-scene[hidden] { display: none; }
.weather-scene[data-period="night"] {
  --sky-top: #09162f;
  --sky-horizon: #425a7d;
  --sky-glow: #8ba8d52d;
  --sky-depth: #02071482;
  --haze: #a4c1de24;
  --cloud-light: .48;
  --cloud-shadow: #02081685;
}
.weather-scene:is([data-weather="overcast"], [data-weather="rain"]) {
  --sky-top: #425b72;
  --sky-horizon: #9aafbb;
  --sky-glow: #e8f1f340;
  --sky-depth: #1d314c72;
  --haze: #dce9ef78;
  --cloud-light: .72;
  --cloud-shadow: #1d2b3d73;
}
.weather-scene[data-weather="storm"] {
  --sky-top: #1c2b40;
  --sky-horizon: #697d92;
  --sky-glow: #8aa9cd21;
  --sky-depth: #060d1f9c;
  --haze: #b9cfdf55;
  --cloud-light: .5;
  --cloud-shadow: #050a178c;
}
.weather-scene:is([data-weather="fog"], [data-weather="snow"]) {
  --sky-top: #8ca9ba;
  --sky-horizon: #e1eaf0;
  --sky-glow: #ffffff6b;
  --sky-depth: #7894a95b;
  --haze: #f7fbffab;
  --cloud-light: 1;
  --cloud-shadow: #738c9c3f;
}
.weather-scene[data-period="night"]:not([data-weather="clear"]):not([data-weather="clouds"]) {
  --sky-top: #142236;
  --sky-horizon: #586b80;
  --sky-glow: #7898b31f;
  --sky-depth: #02061392;
  --haze: #b6c8d42e;
  --cloud-light: .5;
  --cloud-shadow: #0206128c;
}
.weather-scene::before {
  content: "";
  position: absolute;
  inset: -18% -12% -8%;
  background:
    radial-gradient(ellipse 72% 18% at 18% 75%, var(--haze) 0 24%, transparent 68%),
    radial-gradient(ellipse 68% 16% at 76% 60%, var(--haze) 0 18%, transparent 70%),
    radial-gradient(ellipse 52% 14% at 42% 43%, color-mix(in srgb, var(--cloud-shadow) 82%, transparent) 0 22%, transparent 72%);
  opacity: .62;
  filter: blur(22px);
  transform: translate3d(-2%, 0, 0) scale(1.06);
  animation: weather-atmosphere-drift 42s cubic-bezier(.4, 0, .2, 1) -16s infinite alternate;
}
/* Peeks in from the top-right corner, above the header tools, so its glow never sits behind cards. */
.weather-orb {
  --orb-size: clamp(76px, 7.5vw, 112px);
  position: absolute;
  top: calc(var(--orb-size) * -.46);
  right: calc(var(--orb-size) * -.38);
  width: var(--orb-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef0 0 42%, #ffe6af 66%, transparent 72%);
  box-shadow: 0 0 42px 14px #ffe6af52, 0 0 110px 44px #ffe6af1a;
}
.weather-orb::before {
  content: "";
  position: absolute;
  inset: -180%;
  border-radius: 50%;
  background: conic-gradient(from 10deg, transparent, #fff4c51a 12deg, transparent 25deg 65deg, #fff4c522 80deg, transparent 95deg 145deg, #fff4c51a 160deg, transparent 175deg 215deg, #fff4c522 230deg, transparent 245deg 300deg, #fff4c51a 320deg, transparent 345deg);
  filter: blur(8px);
  animation: weather-light 10s ease-in-out -3s infinite alternate;
}
.weather-scene[data-period="night"] .weather-orb {
  background: radial-gradient(circle at 33% 31%, #c4d5e033 0 9%, transparent 10%), radial-gradient(circle at 65% 65%, #a1b8cf55 0 13%, transparent 14%), radial-gradient(circle at 40% 35%, #f7faff, #c3d4e6 70%);
  box-shadow: 0 0 45px 15px #d8eaff30, 0 0 140px 70px #93b9eb18;
  transform: scale(.72);
}
.weather-scene[data-period="night"] .weather-orb::before { display: none; }
.weather-scene:not([data-weather="clear"]):not([data-weather="clouds"]) .weather-orb { display: none; }
.weather-cloud {
  position: absolute;
  width: max(1000px, 115vw);
  height: max(340px, 36vw);
  right: -22%;
  top: 5%;
  background: url("../weather/clouds.svg?v=cloud3") center / 100% 100% no-repeat;
  filter: brightness(var(--cloud-light)) saturate(.86) drop-shadow(0 26px 30px var(--cloud-shadow));
  opacity: .74;
  animation: weather-cloud-drift 36s cubic-bezier(.4, 0, .2, 1) -6s infinite alternate;
}
.weather-cloud::after {
  content: "";
  position: absolute;
  inset: -8% -6%;
  background: inherit;
  opacity: .18;
  transform-origin: 65% 45%;
  animation: weather-cloud-roll 27s cubic-bezier(.4, 0, .2, 1) -4s infinite alternate;
}
.weather-cloud-back {
  top: -19%;
  right: 6%;
  opacity: .4;
  filter: brightness(calc(var(--cloud-light) * .85)) saturate(.7) blur(2px);
  transform: scale(.92) rotate(-5deg);
  animation-duration: 54s;
  animation-delay: -19s;
}
.weather-cloud-back::after { animation-duration: 19s; animation-delay: -12s; }
.weather-scene[data-weather="clear"] .weather-cloud { top: 48%; opacity: .22; }
.weather-scene[data-weather="clear"] .weather-cloud-back { top: 14%; opacity: .1; }
.weather-scene[data-weather="clear"][data-period="night"] .weather-cloud { opacity: .08; }
.weather-scene:is([data-weather="overcast"], [data-weather="rain"], [data-weather="storm"]) .weather-cloud {
  top: -4%;
  height: max(380px, 46vw);
  opacity: .84;
}
.weather-scene:is([data-weather="overcast"], [data-weather="rain"], [data-weather="storm"]) .weather-cloud-back { top: -25%; right: 12%; opacity: .5; }
.weather-scene:is([data-weather="rain"], [data-weather="storm"]) .weather-cloud { animation-duration: 29s; }
.weather-scene:is([data-weather="rain"], [data-weather="storm"]) .weather-cloud-back { animation-duration: 43s; }
.weather-mist {
  position: absolute;
  inset: 12% -15% -15%;
  background:
    radial-gradient(ellipse 62% 28% at 68% 75%, var(--haze), transparent 68%),
    linear-gradient(173deg, transparent 21%, color-mix(in srgb, var(--haze) 65%, transparent) 37%, transparent 48%, color-mix(in srgb, var(--haze) 72%, transparent) 63%, transparent 78%);
  opacity: .16;
  filter: blur(7px);
  animation: weather-mist-drift 30s cubic-bezier(.4, 0, .2, 1) -5s infinite alternate;
}
.weather-scene[data-weather="fog"] .weather-mist { opacity: .9; filter: blur(13px); }
.weather-scene[data-weather="snow"] .weather-mist { opacity: .55; }
.weather-scene:is([data-weather="rain"], [data-weather="storm"]) .weather-mist { opacity: .32; }
.weather-scene[data-weather="fog"] .weather-cloud { opacity: .2; filter: blur(22px) brightness(var(--cloud-light)); }
.weather-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 56%, transparent) 31%, transparent 74%), linear-gradient(0deg, var(--bg), color-mix(in srgb, var(--bg) 47%, transparent) 35%, transparent 80%);
}
html[data-weather-scene]:not([data-weather-scene=""]) .cursor-glow { opacity: .2; }
/* The sun sits behind the header tools; a denser backing keeps their labels readable over it. */
html[data-weather-scene]:not([data-weather-scene=""]) .tools .stat {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
}
@keyframes weather-cloud-drift {
  from { translate: -7vw -1vh; }
  to { translate: 6vw 1.5vh; }
}
@keyframes weather-cloud-roll {
  from { transform: translate3d(-3%, 1%, 0) scale(.97, 1.02); opacity: .08; }
  to { transform: translate3d(3%, -2%, 0) scale(1.04, .98); opacity: .3; }
}
@keyframes weather-mist-drift {
  from { transform: translate3d(-3%, 1%, 0) scale(1); }
  to { transform: translate3d(4%, -2%, 0) scale(1.04); }
}
@keyframes weather-atmosphere-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.06); }
  to { transform: translate3d(3%, -1%, 0) scale(1.1); }
}
@keyframes weather-light { to { transform: rotate(35deg) scale(1.2); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  html[data-fx="off"] .weather-scene *,
  html[data-fx="off"] .weather-scene *::before,
  html[data-fx="off"] .weather-scene *::after { animation: none !important; }
}