/**
 * K4电竞 - 全站背景系统（Background Stack System）
 * 职责：三层背景架构（base + image + vignette），参数化控制
 * 作用域：全站通用，通过 body class 控制 preset
 * 禁止：页面级硬编码、全站灯带感、过度发光
 */

/* ===== Step 1: 通用背景模块 ===== */

/* 背景容器 */
.bg-stack {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* 性能优化 */
  will-change: transform;
  transform: translateZ(0);
}

/* Layer 1: 基底（纯色，图片加载失败时的回退） */
.bg-stack .bg-base {
  position: absolute;
  inset: 0;
  background: var(--bg-base, #050607);
  z-index: 1;
}

/* Layer 2: 背景图 */
.bg-stack .bg-image {
  position: absolute;
  inset: 0;
  background-image: var(--page-bg-url, none);
  background-size: var(--bg-scale, cover);
  background-position: var(--bg-position, center);
  background-repeat: no-repeat;
  opacity: var(--bg-image-opacity, 0.42);
  filter: blur(var(--bg-image-blur, 0px)) brightness(var(--bg-image-brightness, 0.95)) contrast(var(--bg-image-contrast, 1.1));
  z-index: 2;
  /* 图片加载优化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
}

/* Layer 3: 暗角聚焦（vignette） */
.bg-stack .bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 100% at center,
    transparent 0%,
    transparent 30%,
    rgba(5, 6, 7, calc(var(--bg-vignette-strength, 0.75) * 0.3)) 50%,
    rgba(5, 6, 7, calc(var(--bg-vignette-strength, 0.75) * 0.7)) 70%,
    rgba(5, 6, 7, var(--bg-vignette-strength, 0.75)) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* ===== Step 2: 3档 Preset ===== */

/* Preset 1: 清晰版（背景更可见） */
body.bg-preset-clear {
  --bg-image-opacity: 0.52;
  --bg-vignette-strength: 0.68;
}

/* Preset 2: 标准版（平衡） */
body.bg-preset-standard {
  --bg-image-opacity: 0.42;
  --bg-vignette-strength: 0.75;
}

/* Preset 3: 更狠版（背景更暗，更聚焦） */
body.bg-preset-brutal {
  --bg-image-opacity: 0.36;
  --bg-vignette-strength: 0.82;
}

/* ===== 响应式优化 ===== */

/* 移动端：降低图片强度，提升性能 */
@media (max-width: 767px) {
  .bg-stack .bg-image {
    filter: blur(var(--bg-image-blur, 0px)) brightness(var(--bg-image-brightness-mobile, 0.85)) contrast(var(--bg-image-contrast, 1.1));
  }
  
  /* 移动端vignette稍强，确保文字可读 */
  body.bg-preset-clear {
    --bg-vignette-strength: 0.72;
  }
  
  body.bg-preset-standard {
    --bg-vignette-strength: 0.78;
  }
  
  body.bg-preset-brutal {
    --bg-vignette-strength: 0.85;
  }
}

/* 超小屏：进一步优化 */
@media (max-width: 480px) {
  .bg-stack .bg-image {
    filter: blur(var(--bg-image-blur, 0px)) brightness(var(--bg-image-brightness-small, 0.8)) contrast(var(--bg-image-contrast, 1.1));
  }
}