/*!
 * 入场动画（模板内置版）
 *
 * 为什么不用 CDN：应用商店要求模板不依赖外部静态资源，且设计站要能离线/内网打开。
 * 这里只保留模板实际用到的三个动画（fadeInUp / fadeInLeft / fadeInRight），
 * 类名与 Animate.css 4.x 的约定兼容（WOW 风格的 .wow + 动画类名），
 * 因此 PHP 里已经写好的 class 不需要改。
 *
 * 约定：JS（js/wow.min.js）在元素进入视口时给元素加 .animate__animated，
 * 动画结束后由 animation-fill-mode: both 保持末态。
 */
.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 尊重系统「减少动态效果」设置：不做位移与淡入，直接显示 */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.animate__animated.fadeInUp {
    animation-name: wsFadeInUp;
}

.animate__animated.fadeInLeft {
    animation-name: wsFadeInLeft;
}

.animate__animated.fadeInRight {
    animation-name: wsFadeInRight;
}

@keyframes wsFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wsFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-32px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wsFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(32px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}