/*
 * Footer Light Particle Effect
 * 光亮粒子从左往右平滑滑动特效
 * 最后更新: 2026-05-30
 */

/* --- 基础容器 --- */
footer {
  position: relative;
  overflow: hidden;
}

/* --- 光亮粒子层 --- */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  filter: blur(1px);
  animation: footerLightSweep 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* --- 第二层光晕（更宽更淡，增加层次感） --- */
footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0.02) 30%,
    rgba(56, 189, 248, 0.05) 50%,
    rgba(56, 189, 248, 0.02) 70%,
    transparent 100%
  );
  filter: blur(2px);
  animation: footerLightSweep 6s ease-in-out infinite;
  animation-delay: 0.3s;
  pointer-events: none;
  z-index: 1;
}

/* --- 页脚内容保持在上层 --- */
footer > * {
  position: relative;
  z-index: 2;
}

/* --- 滑动动画 --- */
@keyframes footerLightSweep {
  0% {
    left: -300px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 100px);
    opacity: 0;
  }
}

/* --- 微妙的底部发光线条 --- */
.footer-glow-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0) 20%,
    rgba(56, 189, 248, 0.3) 50%,
    rgba(56, 189, 248, 0) 80%,
    transparent 100%
  );
  animation: footerGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes footerGlowPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* --- 悬停时增强光效 --- */
footer:hover::before {
  animation-duration: 3s;
}

footer:hover::after {
  animation-duration: 3.5s;
}