/* 统一背景样式 */
:root {
    --bg-color1: #000000;
    --bg-color2: #19004d;
    --bg-gradient: linear-gradient(135deg, var(--bg-color1) 0%, var(--bg-color2) 100%);
    --mouse-x: 0.5;
    --mouse-y: 0.5;
    --bg-transform: translate(0%, 0%);
}

body {
    background: var(--bg-gradient);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

/* 移除了鼠标跟随光晕效果 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 已删除鼠标跟随的径向渐变 */
    pointer-events: none;
    z-index: -1;
    transform: var(--bg-transform);
    transition: transform 0.3s ease-out;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.07) 0%, transparent 35%);
    pointer-events: none;
    z-index: -1;
    transform: var(--bg-transform);
    transition: transform 0.5s ease-out;
}

/* 动态光影效果 */
@keyframes moveLight {
    0% {
        opacity: 0.5;
        transform: translateY(0) scale(1) var(--bg-transform);
    }
    50% {
        opacity: 0.7;
        transform: translateY(2%) scale(1.02) var(--bg-transform);
    }
    100% {
        opacity: 0.5;
        transform: translateY(-2%) scale(0.98) var(--bg-transform);
    }
}

/* 黄金分割线条背景 */
.golden-lines-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2; /* 确保在粒子效果之后 */
    background-image:
        /* 较粗的垂直线 */
        repeating-linear-gradient(to right,
            rgba(255, 255, 255, 0.07) 0,
            rgba(255, 255, 255, 0.07) 1px,
            transparent 1px,
            transparent 80.9px /* 50px * 1.618 */
        ),
        /* 较粗的水平线 */
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.07) 0,
            rgba(255, 255, 255, 0.07) 1px,
            transparent 1px,
            transparent 80.9px
        ),
        /* 较细的垂直线 */
        repeating-linear-gradient(to right,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 50px
        ),
        /* 较细的水平线 */
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 50px
        );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.golden-lines-background.visible {
    opacity: 1;
}

/* 浮动粒子效果 */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: floatParticle 10s infinite ease-in-out;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

@keyframes floatParticle {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    20% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(360deg);
    }
}