:root {
    --animation-duration: 1s;
    --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 通用动画类 - 初始状态 */
.animate-on-scroll {
    opacity: 0;
    transform: translateZ(0); /* 启用GPU加速 */
    will-change: transform, opacity; /* 性能优化 */
    transform-origin: center center;
}

/* 缩放动画 */
.scale-in {
    animation: scaleIn var(--animation-duration) var(--easing) forwards;
}

.scale-out {
    animation: scaleOut var(--animation-duration) var(--easing) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* 向左滑动动画 */
.slide-left-in {
    animation: slideLeftIn var(--animation-duration) var(--easing) forwards;
}

.slide-left-out {
    animation: slideLeftOut var(--animation-duration) var(--easing) forwards;
}

@keyframes slideLeftIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideLeftOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* 向右滑动动画 */
.slide-right-in {
    animation: slideRightIn var(--animation-duration) var(--easing) forwards;
}

.slide-right-out {
    animation: slideRightOut var(--animation-duration) var(--easing) forwards;
}

@keyframes slideRightIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRightOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}

/* 向上滑动动画 */
.slide-up-in {
    animation: slideUpIn var(--animation-duration) var(--easing) forwards;
}

.slide-up-out {
    animation: slideUpOut var(--animation-duration) var(--easing) forwards;
}

@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* 向下滑动动画 */
.slide-down-in {
    animation: slideDownIn var(--animation-duration) var(--easing) forwards;
}

.slide-down-out {
    animation: slideDownOut var(--animation-duration) var(--easing) forwards;
}

@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDownOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100px);
    }
}

/* 淡入淡出动画 */
.fade-in {
    animation: fadeIn var(--animation-duration) var(--easing) forwards;
}

.fade-out {
    animation: fadeOut var(--animation-duration) var(--easing) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 动画延迟工具类 */
.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; }