/* ================================================
   flow-bg.css — 公共深色鎏金流光背景组件（2026-08-08）
   用法：给任意区块加 class="flow-bg"，即获得：
   · 暖调炭黑咖啡底色 + 30s 极慢明暗呼吸
   · 左下角放射鎏金流光（底部浓、向上渐隐）
   · 星光 6-8s 呼吸明暗（底部密、向上稀疏）
   内容元素置于背景之上（z-index 2），互不干扰。
   可复用：签约艺人等区块加 class="flow-bg" 即全站统一。
   ================================================ */

/* ---------- 基础层：深黑咖底（压暗，凸显鎏金）+ 30s 明暗呼吸 ---------- */
.flow-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% -10%, rgba(180,150,100,0.04) 0%, transparent 45%),
    linear-gradient(160deg, #0a0604 0%, #130c07 45%, #0d0805 100%);
  animation: flowBgBreath 30s ease-in-out infinite alternate;
}
@keyframes flowBgBreath {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.07); }
}

/* ---------- 内容层抬升（文字/卡片永远在光影之上） ---------- */
.flow-bg > .container,
.flow-bg .container {
  position: relative;
  z-index: 2;
}

/* ---------- 装饰层（组件 JS 自动注入，无需手写 HTML） ---------- */
.flow-bg-glow,
.flow-bg-stars {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  /* 仅保留零散星点，左下角金色光斑已移除（光带只留深咖色） */
  background-image:
    radial-gradient(circle, rgba(250,222,172,0.45) 2px, transparent 4px),
    radial-gradient(circle, rgba(244,208,150,0.3) 1.8px, transparent 3.4px);
  background-size: 900px 900px, 1300px 1300px;
  background-position: 120px 200px, 300px 100px;
  background-repeat: repeat, repeat;
  opacity: calc(0.25 + 0.5 * var(--flow-progress, 1));
  animation: flowSparkle 7s ease-in-out infinite alternate;
}
@keyframes flowSparkle {
  0%   { filter: brightness(0.55); }
  100% { filter: brightness(1.3); }
}

/* ---------- 无障碍：减少动态效果偏好时降为静态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-bg,
  .flow-bg-glow,
  .flow-bg-stars { animation: none; }
}