/**
 * 粒子背景特效样式
 * 为整个项目提供动态粒子背景效果
 */

/* ========== 粒子画布容器 ========== */

#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* ========== 页面背景（由liquid-glass.css控制）========== */
/* 不要在这里设置body背景，避免覆盖liquid-glass.css的设置 */

/* 深色主题页面的粒子背景 */
body.dark-theme {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ========== 粒子层混合模式 ========== */

.particles-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(102, 126, 234, 0.03) 0%, transparent 50%);
}

/* ========== 浮动粒子装饰元素 ========== */

.floating-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
    animation: float-particle linear infinite;
}

@keyframes float-particle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

/* ========== 粒子连接线（Canvas绘制）========== */

/* 此部分由JavaScript动态控制，无需CSS */

/* ========== 响应式调整 ========== */

@media (max-width: 768px) {
    .floating-particle {
        display: none;
        /* 移动端隐藏浮动粒子以提升性能 */
    }
}

/* ========== 性能优化：减少动画 ========== */

@media (prefers-reduced-motion: reduce) {
    #particles-canvas {
        display: none;
    }

    .particles-overlay {
        display: none;
    }

    .floating-particle {
        display: none;
    }
}