/* ========== 动态背景特效系统（性能优化版） ========== */

.bg-fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* GPU 加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---- 太极图 ---- */
.bg-taiji {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 8%;
  left: -8%;
  opacity: 0;
  /* 移除 filter:blur 改用 SVG 自带模糊或直接无模糊 */
  transition: opacity 2.5s ease-out;
  will-change: opacity;
  contain: layout style;
}
.bg-taiji.lit {
  opacity: 0.3;
}
.bg-taiji svg {
  width: 100%;
  height: 100%;
  animation: taijiSpin 60s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.6)) brightness(1.4);
}
@keyframes taijiSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- 魔法阵 ---- */
.bg-magic-circle {
  position: absolute;
  width: 420px;
  height: 420px;
  bottom: 5%;
  right: -6%;
  opacity: 0;
  transition: opacity 2.5s ease-out;
  will-change: opacity;
  contain: layout style;
}
.bg-magic-circle.lit {
  opacity: 0.05;
}
.bg-magic-circle svg {
  width: 100%;
  height: 100%;
  animation: magicSpin 90s linear infinite reverse;
  will-change: transform;
}
@keyframes magicSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ---- 中心点亮遮罩 ---- */
.bg-light-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, var(--bg, #0f0f12) 70%);
  opacity: 1;
  transition: opacity 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  contain: layout style;
}
.bg-light-mask.lit {
  opacity: 0;
}

/* ---- 流动光带 ---- */
.bg-streamer {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(180deg, transparent, var(--accent, #c9a84c), transparent);
  opacity: 0;
  animation: streamerFloat 8s ease-in-out infinite;
  will-change: transform;
  contain: layout style;
}
.bg-streamer.lit {
  opacity: 0.12;
  transition: opacity 1.5s ease-out;
}
@keyframes streamerFloat {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.08; }
  50%      { transform: translateY(-20px) scaleY(1.2); opacity: 0.15; }
}

/* ---- 流星 ---- */
.bg-meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent, #c9a84c);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  contain: layout style;
}
.bg-meteor::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, #c9a84c));
  opacity: 0.5;
}
.bg-meteor.active {
  animation: meteorFly var(--dur, 1s) linear forwards;
}
@keyframes meteorFly {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  8%   { opacity: 1; transform: translate(calc(var(--mx) * 0.08), calc(var(--my) * 0.08)) scale(1); }
  85%  { opacity: 0.6; transform: translate(calc(var(--mx) * 0.85), calc(var(--my) * 0.85)) scale(0.7); }
  100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(0.2); }
}

/* ---- 闪烁光点 ---- */
.bg-sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(201,168,76,0.6);
  border-radius: 50%;
  opacity: 0;
  will-change: opacity;
  contain: layout style;
  animation: sparkleBlink 4s ease-in-out infinite;
}
@keyframes sparkleBlink {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.5; }
}