/* ==========================================================================
   EndlessLoop · 非首页自动二次元背景
   --------------------------------------------------------------------------
   结构由 source/js/background.js 注入：
     - 两个 .el-bg 背景层（交叉淡入淡出）
     - 一个 .el-bg-overlay 深色渐变 + 淡网格遮罩

   层级：.el-bg(-998) 夹在 #web_bg(-999) 与正文之间，遮罩 -996。
   无任何切换控件，完全自动。
   ========================================================================== */

.el-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -998;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s var(--el-ease);
  pointer-events: none;
}

/* 深色渐变 + 极淡网格遮罩：保证正文可读，延续赛博/HUD 质感 */
.el-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -996;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 12, 26, 0.42) 0%, rgba(10, 12, 26, 0.3) 45%, rgba(10, 12, 26, 0.52) 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .el-bg {
    transition: none;
  }
}