/* =============================================
   effects.css — 纯 CSS 梦幻粒子背景（无 JS）
   适配 QRZ 限制，流畅动画，GPU 加速
   ============================================= */

/* 全局设置 */
html {
    min-height: 100%;
    background: radial-gradient(ellipse at 50% 0%, #1b1e3a 0%, #0b0d1a 70%);
    background-attachment: fixed;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 主内容半透明遮罩，保证文字清晰 */
.body {
    position: relative;
    z-index: 2;
    background: rgba(11, 13, 26, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ========== 利用原有 #stars 等元素生成动态背景 ========== */

/* 重置原有样式，改为背景层 */
#stars,
#stars2,
#stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    box-shadow: none;
    animation: none;
}

/* ---------- #stars：大光斑旋转 + 散布星星 ---------- */
#stars::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(110, 142, 251, 0.3), transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    animation: floatGlow 8s ease-in-out infinite;
}

#stars::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 70%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.35), transparent 70%);
    border-radius: 50%;
    filter: blur(35px);
    animation: floatGlow 10s ease-in-out infinite reverse;
}

/* 散布的星光（通过 box-shadow 生成大量小点） */
#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        120px 300px #fff,
        450px 150px #fff,
        820px 500px #fff,
        160px 750px #fff,
        930px 200px #fff,
        1100px 400px #fff,
        350px 900px #fff,
        700px 50px #fff,
        80px 500px #fff,
        980px 880px #fff,
        400px 600px #fff,
        1280px 300px #fff,
        600px 1100px #fff,
        15px 150px #fff,
        1450px 700px #fff,
        550px 400px #fff;
    animation: twinkle 4s ease-in-out infinite alternate;
}

/* ---------- #stars2：旋转光环 + 流动彩带结构 ---------- */
#stars2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    border-radius: 50%;
    border: 1px solid rgba(110, 142, 251, 0.15);
    box-shadow: 0 0 40px rgba(110, 142, 251, 0.2);
    animation: rotateWheel 20s linear infinite;
}

#stars2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 150, 200, 0.15), transparent, rgba(100, 200, 255, 0.15), transparent);
    filter: blur(20px);
    animation: rotateWheel 12s linear infinite reverse;
}

/* 第二层星光 */
#stars2 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        250px 120px #a0d0ff,
        780px 350px #ffb3c6,
        110px 650px #b3a0ff,
        930px 890px #a0d0ff,
        1320px 100px #ffb3c6,
        480px 950px #b3a0ff,
        720px 20px #a0d0ff,
        60px 380px #ffb3c6,
        1170px 550px #b3a0ff,
        1420px 800px #a0d0ff;
    animation: twinkle 5s ease-in-out infinite alternate;
}

/* ---------- #stars3：中心光柱 + 极光飘带 ---------- */
#stars3::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    width: 120%;
    height: 80%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(110, 142, 251, 0.08) 20%,
            rgba(167, 119, 227, 0.08) 40%,
            rgba(110, 142, 251, 0.05) 60%,
            transparent 100%);
    transform: skewY(-3deg);
    animation: auroraMove 14s ease-in-out infinite;
}

#stars3::after {
    content: '';
    position: absolute;
    top: 20%;
    left: -10%;
    width: 130%;
    height: 70%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 150, 200, 0.06) 25%,
            rgba(100, 200, 255, 0.06) 50%,
            rgba(150, 200, 255, 0.04) 75%,
            transparent 100%);
    transform: skewY(5deg);
    animation: auroraMove 12s ease-in-out infinite reverse;
}

#stars3 {
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        380px 180px rgba(200, 180, 255, 0.8),
        890px 420px rgba(180, 220, 255, 0.7),
        150px 780px rgba(255, 180, 200, 0.8),
        1050px 60px rgba(200, 180, 255, 0.7),
        670px 600px rgba(180, 220, 255, 0.6),
        1360px 350px rgba(255, 180, 200, 0.7),
        40px 50px rgba(200, 180, 255, 0.8),
        800px 950px rgba(180, 220, 255, 0.6);
    animation: twinkle 3s ease-in-out infinite alternate;
}

/* ========== 关键帧动画 ========== */
@keyframes floatGlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(30px, -50px) scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: translate(-20px, 40px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(50px, 20px) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes rotateWheel {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes auroraMove {
    0%, 100% {
        transform: skewY(-3deg) translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: skewY(-3deg) translateX(5%);
        opacity: 0.8;
    }
}