/**
 * Aether 天气渐变背景（按 aether-weather.html 模板）
 * - 渐变底色 + 三个漂浮模糊光斑（blob）+ 慢速大云影
 * - body[data-weather] 由 background.js 设置，跟随定位城市实时天气变化
 * - 明暗主题自动适配（html[data-theme]）
 * 覆盖原 .background-container 的图片背景
 */

.background-container { background: transparent; }
.background-container .background-overlay,
.background-container #background-image { display: none !important; }

/* ---------- 渐变图层（双层交叉淡入淡出） ---------- */
.ab-layer {
  position: absolute;
  inset: 0;
}
.ab-grad {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.ab-grad.on { opacity: 1; }

/* —— 浅色主题 —— */
.ab-grad[data-cat="day"]     { background: linear-gradient(180deg, #eaf4ff 0%, #f0eff6 52%, #fdf3ec 100%); }
.ab-grad[data-cat="sunny"]   { background: linear-gradient(180deg, #bfe3ff 0%, #ffefc9 55%, #ffe3cf 100%); }
.ab-grad[data-cat="cloudy"]  { background: linear-gradient(180deg, #c9d6e8 0%, #dfe6f0 52%, #edf0f5 100%); }
.ab-grad[data-cat="rain"]    { background: linear-gradient(180deg, #7d94b3 0%, #a3b8cc 52%, #ccd7e2 100%); }
.ab-grad[data-cat="snow"]    { background: linear-gradient(180deg, #cfdff2 0%, #e6effa 52%, #f8fbfe 100%); }
.ab-grad[data-cat="thunder"] { background: linear-gradient(180deg, #3c4562 0%, #59637f 55%, #8792a8 100%); }
.ab-grad[data-cat="mist"]    { background: linear-gradient(180deg, #d9dfe7 0%, #e7e4dd 55%, #f3efe7 100%); }
.ab-grad[data-cat="night"]   { background: linear-gradient(180deg, #141b36 0%, #2a3357 55%, #4a567f 100%); }

/* —— 深色主题 —— */
html[data-theme="dark"] .ab-grad[data-cat="day"]     { background: linear-gradient(180deg, #1a1d2e 0%, #22263a 52%, #2b3048 100%); }
html[data-theme="dark"] .ab-grad[data-cat="sunny"]   { background: linear-gradient(180deg, #2c3a55 0%, #4d4560 55%, #6b5a55 100%); }
html[data-theme="dark"] .ab-grad[data-cat="cloudy"]  { background: linear-gradient(180deg, #232a38 0%, #2d3646 52%, #3a4353 100%); }
html[data-theme="dark"] .ab-grad[data-cat="rain"]    { background: linear-gradient(180deg, #1c2534 0%, #2a3748 52%, #3a4a5c 100%); }
html[data-theme="dark"] .ab-grad[data-cat="snow"]    { background: linear-gradient(180deg, #2a3548 0%, #38455c 52%, #4a5872 100%); }
html[data-theme="dark"] .ab-grad[data-cat="thunder"] { background: linear-gradient(180deg, #161a29 0%, #262c42 55%, #3a4158 100%); }
html[data-theme="dark"] .ab-grad[data-cat="mist"]    { background: linear-gradient(180deg, #262a33 0%, #31353e 55%, #40444e 100%); }
html[data-theme="dark"] .ab-grad[data-cat="night"]   { background: linear-gradient(180deg, #0d1226 0%, #1a2140 55%, #2c3559 100%); }

/* ---------- 漂浮光斑（模板 blob，颜色随天气） ---------- */
.ab-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  background: var(--ab-blob, rgba(196, 214, 255, .42));
  transition: background 1.6s ease;
  will-change: transform;
}
.ab-blob1 {
  width: 420px; height: 420px;
  top: -120px; right: -100px;
  background: var(--ab-blob1, rgba(255, 205, 220, .4));
  animation: abBlobFloat 18s ease-in-out infinite alternate;
}
.ab-blob2 {
  width: 360px; height: 360px;
  bottom: -120px; left: -120px;
  background: var(--ab-blob2, rgba(196, 214, 255, .42));
  animation: abBlobFloat 22s ease-in-out infinite alternate-reverse;
}
.ab-blob3 {
  width: 260px; height: 260px;
  top: 36%; left: -90px;
  background: var(--ab-blob3, rgba(255, 238, 196, .45));
  animation: abBlobFloat 26s ease-in-out infinite alternate;
}
@keyframes abBlobFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, -50px) scale(1.15); }
}

/* —— 各天气的光斑配色（浅色主题） —— */
body[data-weather="day"]     { --ab-blob1: rgba(255, 205, 220, .40); --ab-blob2: rgba(196, 214, 255, .42); --ab-blob3: rgba(255, 238, 196, .45); }
body[data-weather="sunny"]  { --ab-blob1: rgba(255, 214, 130, .45); --ab-blob2: rgba(160, 210, 255, .45); --ab-blob3: rgba(255, 240, 170, .55); }
body[data-weather="cloudy"] { --ab-blob1: rgba(210, 220, 235, .55); --ab-blob2: rgba(170, 190, 220, .45); --ab-blob3: rgba(235, 238, 245, .55); }
body[data-weather="rain"]   { --ab-blob1: rgba(110, 150, 200, .40); --ab-blob2: rgba(90, 125, 175, .42); --ab-blob3: rgba(180, 205, 235, .45); }
body[data-weather="snow"]   { --ab-blob1: rgba(200, 220, 250, .55); --ab-blob2: rgba(220, 235, 252, .55); --ab-blob3: rgba(255, 255, 255, .60); }
body[data-weather="thunder"]{ --ab-blob1: rgba(120, 110, 200, .35); --ab-blob2: rgba(80, 95, 160, .40); --ab-blob3: rgba(200, 190, 255, .30); }
body[data-weather="mist"]   { --ab-blob1: rgba(225, 225, 225, .55); --ab-blob2: rgba(210, 215, 220, .50); --ab-blob3: rgba(240, 235, 225, .55); }
body[data-weather="night"]  { --ab-blob1: rgba(110, 125, 220, .30); --ab-blob2: rgba(70, 90, 190, .30); --ab-blob3: rgba(240, 225, 170, .25); }

/* —— 深色主题的光斑配色（更暗、更含蓄） —— */
html[data-theme="dark"] body[data-weather="day"]     { --ab-blob1: rgba(90, 95, 150, .28); --ab-blob2: rgba(70, 85, 140, .30); --ab-blob3: rgba(130, 110, 90, .26); }
html[data-theme="dark"] body[data-weather="sunny"]   { --ab-blob1: rgba(200, 150, 80, .28); --ab-blob2: rgba(90, 110, 180, .30); --ab-blob3: rgba(220, 180, 90, .30); }
html[data-theme="dark"] body[data-weather="cloudy"]  { --ab-blob1: rgba(100, 115, 145, .30); --ab-blob2: rgba(80, 95, 125, .30); --ab-blob3: rgba(120, 130, 150, .28); }
html[data-theme="dark"] body[data-weather="rain"]    { --ab-blob1: rgba(70, 100, 150, .30); --ab-blob2: rgba(55, 80, 120, .32); --ab-blob3: rgba(110, 140, 180, .26); }
html[data-theme="dark"] body[data-weather="snow"]    { --ab-blob1: rgba(120, 145, 190, .28); --ab-blob2: rgba(140, 165, 205, .28); --ab-blob3: rgba(180, 200, 230, .25); }
html[data-theme="dark"] body[data-weather="thunder"] { --ab-blob1: rgba(110, 95, 190, .22); --ab-blob2: rgba(70, 85, 150, .25); --ab-blob3: rgba(180, 170, 240, .18); }
html[data-theme="dark"] body[data-weather="mist"]    { --ab-blob1: rgba(120, 125, 135, .28); --ab-blob2: rgba(105, 110, 120, .28); --ab-blob3: rgba(150, 145, 135, .25); }
html[data-theme="dark"] body[data-weather="night"]   { --ab-blob1: rgba(80, 95, 200, .22); --ab-blob2: rgba(55, 70, 160, .25); --ab-blob3: rgba(220, 200, 140, .16); }

/* ---------- 慢速大云影（阴雨雪雾雷时浮现） ---------- */
.ab-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.ab-bigcloud {
  position: absolute;
  width: 480px; height: 130px;
  border-radius: 50%;
  background: var(--ab-cloud-c, rgba(255, 255, 255, .55));
  filter: blur(38px);
  will-change: transform;
}
.ab-bigcloud.bc1 { top: 10%; animation: abCloudDrift 95s linear infinite; }
.ab-bigcloud.bc2 { top: 38%; width: 560px; animation: abCloudDrift 130s linear infinite; animation-delay: -40s; }
.ab-bigcloud.bc3 { top: 66%; width: 420px; animation: abCloudDrift 110s linear infinite; animation-delay: -70s; }
@keyframes abCloudDrift {
  from { transform: translateX(-30%); }
  to   { transform: translateX(130vw); }
}

/* 云影出现时机与颜色 */
body[data-weather="cloudy"]  .ab-clouds { opacity: .8; }
body[data-weather="rain"]    .ab-clouds { opacity: .75; }
body[data-weather="snow"]    .ab-clouds { opacity: .85; --ab-cloud-c: rgba(255, 255, 255, .7); }
body[data-weather="thunder"] .ab-clouds { opacity: .55; --ab-cloud-c: rgba(40, 48, 78, .6); }
body[data-weather="mist"]    .ab-clouds { opacity: .9; --ab-cloud-c: rgba(255, 255, 255, .8); }
html[data-theme="dark"] body[data-weather="cloudy"]  .ab-clouds { opacity: .4; --ab-cloud-c: rgba(160, 175, 200, .18); }
html[data-theme="dark"] body[data-weather="rain"]    .ab-clouds { opacity: .4; --ab-cloud-c: rgba(140, 160, 190, .18); }
html[data-theme="dark"] body[data-weather="snow"]    .ab-clouds { opacity: .45; --ab-cloud-c: rgba(200, 215, 240, .22); }
html[data-theme="dark"] body[data-weather="thunder"] .ab-clouds { opacity: .4; --ab-cloud-c: rgba(20, 24, 44, .6); }
html[data-theme="dark"] body[data-weather="mist"]    .ab-clouds { opacity: .5; --ab-cloud-c: rgba(190, 195, 205, .2); }

/* ---------- 深色天空下的文字对比度修正（浅色主题时） ---------- */
html:not([data-theme="dark"]) body[data-weather="night"] .logo-text,
html:not([data-theme="dark"]) body[data-weather="night"] .footer p,
html:not([data-theme="dark"]) body[data-weather="night"] .daily-quote,
html:not([data-theme="dark"]) body[data-weather="night"] .theme-toggle,
html:not([data-theme="dark"]) body[data-weather="night"] .help-btn,
html:not([data-theme="dark"]) body[data-weather="thunder"] .logo-text,
html:not([data-theme="dark"]) body[data-weather="thunder"] .footer p,
html:not([data-theme="dark"]) body[data-weather="thunder"] .daily-quote,
html:not([data-theme="dark"]) body[data-weather="thunder"] .theme-toggle,
html:not([data-theme="dark"]) body[data-weather="thunder"] .help-btn {
  color: #fff;
}
html:not([data-theme="dark"]) body[data-weather="night"] .user-avatar span,
html:not([data-theme="dark"]) body[data-weather="thunder"] .user-avatar span {
  color: #fff;
}
/* 登录/注册按钮在深色天空下改为幽灵样式 */
html:not([data-theme="dark"]) body[data-weather="night"] .login-btn,
html:not([data-theme="dark"]) body[data-weather="night"] .register-btn,
html:not([data-theme="dark"]) body[data-weather="thunder"] .login-btn,
html:not([data-theme="dark"]) body[data-weather="thunder"] .register-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ab-blob, .ab-bigcloud, .ab-blob::before, .ab-blob::after {
    animation: none !important;
  }
}