/**
 * 背景效果样式文件
 * 负责星空、星云、流星等动态背景效果
 */

/* 星空背景容器 */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

/* 星星容器 */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 单个星星样式 */
.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: twinkle 5s infinite;
}

/* 星星闪烁动画 */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}

/* 星云效果基础样式 */
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: nebulaFloat 20s infinite alternate ease-in-out;
}

/* 星云1 - 紫色调 */
.nebula-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6a11cb, transparent);
    top: 10%;
    left: 10%;
    animation-duration: 25s;
}

/* 星云2 - 蓝色调 */
.nebula-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #2575fc, transparent);
    bottom: 15%;
    right: 10%;
    animation-duration: 30s;
}

/* 星云3 - 粉色调 */
.nebula-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #ff416c, transparent);
    top: 50%;
    left: 70%;
    animation-duration: 35s;
}

/* 星云浮动动画 */
@keyframes nebulaFloat {
    0% { 
        transform: translate(0, 0) scale(1); 
    }
    100% { 
        transform: translate(50px, 30px) scale(1.1); 
    }
}

/* 流星基础样式 */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px white;
    opacity: 0;
}

/* 流星动画 */
@keyframes shootingStar {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(500px) translateY(300px) scale(0);
    }
}

/* 动态渐变背景 */
.dynamic-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(106, 17, 203, 0.1) 0%, 
        rgba(37, 117, 252, 0.1) 25%, 
        rgba(255, 65, 108, 0.1) 50%, 
        rgba(0, 176, 155, 0.1) 75%, 
        rgba(255, 154, 0, 0.1) 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: -1;
}

/* 渐变背景移动动画 */
@keyframes gradientShift {
    0% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
    100% { 
        background-position: 0% 50%; 
    }
}