/**
 * Animate Index - 滚动进入视口动画
 * 使用方式：为需要动画的元素添加 animate-index 类
 * 当元素进入视口时自动触发淡入上移动画
 */

/* 基础动画状态 - 初始隐藏 */
.animate-index {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* 动画激活状态 - 显示 */
.animate-index.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 子元素依次动画 - 支持延迟 */
.animate-index.is-visible:nth-child(1) {
    transition-delay: 0s;
}

.animate-index.is-visible:nth-child(2) {
    transition-delay: 0.1s;
}

.animate-index.is-visible:nth-child(3) {
    transition-delay: 0.2s;
}

.animate-index.is-visible:nth-child(4) {
    transition-delay: 0.3s;
}

.animate-index.is-visible:nth-child(5) {
    transition-delay: 0.4s;
}

/* 同一容器内的连续元素延迟 */
.animate-index.is-visible~.animate-index.is-visible {
    transition-delay: 0.15s;
}