/* 自定义动画 - 替代 Animate.css */

/* 基础动画类 */
.animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* 淡入向上动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* 延迟类 */
.fade-in-up-delay-1s { animation-delay: 1s; }
.fade-in-up-delay-2s { animation-delay: 2s; }
.fade-in-up-delay-3s { animation-delay: 3s; }

/* 动态延迟类 - 用于JavaScript */
.fade-in-up-delay-0ms { animation-delay: 0ms; }
.fade-in-up-delay-100ms { animation-delay: 100ms; }
.fade-in-up-delay-200ms { animation-delay: 200ms; }
.fade-in-up-delay-300ms { animation-delay: 300ms; }
.fade-in-up-delay-400ms { animation-delay: 400ms; }
.fade-in-up-delay-500ms { animation-delay: 500ms; }
.fade-in-up-delay-600ms { animation-delay: 600ms; }
.fade-in-up-delay-700ms { animation-delay: 700ms; }
.fade-in-up-delay-800ms { animation-delay: 800ms; }
.fade-in-up-delay-900ms { animation-delay: 900ms; }
.fade-in-up-delay-1000ms { animation-delay: 1000ms; }
.fade-in-up-delay-1100ms { animation-delay: 1100ms; }
.fade-in-up-delay-1200ms { animation-delay: 1200ms; }

/* 淡入淡出效果 - 替代jQuery的fadeIn/fadeOut */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* 滑入动画 - 用于通知（keyframes 定义在 common.css 中） */

.slide-in-right {
    animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 性能优化 */
.fade-in-up,
.slide-in-right {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* 响应式动画控制 */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .slide-in-right,
    .fade-in,
    .fade-out {
        animation: none;
        transition: none;
    }
}