/* ==========================================================================
   Banner 背景动画样式 banner.css
   说明：为 .hero 和 .page-banner 提供背景动画所需的容器定位、内容层级、
        CSS 浮动光斑装饰层。canvas 粒子由 banner.js 自动插入。
   ========================================================================== */

/* ---------- banner 容器基础（确保可承载绝对定位的动画层） ---------- */
.hero,
.page-banner,
.page-header,
.about-banner {
  position: relative;          /* 关键：让内部绝对定位的动画层以它为参照 */
  overflow: hidden;            /* 关键：动画层超出部分裁掉，避免影响布局 */
  z-index: 0;                  /* banner 自身作为根容器 */
  margin-bottom: 30px;         /* 统一：banner 与下方内容之间留出间距，避免贴在一起 */
}

/* page-header 增加内边距，让 banner 区域更高，动画效果更明显 */
.page-header {
  padding: 50px 20px;          /* 上下加高，左右留白 */
}

/* about-banner 通栏个人介绍区，加高 + 渐变背景 */
.about-banner {
  padding: 60px 20px;          /* 上下加高，让头像和文字有呼吸感 */
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
}

/* ---------- 内容层级提升（盖在动画层之上） ---------- */
.hero > *:not(.banner-canvas):not(.banner-blob),
.page-banner > *:not(.banner-canvas):not(.banner-blob),
.page-header > *:not(.banner-canvas):not(.banner-blob),
.about-banner > *:not(.banner-canvas):not(.banner-blob) {
  position: relative;
  z-index: 2;                  /* 内容在动画层之上，确保文字可选中可点击 */
}

/* ---------- canvas 粒子层 ---------- */
.banner-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;                  /* 在内容之下、装饰光斑之上 */
  pointer-events: none;        /* 不拦截鼠标事件，点击可穿透到内容 */
}

/* ---------- CSS 浮动光斑装饰（底层，增加层次感） ---------- */
.banner-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);          /* 大模糊量，做出柔和光晕 */
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  will-change: transform;      /* 提示浏览器优化动画性能 */
}

/* 三个不同颜色和位置的浮动光斑，缓慢移动 */
.banner-blob.blob-1 {
  width: 280px;
  height: 280px;
  background: rgba(100, 116, 139, 0.35);   /* 主色莫兰迪蓝灰 */
  top: -80px;
  left: -60px;
  animation: blob-float-1 14s ease-in-out infinite;
}
.banner-blob.blob-2 {
  width: 220px;
  height: 220px;
  background: rgba(14, 165, 233, 0.25);    /* 强调色点缀蓝 */
  bottom: -70px;
  right: -50px;
  animation: blob-float-2 18s ease-in-out infinite;
}
.banner-blob.blob-3 {
  width: 180px;
  height: 180px;
  background: rgba(148, 163, 184, 0.30);   /* 次级灰蓝 */
  top: 40%;
  right: 20%;
  animation: blob-float-3 16s ease-in-out infinite;
}

/* ---------- 光斑移动动画关键帧 ---------- */
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, -30px) scale(1.1); }
}
@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 30px) scale(1.08); }
  66%      { transform: translate(30px, -40px) scale(0.95); }
}

/* ---------- 夜间模式下调高光斑亮度 ---------- */
body.theme-dark .banner-blob {
  opacity: 0.35;
}
body.theme-dark .banner-blob.blob-1 { background: rgba(148, 163, 184, 0.4); }
body.theme-dark .banner-blob.blob-2 { background: rgba(56, 189, 248, 0.3); }
body.theme-dark .banner-blob.blob-3 { background: rgba(203, 213, 225, 0.25); }

/* ---------- 尊重"减少动画"偏好（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
  .banner-blob { animation: none; }
  .banner-canvas { display: none; }
}