/* ===================================================================
   06 雷暴充能 (THUNDER CHARGE) 视觉风格与背景动效样式
   严格独立图层：铺满视口、置于底层 (z-index: -1)、pointer-events: none
   绝对不挤占、不遮挡、不推动现有任何排版组件
   =================================================================== */

/* 独立背景图层容器：固定定位铺满全屏 */
.thunder-bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background-color: #0B1420;
}

/* 深蓝灰风暴云团基础类（静态压顶，大模糊度软化边缘，增强色彩对比度） */
.storm-cloud {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0);
}

/* 云块 1：左上方深蓝灰压顶云 */
.storm-cloud-1 {
  top: -140px;
  left: -120px;
  width: 820px;
  height: 560px;
  background: radial-gradient(ellipse at 45% 45%, rgba(42, 70, 108, 0.95) 0%, rgba(26, 46, 74, 0.75) 45%, rgba(14, 25, 42, 0.35) 70%, transparent 92%);
  filter: blur(55px);
}

/* 云块 2：右上方深蓝灰压顶云 */
.storm-cloud-2 {
  top: -160px;
  right: -130px;
  width: 860px;
  height: 600px;
  background: radial-gradient(ellipse at 55% 45%, rgba(38, 66, 104, 0.95) 0%, rgba(24, 42, 70, 0.75) 45%, rgba(13, 24, 40, 0.35) 70%, transparent 92%);
  filter: blur(55px);
}

/* 云块 3：顶部中央低空横贯风暴云 */
.storm-cloud-3 {
  top: -200px;
  left: 10%;
  width: 80%;
  height: 440px;
  background: radial-gradient(ellipse at 50% 35%, rgba(32, 56, 90, 0.9) 0%, rgba(18, 34, 56, 0.65) 50%, transparent 85%);
  filter: blur(60px);
}

/* 云块 4：左侧低位风暴云壁 */
.storm-cloud-4 {
  top: 18%;
  left: -180px;
  width: 600px;
  height: 720px;
  background: radial-gradient(circle at 35% 50%, rgba(28, 50, 82, 0.85) 0%, rgba(16, 28, 48, 0.5) 60%, transparent 85%);
  filter: blur(65px);
}

/* 底部一线淡青地光 */
.ground-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to top, rgba(125, 211, 252, 0.16) 0%, rgba(56, 189, 248, 0.05) 40%, transparent 100%);
  pointer-events: none;
}

.ground-glow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.6), transparent);
  filter: blur(1px);
}

/* 全屏 6% 白色微亮闪烁层 */
.storm-screen-flash {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.storm-screen-flash.active {
  opacity: 0.06;
  transition: opacity 0.04s ease-out;
}

/* 闪电 Canvas 渲染画布 */
.thunder-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* -------------------------------------------------------------
   【标题右侧动画】闪电图标装饰
   规格：行内元素、不换行不挤压排版、尺寸不超过标题字高 1.6 倍
   节奏：3.6s 周期内前 86% 时间保持 22% 暗度，随后 steps 阶跃快速闪烁
   ------------------------------------------------------------- */
.thunder-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.25em;
  color: #7DD3FC;
  opacity: 0.22;
  flex-shrink: 0;
  animation: thunder-step-flicker 3.6s steps(1, end) infinite;
  transform: translateZ(0);
}

.thunder-title-badge svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

/* 阶跃闪烁关键帧：22% → 100% → 35% → 100% → 22% */
@keyframes thunder-step-flicker {
  0%, 86% {
    opacity: 0.22;
    filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.3));
    color: #7DD3FC;
    transform: scale(1);
  }
  87% {
    opacity: 1;
    filter: drop-shadow(0 0 14px #FFFFFF) drop-shadow(0 0 28px #7DD3FC);
    color: #FFFFFF;
    transform: scale(1.18);
  }
  90% {
    opacity: 0.35;
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.5));
    color: #7DD3FC;
    transform: scale(1.02);
  }
  93% {
    opacity: 1;
    filter: drop-shadow(0 0 16px #FFFFFF) drop-shadow(0 0 32px #7DD3FC);
    color: #FFFFFF;
    transform: scale(1.22);
  }
  96% {
    opacity: 0.22;
    filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.3));
    color: #7DD3FC;
    transform: scale(1);
  }
  100% {
    opacity: 0.22;
    filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.3));
    color: #7DD3FC;
    transform: scale(1);
  }
}

/* 遵守 prefers-reduced-motion：减弱动效模式下退化为静态画面 */
@media (prefers-reduced-motion: reduce) {
  .thunder-title-badge {
    animation: none;
    opacity: 0.5;
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.4));
  }
  .storm-screen-flash {
    display: none;
  }
}