/* 背景特效容器 */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #0a0a1f !important;
}

/* 落叶特效 */
.falling-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.leaf {
    position: fixed;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, 
        rgba(124, 77, 255, 0.9) 0%, 
        rgba(224, 64, 251, 0.6) 100%);
    clip-path: path('M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z');
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    filter: drop-shadow(0 0 3px rgba(124, 77, 255, 0.5));
}

@keyframes falling {
    0% {
        transform: translate(0, -50px) rotate(var(--start-rotate));
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--fall-x), calc(100vh + 50px)) rotate(var(--end-rotate));
        opacity: 0;
    }
}

/* 页面切换动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeIn 0.8s ease-out;
}