/* 滚动动画效果 */

/* 初始状态 - 隐藏 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 进入视口后 - 显示 */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 从左侧滑入 */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 从右侧滑入 */
.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 放大出现 */
.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* 淡入效果 */
.animate-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.animate-fade.is-visible {
    opacity: 1;
}

/* 延迟动画 - 用于子元素 */
.animate-delay-1 {
    transition-delay: 0.1s;
}

.animate-delay-2 {
    transition-delay: 0.2s;
}

.animate-delay-3 {
    transition-delay: 0.3s;
}

.animate-delay-4 {
    transition-delay: 0.4s;
}

.animate-delay-5 {
    transition-delay: 0.5s;
}

/* 防止首屏元素初始隐藏 */
.hero .animate-on-scroll,
.hero .animate-fade {
    opacity: 1;
    transform: none;
}