/**
 * global-background.css - 全局背景样式
 * 定义五个页面共用的背景视觉层
 */

.global-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-color: #0a0a0d;
  background-image:
    radial-gradient(120% 120% at 18% 12%, rgba(90, 138, 154, 0.12), transparent 55%),
    url('../assets/images/115.1.26%20bg_xuanpaper_dark_2048.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, 512px 512px;
  background-blend-mode: screen, normal;
  /* ❌ 移除 transition: 背景不应该有 opacity 过渡 */
}

/* WebGL Canvas（如果存在） */
.global-background canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  mix-blend-mode: soft-light;
  filter: saturate(1.05);
}

/* 页面特定的背景调整 - 五个页面统一使用相同的背景 */
body.page--index .global-background,
body.page--birth .global-background,
body.page--select .global-background,
body.page--wait .global-background,
body.page--result .global-background {
  opacity: 1;
}

/* 移动端优化 */
@media (max-width: 768px) {
  /* 无背景层 */
}

/* 降低动画模式 */
@media (prefers-reduced-motion: reduce) {
  .global-background canvas {
    opacity: 0.6;
  }
}

/* === WebGL 降級背景（低端設備） === */
body.webgl-fallback .global-background {
  /* 隱藏 Canvas，使用純 CSS 背景 */
  background-color: #0a0a0d;
  background-image:
    /* 模擬墨水暈染效果 */
    radial-gradient(ellipse 80% 60% at 25% 20%, rgba(45, 40, 35, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 75% 75%, rgba(35, 30, 25, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(40, 35, 30, 0.25) 0%, transparent 50%),
    /* 微光點綴 */
    radial-gradient(circle at 30% 30%, rgba(90, 138, 154, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(212, 175, 55, 0.05) 0%, transparent 35%),
    /* 宣紙紋理 */
    url('../assets/images/115.1.26%20bg_xuanpaper_dark_2048.png');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, cover, cover, 512px 512px;
  background-blend-mode: multiply, multiply, multiply, screen, screen, normal;
}

body.webgl-fallback .global-background canvas {
  display: none; /* 隱藏 WebGL Canvas */
}