/* ======================================= */
        /* 核心滚动飞入效果 —— 使用 Intersection Observer 配合 CSS 动画 */
        /* 初始状态: 透明 + 不同方向的位移 (飞入预备) */
        /* 注意: 由于我们想要通用的视觉“飞入”，下面定义多个变体，然后配合 .fly-in 类来触发 */
        
        /* 基础飞入类 (默认从下方飞入+轻微弹性) */
        .fly-item {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 3.1s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 2.8s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }


        .fly-item2 {
            opacity: 0;
            transform: translateY(160px);
            transition: opacity 5s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 4.8s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }
        
        /* 不同方向的预备变体 (在未触发时设置偏移) */
        .fly-from-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 1.6s ease-out, transform 2.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .fly-from-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 1.6s ease-out, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .fly-from-up {
            opacity: 0;
            transform: translateY(-40px);
            transition: opacity 1.7s cubic-bezier(0.2, 0.9, 0.4, 1.2), transform 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }
        
        .fly-scale {
            opacity: 0;
            transform: scale(0.92) translateY(20px);
            transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.4, 1.2), transform 1.5s cubic-bezier(0.2, 0.8, 0.4, 1.2);
        }
        
        /* 触发后的可见样式 (飞入结束状态) */
        .fly-item.visible,
        .fly-from-left.visible,
        .fly-from-right.visible,
        .fly-from-up.visible,
        .fly-scale.visible {
            opacity: 1;
            transform: translateX(0) translateY(0) scale(1);
        }
        
        /* 额外添加弹性增强效果: 通过过渡曲线已经具备轻微回弹感，也可以增加关键帧动画加强特殊卡片 */
        /* 针对特定卡片增加更炫酷的弹入效果 (鼠标或者额外装饰) 可选，将其作为滚动飞入额外点缀 */
        @keyframes softWobble {
            0% { transform: scale(0.96) translateY(30px); opacity: 0; }
            60% { transform: scale(1.02) translateY(-2px); opacity: 1; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }
        
        /* 特殊强调卡片使用不同的动画效果， 依然需要结合 visibility 触发 */
        .special-fly {
            opacity: 0;
            /* 初始看不见，等待 visible 后再运用关键帧动画 */
        }
        
        .special-fly.visible {
            animation: softWobble 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
            opacity: 1; /* 关键帧覆盖最终值 */
        }