/* 全屏蓝色动态背景 */
.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); }
}