/* ═══ 星海居 共用背景（依 2026/7/19 定案的視覺預覽重製） ═══ */
/* 深海漸層 + 自由漂移星星（生滅/閃爍/邊緣環繞）+ 捲動漸深（越滑越舊越暗，像往深海裡潛）+ 海面反光 */
/* 每個頁面在 theme.css 之後載入這支 CSS，並在 theme.js 之後載入 bg-stars.js。 */

:root {
  --bg-deep: #080d18;
  --bg-mid: #111a2e;
  --bg-tide: #16233a;
  --rf-star: #f4d58d;
  --rf-moon: #e8ecf1;
  --rf-fog: #6d84a3;
  --rf-sea-glow: #2a4858;
}

/* 深海漸層底色，取代原本 theme.css 的 var(--bg)，整個App共用同一套 */
#rifugio-bg-base {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 8%, rgba(244, 213, 141, 0.05), transparent 40%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 45%, var(--bg-tide) 78%, #0d1826 100%);
}

/* 星空層 */
#rifugio-star-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
.rifugio-star {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--rf-moon);
  border-radius: 50%;
  will-change: transform, opacity;
}

/* 捲動漸深：滑到越久以前的內容，畫面越暗，像往深海裡潛 */
#rifugio-depth-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #04070d;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease-out;
}

/* 海面反光 */
#rifugio-sea-glow {
  position: fixed;
  left: 0;
  right: 0;
  top: 64%;
  height: 36%;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(42, 72, 88, 0.22) 45%, transparent 100%);
}

/* html/body 本身改透明，讓深海背景透出來；各頁面卡片/表面元素維持原本 var(--surface) 不受影響 */
html, body {
  background: transparent !important;
}