/* 首页专用样式：Hero 粒子背景
   由 js/ui.js 动态创建 .particle 节点，动画参数在 JS 中随机化。 */
.particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: float-particle infinite linear;
}

@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}