:root {
    /* 和屏幕边缘的边距 */
    --glow-margin: 24%;
    /* 每个光晕大小，vmax 是长宽中更大者 */
    --glow-size: 80vmax;
}

#background {
    /* 相对视口固定 */
    position: fixed;
    inset: 0;
    /* 内部光晕容器居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 作为背景 */
    z-index: -1;
    /* 背景基础色 */
    background: black;
}

/* 光晕容器 */
#glows {
    height: 100vh;
    width: 100vw;
    /* 匀速旋转动画 */
    animation: spin 60s linear infinite;
}

/* 定义旋转动画 */
@keyframes spin {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

/* 两个内含光晕 */
#glows::before,
#glows::after {
    content: "";
    /* 相对容器定位 */
    position: absolute;
    width: var(--glow-size);
    height: var(--glow-size);
    border-radius: 50%;
    filter: blur(12vmax);
    opacity: 0.5;
    /* GPU 加速 */
    will-change: rotate, opacity, filter, scale;
    /* 透传鼠标 */
    pointer-events: none;
}

#glows::before {
    /* 左上 */
    top: var(--glow-margin);
    left: var(--glow-margin);
    background: radial-gradient(circle, var(--bg-color-1) 0%, transparent 70%);
    /* 不规则动画 */
    animation: glow-orbit-a 12s ease-in-out infinite;
}

#glows::after {
    /* 右下 */
    top: calc(100% - var(--glow-margin));
    left: calc(100% - var(--glow-margin));
    background: radial-gradient(circle, var(--bg-color-2) 0%, transparent 70%);
    /* 不规则动画 */
    animation: glow-orbit-b 12s ease-in-out infinite reverse;
}

/* 定义不规则动画 */
@keyframes glow-orbit-a {

    0%,
    100% {
        translate: calc(-50% + 60px) calc(-50% - 60px);
        scale: 0.9;
        opacity: 0.4;
    }

    25% {
        translate: calc(-50% - 60px) calc(-50% - 60px);
        scale: 1.1;
        opacity: 0.7;
    }

    50% {
        translate: calc(-50% - 60px) calc(-50% + 60px);
        scale: 1.0;
        opacity: 0.5;
    }

    75% {
        translate: calc(-50% + 60px) calc(-50% + 60px);
        scale: 1.05;
        opacity: 0.6;
    }
}

@keyframes glow-orbit-b {

    0%,
    100% {
        translate: calc(-50% - 60px) calc(-50% - 60px);
        scale: 1.05;
        opacity: 0.6;
    }

    25% {
        translate: calc(-50% + 60px) calc(-50% + 60px);
        scale: 1.1;
        opacity: 0.7;
    }

    50% {
        translate: calc(-50% + 60px) calc(-50% - 60px);
        scale: 1.0;
        opacity: 0.5;
    }

    75% {
        translate: calc(-50% - 60px) calc(-50% + 60px);
        scale: 0.9;
        opacity: 0.4;
    }
}

/* 点击烟花特效 */
#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}