@charset "utf-8";
/* ============================================================
 * 首页宣传区（创新启新局，实干促发展）—— 机场全景视差版
 * 结构：.sus_scene > .sus_stage(全景图 z1 / 遮罩 z10 / 文字 z20)
 * 特效（配合航空港俯拍全景的分层构图：前景停机坪 / 中景航站楼 / 远景山林）：
 *   1) 宽屏(>=1200)视差滚动：全景图以低于页面的速度平移并常驻微放大
 *      （JS 每帧写 transform），文案层反向漂移，滚动时产生前后景纵深；
 *      指针移动附带轻微视差漂移，强化"空中俯瞰"的悬浮感；
 *   2) 可读性遮罩：顶部渐变压深 + 文案位置柔光带，白字落在图面上对比充足；
 *   3) 窄屏(<=1199)回退：文字回到全景下方常规流（深字白底），
 *      全景保留 Ken Burns 缓推动画，无 JS 视差。
 * 无障碍：prefers-reduced-motion: reduce 时仅关闭自主动画（Ken Burns 缓推、
 *   文案入场过渡，文案直接可见）；滚动视差与遮罩/白字保留——视差完全由
 *   用户滚动驱动、无自主运动（与园区小车动画"用户明确要求常动"同一策略）。
 * ============================================================ */

.sus_scene {
    position: relative;
    width: 100%;
    background: #fff;
    text-align: center;
    overflow: hidden;
}

/* ---- 主舞台：全景图在文档流中撑高，文字层绝对定位 ---- */
.sus_stage {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden; /* 裁剪视差平移/放大后的溢出 */
}
.sus_pano {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    animation: sus_kenburns 28s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes sus_kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* ---- 可读性遮罩：图面上浅下深渐变 + 文案区柔光带（仅宽屏文字压图时启用） ---- */
.sus_scrim {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    background:
        radial-gradient(62% 46% at 50% 26%, rgba(7, 26, 48, .42) 0%, rgba(7, 26, 48, .26) 46%, rgba(7, 26, 48, 0) 74%),
        linear-gradient(to bottom, rgba(6, 22, 40, .34) 0%, rgba(6, 22, 40, .12) 34%, rgba(6, 22, 40, 0) 58%);
}

/* ---- 文字层：绝对定位于全景之上（区块居中时文案恰好压在远景山林带） ---- */
.sus_cont {
    position: absolute;
    top: 12%;
    left: 0;
    z-index: 20;
    width: 100%;
    text-align: center;
}
.sus_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    max-width: 1020px;
    padding: 0 24px;
}
.sus_tit {
    text-align: center;
}
.sus_tit .mod_tit48 {
    text-align: center;
}
.sus_desc {
    max-width: 1020px;
    text-align: center;
}
.sus_desc_info {
    margin-bottom: 48px;
}
.sus_desc_info p {
    color: #333;
    line-height: 1.75;
}
.sus_desc .spbm_more {
    display: inline-block;
}

/* ---- 文案分层入场：初始下移隐藏，.on 后依次上移淡入 ---- */
.sus_scene .sus_tit,
.sus_scene .sus_desc_info,
.sus_scene .sus_desc .spbm_more {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.sus_scene.on .sus_tit {
    opacity: 1;
    transform: translateY(0);
}
.sus_scene.on .sus_desc_info {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
}
.sus_scene.on .sus_desc .spbm_more {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s;
}

/* ============================================================
 * 宽屏（>=1200）：视差滚动生效 + 白字压图。
 * JS 会给 .sus_scene 加 .sus-desktop、给 .sus_stage 加 .sus-parallax，
 * 未启用 JS 时自动回退到上方窄屏样式（Ken Burns + 深色文字遮罩隐藏）。
 * ============================================================ */
@media screen and (min-width: 1200px) {
    /* JS 接管平移后关闭 Ken Burns，避免动画 transform 覆盖内联视差 */
    .sus_scene.sus-desktop .sus_pano {
        animation: none;
        transform: scale(1.14);
    }
    .sus_scene.sus-desktop .sus_scrim {
        opacity: 1;
    }
    .sus_scene.sus-desktop .sus_tit .mod_tit48 {
        color: #fff;
        text-shadow: 0 2px 18px rgba(4, 18, 34, .45);
    }
    .sus_scene.sus-desktop .sus_desc_info p {
        color: rgba(255, 255, 255, .94);
        text-shadow: 0 1px 10px rgba(4, 18, 34, .5);
    }
    .sus_scene.sus-desktop .sus_desc .spbm_more p {
        color: #fff;
        border-color: rgba(255, 255, 255, .85);
    }
    .sus_scene.sus-desktop .sus_desc .spbm_more:hover p,
    .sus_scene.sus-desktop .sus_desc a:hover .spbm_more p {
        background: #fff;
        color: #0d3f86;
    }
}

/* ---- 响应式 ---- */
@media screen and (max-width: 1440px) {
    .sus_desc_info {
        margin-bottom: 40px;
    }
}
/* ≤1199：文字层转为常规流（在全景下方），阅读最稳 */
@media screen and (max-width: 1199px) {
    .sus_cont {
        position: relative;
        top: auto;
        padding: 26px 0 10px;
    }
}
@media screen and (max-width: 767px) {
    .sus_desc_info {
        margin-bottom: 26px;
    }
}

/* ---- 减弱动态效果偏好：仅关闭自主动画（Ken Burns、入场过渡），
       滚动视差与遮罩白字保留（视差由用户滚动驱动，非自主运动） ---- */
@media (prefers-reduced-motion: reduce) {
    .sus_pano {
        animation: none;
    }
    .sus_scene .sus_tit,
    .sus_scene .sus_desc_info,
    .sus_scene .sus_desc .spbm_more {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .sus_scrim {
        transition: none;
    }
}