/* ============================================================
   首页随机二次元背景（仅首页生效）
   - 由 custom-anime-bg.js 给 <html> 加 .xjc-bg，并写入 --xjc-bg
   - 删除本文件 + index.html 里那行 link 即可完全回滚
   ============================================================ */

/* 1. 让页面本身透明，露出底层背景层 */
html.xjc-bg,
html.xjc-bg body {
  background: transparent !important;
}
html.xjc-bg #app,
html.xjc-bg .template1-wrapper {
  background: transparent !important;
  background-image: none !important;
}

/* 2. 随机背景层（图片加载完成后淡入） */
html.xjc-bg body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: #061019;
  background-image: var(--xjc-bg, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(1.15) saturate(1.12);
  transition: opacity .3s ease;
  pointer-events: none;
}
html.xjc-bg.xjc-bg-ready body::before {
  opacity: 1;
}

/* 3. 压暗层：保证文字可读（可按喜好调节透明度） */
html.xjc-bg body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(4, 12, 24, .10) 0%,
    rgba(4, 12, 24, .02) 40%,
    rgba(4, 12, 24, .16) 100%
  );
  pointer-events: none;
}

/* 4. 可选：给首页主容器一点毛玻璃质感 */
@media (min-width: 768px) {
  html.xjc-bg .template1-wrapper .hero-section {
    backdrop-filter: blur(2px);
  }
}