/* * 优化目标：统一毛玻璃效果，增强层次感，使色彩更柔和美观。 */

/* === 1. 主背景:淡壁纸 + 流动极光(多层叠加) ===
   元素本体多层背景(列表首层在最上):
     ① 白纱渐变(上淡下浓,压淡壁纸保证正文可读)
     ② wallpaper.webp 手绘晨雾湖山(极淡透出) ③ 兜底冷白渐变。
   ::before 的极光光团动画、::after 的噪点保持原样叠在最上。
   #web_bg 是 fixed 定位,无需 background-attachment。 */
#web_bg {
  background:
    linear-gradient(180deg, rgba(244, 247, 252, 0.75) 0%, rgba(241, 244, 250, 0.80) 55%, rgba(238, 242, 249, 0.84) 100%),
    url('/img/bg/wallpaper.webp') center / cover no-repeat,
    linear-gradient(135deg, #f1f4fa 0%, #e6ebf3 100%);
  overflow: hidden;
}

/* 移动端:白纱略加重,保证小屏可读性 */
@media (max-width: 768px) {
  #web_bg {
    background:
      linear-gradient(180deg, rgba(244, 247, 252, 0.82) 0%, rgba(238, 242, 249, 0.88) 100%),
      url('/img/bg/wallpaper.webp') center / cover no-repeat,
      linear-gradient(135deg, #f1f4fa 0%, #e6ebf3 100%);
  }
}

/* 流动的极光光团（比视口大一圈，旋转位移也不会露边） */
#web_bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(38% 48% at 20% 25%, rgba(64, 132, 230, 0.30) 0%, transparent 60%),  /* 蓝 */
    radial-gradient(40% 50% at 80% 16%, rgba(64, 196, 196, 0.26) 0%, transparent 60%),  /* 青 */
    radial-gradient(44% 54% at 78% 82%, rgba(158, 130, 222, 0.26) 0%, transparent 62%), /* 雾紫 */
    radial-gradient(38% 48% at 22% 86%, rgba(104, 202, 162, 0.24) 0%, transparent 60%); /* 薄荷 */
  animation: bgAuroraDrift 26s ease-in-out infinite alternate;
}

@keyframes bgAuroraDrift {
  0%   { transform: translate3d(-1.5%, -1%, 0) rotate(-3deg) scale(1.05); }
  100% { transform: translate3d(2%, 2%, 0) rotate(5deg) scale(1.12); }
}

/* 极细噪点：消除渐变色带、增加“印刷纸”般的质感（很轻，约 4%） */
#web_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 尊重系统“减少动态效果”偏好：关掉漂移动画 */
@media (prefers-reduced-motion: reduce) {
  #web_bg::before { animation: none; }
}

/*
 * 更加柔和、高级的浅蓝渐变滚动条样式
 * 渐变过渡更细腻，颜色更清爽
 */

/* 1. 滚动条整体尺寸 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 2. 滚动条轨道：更亮、更淡、更干净 */
::-webkit-scrollbar-track {
    background: #F2FAFF;  /* 比 EBf8FF 更淡，更接近白 */
    border-radius: 4px;
}

/* 3. 滚动条滑块：柔和的三段式渐变，更自然 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(73, 177, 245, 0.45) 0%,   /* 顶部：更亮的淡蓝 */
        rgba(73, 177, 245, 0.28) 50%,  /* 中部：轻柔过渡 */
        rgba(73, 177, 245, 0.10) 100%  /* 底部：几乎透明 */
    );
    border-radius: 4px;
}

/* 4. 悬停效果：更明显但不突兀 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(73, 177, 245, 0.65) 0%,
        rgba(73, 177, 245, 0.45) 100%
    );
}

/* 5. 角落区域 */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* 解决 Butterfly banner 蓝色闪屏 */
#page-header {
  background-color: transparent !important;
}