.navbox {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.nav-list li {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.nav-bottom {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.nav-list li:hover {
    cursor: pointer;
}

/* 确保动画过程中元素可见 */
.nav-list li,
.nav-bottom {
    visibility: visible !important;
}

/* 动画过程中的过渡效果 */
.nav-list li,
.nav-bottom {
    transition: none; /* 移除CSS过渡，使用GSAP控制 */
}

/* 确保导航链接在动画过程中可点击 */
.nav-list li a,
.nav-bottom a {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* 动画加载状态 */
.nav-list.loading li,
.nav-bottom.loading {
    opacity: 0;
    transform: translateX(-100px);
}

/* 确保动画容器不会影响布局 */
.navbox {
    overflow: visible;
}

/* 动画过程中的性能优化 */
.nav-list li,
.nav-bottom {
    contain: layout style paint;
}

/* 响应式动画调整 */
@media (max-width: 768px) {
    .nav-list li {
        transform-origin: left center;
    }
    
    .nav-bottom {
        transform-origin: center bottom;
    }
}

/* 动画完成后的状态 */
.nav-list li.animated,
.nav-bottom.animated {
    transform: none;
    opacity: 1;
}

/* 确保动画不会影响其他元素 */
.navbox * {
    box-sizing: border-box;
}