/* 闪电特效CSS动画样式 */

/* 容器样式 */
#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
  overflow: hidden;
  padding-top: 0;
}

/* SVG容器 */
#loading-animation svg {
  width: 400px;
  height: 600px;
  max-width: 90vw;
  max-height: 90vh;
}

/* 闪电路径基础样式 */
.lightning-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
}

/* 主闪电动画 */
.main-bolt {
  animation: 
    lightning-draw 0.15s ease-out 0.1s forwards,
    lightning-flash 0.05s ease-in-out 0.3s 2,
    lightning-fade 0.2s ease-out 0.6s forwards;
}

/* 分支闪电动画 - 延迟出现 */
.branch-bolt:nth-of-type(2) {
  animation: 
    lightning-draw 0.1s ease-out 0.2s forwards,
    lightning-flash 0.05s ease-in-out 0.35s 1,
    lightning-fade 0.15s ease-out 0.65s forwards;
}

.branch-bolt:nth-of-type(3) {
  animation: 
    lightning-draw 0.1s ease-out 0.25s forwards,
    lightning-flash 0.05s ease-in-out 0.4s 1,
    lightning-fade 0.15s ease-out 0.7s forwards;
}

.branch-bolt:nth-of-type(4) {
  animation: 
    lightning-draw 0.1s ease-out 0.3s forwards,
    lightning-flash 0.05s ease-in-out 0.45s 1,
    lightning-fade 0.15s ease-out 0.75s forwards;
}

.branch-bolt:nth-of-type(5) {
  animation: 
    lightning-draw 0.1s ease-out 0.35s forwards,
    lightning-flash 0.05s ease-in-out 0.5s 1,
    lightning-fade 0.15s ease-out 0.8s forwards;
}

.branch-bolt:nth-of-type(6) {
  animation: 
    lightning-draw 0.1s ease-out 0.4s forwards,
    lightning-flash 0.05s ease-in-out 0.55s 1,
    lightning-fade 0.15s ease-out 0.85s forwards;
}

.branch-bolt:nth-of-type(7) {
  animation: 
    lightning-draw 0.1s ease-out 0.45s forwards,
    lightning-flash 0.05s ease-in-out 0.6s 1,
    lightning-fade 0.15s ease-out 0.9s forwards;
}

/* 电弧效果动画 */
.arc-bolt {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: 
    arc-draw 0.05s ease-out 0.5s forwards,
    arc-flicker 0.03s ease-in-out 0.55s 2,
    lightning-fade 0.1s ease-out 0.8s forwards;
}

/* 关键帧动画定义 */

/* 闪电绘制动画 */
@keyframes lightning-draw {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* 电弧绘制动画 */
@keyframes arc-draw {
  from {
    stroke-dashoffset: 50;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
}

/* 闪电闪烁动画 */
@keyframes lightning-flash {
  0%, 100% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 5px currentColor);
  }
  50% {
    opacity: 0.3;
    filter: brightness(3) drop-shadow(0 0 15px currentColor);
  }
}

/* 电弧闪烁动画 */
@keyframes arc-flicker {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.2;
  }
}

/* 闪电消失动画 */
@keyframes lightning-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 闪电发光滤镜 - 白色高亮效果 */
.lightning-glow {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1.0)) 
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.8)) 
          drop-shadow(0 0 36px rgba(255, 255, 255, 0.6))
          drop-shadow(0 0 48px rgba(240, 248, 255, 0.4));
}

/* 背景闪光效果 - 黑色背景适配 */
#loading-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 10%, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 30%, 
    transparent 60%);
  animation: background-flash 0.8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes background-flash {
  0% { opacity: 0.2; }
  100% { opacity: 0.6; }
}

/* 雷声效果模拟 - 屏幕震动 */
@keyframes screen-shake {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-2px, -1px);
  }
  20% {
    transform: translate(2px, 1px);
  }
  30% {
    transform: translate(-1px, 2px);
  }
  40% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-2px, 1px);
  }
  60% {
    transform: translate(2px, -2px);
  }
  70% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  90% {
    transform: translate(-1px, 1px);
  }
}

#lightning-container svg {
  animation: screen-shake 0.3s ease-out 1.0s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  #lightning-container svg {
    width: 300px;
    height: 450px;
  }
}

@media (max-width: 480px) {
  #lightning-container svg {
    width: 250px;
    height: 375px;
  }
}

/* 高性能模式 - 减少动画复杂度 */
@media (prefers-reduced-motion: reduce) {
  .lightning-path {
    animation-duration: 0.1s !important;
  }
  
  #lightning-container::before,
  #lightning-container svg {
    animation: none !important;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  #lightning-container {
    background: linear-gradient(135deg, #000000 0%, #0f0f23 50%, #1a1a2e 100%);
  }
}

/* 控制按钮样式 */
.lightning-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 10000;
}

.lightning-btn {
  padding: 10px 20px;
  background: rgba(30, 144, 255, 0.8);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(30, 144, 255, 0.3);
}

.lightning-btn:hover {
  background: rgba(30, 144, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 144, 255, 0.5);
}

.lightning-btn:active {
  transform: translateY(0);
}

/* 隐藏容器的动画 */
.lightning-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 重播动画类 */
.lightning-replay .lightning-path {
  animation: none;
}

.lightning-replay .main-bolt {
  animation: 
    lightning-draw 0.3s ease-out 0.1s forwards,
    lightning-flash 0.1s ease-in-out 0.4s 3,
    lightning-fade 0.5s ease-out 1.1s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(2) {
  animation: 
    lightning-draw 0.2s ease-out 0.3s forwards,
    lightning-flash 0.1s ease-in-out 0.6s 2,
    lightning-fade 0.3s ease-out 1.4s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(3) {
  animation: 
    lightning-draw 0.2s ease-out 0.4s forwards,
    lightning-flash 0.1s ease-in-out 0.7s 2,
    lightning-fade 0.3s ease-out 1.5s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(4) {
  animation: 
    lightning-draw 0.2s ease-out 0.5s forwards,
    lightning-flash 0.1s ease-in-out 0.8s 2,
    lightning-fade 0.3s ease-out 1.6s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(5) {
  animation: 
    lightning-draw 0.2s ease-out 0.6s forwards,
    lightning-flash 0.1s ease-in-out 0.9s 2,
    lightning-fade 0.3s ease-out 1.7s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(6) {
  animation: 
    lightning-draw 0.2s ease-out 0.7s forwards,
    lightning-flash 0.1s ease-in-out 1.0s 2,
    lightning-fade 0.3s ease-out 1.8s forwards;
}

.lightning-replay .branch-bolt:nth-of-type(7) {
  animation: 
    lightning-draw 0.2s ease-out 0.8s forwards,
    lightning-flash 0.1s ease-in-out 1.1s 2,
    lightning-fade 0.3s ease-out 1.9s forwards;
}

.lightning-replay .arc-bolt {
  animation: 
    arc-draw 0.1s ease-out 1.2s forwards,
    arc-flicker 0.05s ease-in-out 1.3s 5,
    lightning-fade 0.2s ease-out 2.0s forwards;
}