/* ==========================================================================
   动画背景效果样式
   ========================================================================== */

/* 背景动画容器 */
.background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* ==========================================================================
   流动线条动画
   ========================================================================== */

.flowing-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sky-blue), transparent);
  opacity: 0;
  animation: flowRight 8s linear infinite;
}

.line:nth-child(2n) {
  background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
  animation-duration: 10s;
  animation-delay: -2s;
}

.line:nth-child(3n) {
  background: linear-gradient(90deg, transparent, var(--deep-blue), transparent);
  animation-duration: 12s;
  animation-delay: -4s;
}

.line:nth-child(4n) {
  height: 1px;
  animation-duration: 6s;
  animation-delay: -1s;
}

.line:nth-child(5n) {
  height: 3px;
  animation-duration: 14s;
  animation-delay: -6s;
}

/* 流动线条关键帧动画 */
@keyframes flowRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* 垂直流动线条 */
.line.vertical {
  width: 2px;
  height: 100px;
  background: linear-gradient(180deg, transparent, var(--sky-blue), transparent);
  animation: flowDown 10s linear infinite;
}

@keyframes flowDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* ==========================================================================
   闪烁星星动画
   ========================================================================== */

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sky-blue);
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s ease-in-out infinite;
}

.star:nth-child(2n) {
  width: 3px;
  height: 3px;
  background: var(--primary-blue);
  animation-duration: 4s;
  animation-delay: -1s;
}

.star:nth-child(3n) {
  width: 2px;
  height: 2px;
  background: var(--deep-blue);
  animation-duration: 5s;
  animation-delay: -2s;
}

.star:nth-child(4n) {
  width: 5px;
  height: 5px;
  animation-duration: 2.5s;
  animation-delay: -0.5s;
}

.star:nth-child(5n) {
  background: rgba(135, 206, 235, 0.8);
  animation-duration: 6s;
  animation-delay: -3s;
}

/* 星星闪烁关键帧动画 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  25% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  75% {
    opacity: 0.6;
    transform: scale(1);
  }
}

/* 特殊星星效果 */
.star.bright {
  background: var(--pure-white);
  box-shadow: 0 0 10px var(--sky-blue);
  animation: brightTwinkle 4s ease-in-out infinite;
}

@keyframes brightTwinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.3);
    box-shadow: 0 0 5px var(--sky-blue);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 20px var(--sky-blue);
  }
}

/* ==========================================================================
   粒子效果动画
   ========================================================================== */

.particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--sky-blue);
  border-radius: 50%;
  opacity: 0;
  animation: float 15s linear infinite;
}

.particle:nth-child(2n) {
  background: var(--primary-blue);
  animation-duration: 20s;
  animation-delay: -5s;
}

.particle:nth-child(3n) {
  width: 2px;
  height: 2px;
  animation-duration: 18s;
  animation-delay: -8s;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100px) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================================================
   性能优化和响应式调整
   ========================================================================== */

/* GPU加速优化 */
.line,
.star,
.particle {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* 移动端动画优化 */
@media (max-width: 768px) {
  .line {
    animation-duration: 6s;
  }
  
  .star {
    animation-duration: 2s;
  }
  
  .particle {
    display: none; /* 移动端隐藏粒子效果以提升性能 */
  }
}

/* 低性能设备优化 */
@media (prefers-reduced-motion: reduce) {
  .background-animation {
    display: none;
  }
}

/* 高对比度模式调整 */
@media (prefers-contrast: high) {
  .line {
    background: linear-gradient(90deg, transparent, #000080, transparent);
  }
  
  .star {
    background: #000080;
  }
  
  .star.bright {
    background: #000000;
    box-shadow: none;
  }
}

/* ==========================================================================
   页面元素动画
   ========================================================================== */



/* 页面加载时的整体动画 */
.site-header {
  animation: fadeInUp 1s ease-out 0.3s both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   动画暂停控制类
   ========================================================================== */

.animations-paused .line,
.animations-paused .star,
.animations-paused .particle {
  animation-play-state: paused;
}

.animations-disabled .background-animation {
  display: none;
}