/**
 * 滚动入场动画样式
 * 兼容桌面端和移动端（iPad、手机）
 * 使用 CSS class 控制状态，确保兼容性
 */

.animate-on-scroll {
    /* 基础动画设置 - 默认隐藏状态 */
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.animate-on-scroll.animate-visible {
    /* 可见状态 - 动画完成后 */
    opacity: 1;
    transform: translateY(0);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .animate-on-scroll {
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        transform: translateY(40px);
    }
    
    .animate-on-scroll.animate-visible {
        transform: translateY(0);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .animate-on-scroll {
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        transform: translateY(50px);
    }
    
    .animate-on-scroll.animate-visible {
        transform: translateY(0);
    }
}