/* ============================================================================
   思祈·星愿 · 时间动态背景(五时段)
   早上 / 中午 / 下午 / 傍晚 / 深夜
   渐变天空 + 太阳月亮 + 大气辉光 + 星星 + 可读性暗角
   结构由 assets/js/time-bg.js 动态生成,本文件只负责样式与过渡。
   ========================================================================== */

/* 天空背景容器(无 #sky 的页面由 JS 创建 #time-bg;用户主页复用 #sky) */
#time-bg,
#sky.tb-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 天空渐变层 */
.tb-sky {
  position: absolute;
  inset: 0;
  transition: background 2.2s cubic-bezier(.4, 0, .2, 1);
}

/* 大气辉光层(晨光 / 晚霞 / 银河 / 正午高光) */
.tb-glow {
  position: absolute;
  inset: 0;
  transition: background 2.2s cubic-bezier(.4, 0, .2, 1);
}

/* 太阳 / 月亮 */
.tb-sun {
  position: absolute;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  transition: left 2.2s cubic-bezier(.4, 0, .2, 1), top 2.2s cubic-bezier(.4, 0, .2, 1),
              background 2.2s ease, box-shadow 2.2s ease, opacity 2.2s ease;
}

/* 星星(由 JS 生成,这里只给基础形状与闪烁) */
.tb-stars {
  position: absolute;
  inset: 0;
}
.tb-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  transition: opacity 1.6s ease;
  animation: tb-tw 4s ease-in-out infinite;
}
@keyframes tb-tw {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

/* 内容可读性暗角(顶部 + 底部压暗,保证浅色文字任意时段可读) */
.tb-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(2, 3, 10, .55), transparent 22% 68%, rgba(2, 3, 10, .55));
}

/* 后台壳提升到背景之上(admin 无独立内容 z-index 时兜底) */
.admin-shell {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   三时段完整主题系统(白天/傍晚/深夜)
   每个时段除天空背景外,整套切换 UI 颜色:
   - 文字色(landing/profile 的 --ink/--ink-2/--muted/--dim;admin 的 --ink-1/--ink-3)
   - 边框、强调色(accent)、辅助色(cyan)
   全部为深色天空 + 浅色文字方案,可读性天然可靠
   ========================================================================== */

.vignette,
.tb-scrim {
  transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1);
}

/* ---- 深夜:深蓝夜空 + 浅色文字(默认观感) ---- */
body[data-time-bg="night"] {
  --ink:#EAEDF8; --ink-2:#B9BFD4; --muted:#7A7A90; --dim:#4A4A5E;
  --ink-1:#EDF0F8; --ink-3:#6E7488;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14);
  --accent:#E8A33D; --accent-soft:rgba(232,163,61,.14); --cyan:#22e3ff;
}
body[data-time-bg="night"] .nav { background:linear-gradient(rgba(4,6,13,.72),rgba(4,6,13,.28) 70%,transparent); }
body[data-time-bg="night"] .vignette,
body[data-time-bg="night"] .tb-scrim { opacity:1; }

/* ---- 白天(早上):深蓝晨光 + 浅色文字(暖调) ---- */
body[data-time-bg="morning"] {
  --ink:#F2F0FC; --ink-2:#C7C9E2; --muted:#8E92BB; --dim:#5C618A;
  --ink-1:#F2F0FC; --ink-3:#7E84A8;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --accent:#F0B65A; --accent-soft:rgba(240,182,90,.18); --cyan:#59e0ff;
}
body[data-time-bg="morning"] .nav { background:linear-gradient(rgba(13,21,53,.5),rgba(13,21,53,.16) 72%,transparent); }
body[data-time-bg="morning"] .vignette,
body[data-time-bg="morning"] .tb-scrim { opacity:.32; }
body[data-time-bg="morning"] .hero-title,
body[data-time-bg="morning"] .hero-eyebrow,
body[data-time-bg="morning"] .hero-sub,
body[data-time-bg="morning"] .hero-stats b,
body[data-time-bg="morning"] .hero-stats span { text-shadow:0 1px 2px rgba(255,255,255,.32),0 0 18px rgba(255,255,255,.22); }

/* ---- 傍晚:紫红晚霞 + 浅色文字(暖调) ---- */
body[data-time-bg="dusk"] {
  --ink:#F8F0F1; --ink-2:#DCC8D0; --muted:#9E8A94; --dim:#6E5C66;
  --ink-1:#F8F0F1; --ink-3:#96828C;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
  --accent:#F0A95E; --accent-soft:rgba(240,169,94,.18); --cyan:#6ee0ff;
}
body[data-time-bg="dusk"] .nav { background:linear-gradient(rgba(26,15,40,.5),rgba(26,15,40,.16) 72%,transparent); }
body[data-time-bg="dusk"] .vignette,
body[data-time-bg="dusk"] .tb-scrim { opacity:.6; }

/* ---- 玻璃/面板颜色随主题平滑过渡 ---- */
.ann-item, .card, .sidebar, .topbar, .bell-panel, .glass, .lk-dialog {
  transition: background 2.2s cubic-bezier(.4,0,.2,1), border-color 2.2s cubic-bezier(.4,0,.2,1);
}
body, .hero-title, .hero-sub, .hero-eyebrow, .stat, .sec-label, .brand,
.nav-btn, .btn-ghost, .sb-item, .sb-brand, .mini-btn, .star-row, a, h1, h2, h3, h4, p, span, small, b, button {
  transition: color 2.2s cubic-bezier(.4,0,.2,1), border-color 2.2s cubic-bezier(.4,0,.2,1);
}