/* 星空背景样式 */
body {
    background-color: #02071a !important;
    color: white !important;
    overflow-x: hidden;
}

#space-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* 星空在最底层 */
}

/* 内容容器在星空之上，且在固定的顶部/底部之下 */
.content-wrapper {
    position: relative;
    z-index: 10; /* 确保内容在星空之上，但低于固定的顶部/底部 */
}

/* 星空元素样式 */
.nebula {
    position: absolute;
    background: radial-gradient(circle, var(--color) 0%, rgba(0,0,0,0) 70%);
    opacity: 0.1;
    filter: blur(50px);
    animation: float 40s linear infinite;
    transform: translateZ(0);
    will-change: transform;
}

.galaxy-outer {
    position: absolute;
    background: radial-gradient(circle, var(--outer-color) 0%, rgba(0,0,0,0) 85%);
    opacity: 0.12;
    filter: blur(80px);
    animation: galaxyFloat 80s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

.galaxy-core {
    position: absolute;
    background: radial-gradient(circle, var(--core-color) 0%, rgba(0,0,0,0) 60%);
    opacity: 0.3;
    filter: blur(30px);
    animation: galaxyFloat 80s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

.star {
    position: absolute;
    border-radius: 50%;
    animation: twinkle linear infinite;
    transform: translateZ(0);
    will-change: opacity, transform;
}

/* 星空动画 */
@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(1); }
    20% { opacity: 1; transform: scale(1.2); }
    40% { opacity: 0.3; transform: scale(1); }
    60% { opacity: 1; transform: scale(1.3); }
    80% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.2; transform: scale(1); }
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, 20px) scale(1.1); }
    50% { transform: translate(100px, 50px) scale(1); }
    75% { transform: translate(50px, 80px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes galaxyFloat {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, 30px) scale(1.05); }
    50% { transform: translate(120px, 60px) scale(1); }
    75% { transform: translate(60px, 90px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}