/* css/animations.css */
/* 滚动动画相关样式 */

/* 1. 定义动画关键帧 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. 为需要动画的元素设置初始状态和动画类 */
/* 初始状态：隐藏 */
.animate-on-scroll {
    opacity: 0;
    /* 动画将在.show类被添加时触发，由JS控制 */
}
/* 当元素进入视口并添加了.show类后，执行动画 */
.animate-on-scroll.show {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* 缓动函数，使动画更自然 */
}
/* 为不同动画效果定义具体的动画名 */
.animate-on-scroll.fade-up.show { animation-name: fadeInUp; }
.animate-on-scroll.fade-left.show { animation-name: fadeInLeft; }
.animate-on-scroll.fade-right.show { animation-name: fadeInRight; }
.animate-on-scroll.fade-in.show { animation-name: fadeIn; }
.animate-on-scroll.zoom-in.show { animation-name: zoomIn; }

/* 3. 可选：为不同区块的元素添加动画延迟，形成序列效果 */
.product-card:nth-child(2).show { animation-delay: 0.1s; }
.product-card:nth-child(3).show { animation-delay: 0.2s; }
.solution-card:nth-child(2).show { animation-delay: 0.1s; }
.solution-card:nth-child(3).show { animation-delay: 0.2s; }
.solution-card:nth-child(4).show { animation-delay: 0.3s; }
.news-card:nth-child(2).show { animation-delay: 0.1s; }
.news-card:nth-child(3).show { animation-delay: 0.2s; }