/* 背景粒子特效样式 */
/* 噪点纹理叠加 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==');
    opacity: 0.1;
    pointer-events: none;
    z-index: -2;
}

/* 多尺寸光点通用样式 */
[class^="sparkle-"] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.sparkle-tiny {
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    animation: float-tiny 3s infinite ease-in-out;
}

.sparkle-small {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.35);
    animation: float-small 4s infinite ease-in-out;
}

.sparkle-medium {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    animation: float-medium 5s infinite ease-in-out;
}

.sparkle-large {
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.2);
    animation: float-large 6s infinite ease-in-out;
    filter: blur(1px);
}

.sparkle-huge {
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.15);
    animation: float-huge 7s infinite ease-in-out;
    filter: blur(2px);
}

.sparkle-massive {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    animation: float-massive 8s infinite ease-in-out;
    filter: blur(3px);
}

/* 漂浮动画 */
@keyframes float-tiny {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(10px, -80px);
        opacity: 0;
    }
}

@keyframes float-small {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translate(-15px, -120px);
        opacity: 0;
    }
}

@keyframes float-medium {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        transform: translate(20px, -160px);
        opacity: 0;
    }
}

@keyframes float-large {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: translate(-25px, -200px);
        opacity: 0;
    }
}

@keyframes float-huge {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        transform: translate(30px, -240px);
        opacity: 0;
    }
}

@keyframes float-massive {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 0.15;
    }

    100% {
        transform: translate(40px, -300px);
        opacity: 0;
    }
}