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

.animate-on-scroll {
    /* 默认可见状态 - 关闭滚动动画 */
    opacity: 1;
    transform: translateY(0);
    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);
}

/* 移动端优化 */