/* 步骤导航的渐入动画 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 主内容区域的下滑渐入效果 */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 应用动画到步骤导航 */
.steps-nav .step-item {
    animation: slideInLeft 0.5s ease-out forwards;
    opacity: 0;
    will-change: transform, opacity;  /* 优化动画性能 */
}

/* 为每个步骤设置不同的延迟 */
.steps-nav .step-item:nth-child(1) { animation-delay: 0.1s; }
.steps-nav .step-item:nth-child(2) { animation-delay: 0.2s; }
.steps-nav .step-item:nth-child(3) { animation-delay: 0.3s; }
.steps-nav .step-item:nth-child(4) { animation-delay: 0.4s; }

/* 主内容区域的动画 */
.tool-container {
    animation: slideInDown 0.8s ease-out forwards;
    opacity: 0;
    will-change: transform, opacity;  /* 优化动画性能 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 调整步骤导航的动画方向为从上往下 */
    @keyframes slideInTop {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 在移动端时步骤从上往下滑入 */
    .steps-nav .step-item {
        animation: slideInTop 0.4s ease-out forwards;
    }

    /* 减少步骤之间的延迟时间 */
    .steps-nav .step-item:nth-child(1) { animation-delay: 0.05s; }
    .steps-nav .step-item:nth-child(2) { animation-delay: 0.1s; }
    .steps-nav .step-item:nth-child(3) { animation-delay: 0.15s; }
    .steps-nav .step-item:nth-child(4) { animation-delay: 0.2s; }

    /* 主内容区域动画调整 */
    .tool-container {
        animation-duration: 0.6s;  /* 缩短动画时间 */
    }
}

/* 优化动画性能 */
@media (prefers-reduced-motion: reduce) {
    .steps-nav .step-item,
    .tool-container {
        animation: none;
        opacity: 1;
    }
}