/* ==================== 滚动触发动画 ==================== */
/* 基于 WOW.js + Animate.css 风格，使用纯 CSS 实现 */

/* 动画元素初始状态 - 隐藏 */
.wow {
    opacity: 0;
    visibility: hidden;
}

/* 动画触发后的状态 */
.wow.animated {
    visibility: visible;
    animation-fill-mode: both;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==================== 动画定义 ==================== */

/* 从下往上淡入 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 60px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 只在 animated 状态时才应用动画 */
.wow.animated.fadeInUp {
    animation-name: fadeInUp;
}

/* 从左往右淡入 */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-80px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.wow.animated.fadeInLeft {
    animation-name: fadeInLeft;
}

/* 从右往左淡入 */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(80px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.wow.animated.fadeInRight {
    animation-name: fadeInRight;
}

/* 直接淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.wow.animated.fadeIn {
    animation-name: fadeIn;
}

/* 缩放淡入 */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.wow.animated.zoomIn {
    animation-name: zoomIn;
}

/* 从下弹入 */
@keyframes bounceInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 60px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -10px, 0);
    }
    80% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.wow.animated.bounceInUp {
    animation-name: bounceInUp;
}

/* ==================== 动画时长 ==================== */

.animated.faster {
    animation-duration: 0.8s;
}

.animated.fast {
    animation-duration: 1s;
}

.animated.slow {
    animation-duration: 1.5s;
}

.animated.slower {
    animation-duration: 2s;
}

/* ==================== 动画延迟 ==================== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }
.delay-9 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1s; }

/* ==================== 性能优化 ==================== */
.wow {
    will-change: opacity, transform;
}

.wow.animated {
    will-change: auto;
}

/* 减少移动端动画（可选，提升性能） */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* 移动端简化动画 */
@media (max-width: 768px) {
    .wow.animated {
        animation-duration: 0.6s;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 30px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translate3d(-30px, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translate3d(30px, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}