/* 全屏蓝色动态背景 */
.blue-gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #0a192f 100%);
  z-index: -1; /* 确保背景在内容下方 */
}

/* 光效装饰元素 */
.blue-gradient-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 30s ease-in-out infinite;
}

.blue-gradient-bg::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%);
  border-radius: 50%;
  animation: floatReverse 25s ease-in-out infinite;
}

/* 网格线条装饰 */
.blue-gradient-bg .grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(100, 255, 218, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 255, 218, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* 动画效果 */
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes floatReverse {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}