/**
 * @file index_header.css
 * @description 首屏视觉与企业愿景卡片展开/收缩样式
 */

 .header_track_container {
    position: relative;
    width: 100%;
    height: 4800px;
}

.header_track_container .main_container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_track_container .main_container .height_limit {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #EEEFF1;
}

.header_track_container .main_container .top_list {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 0;
    display: flex;
    align-items: center;
}

.header_track_container .main_container .center_list {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_track_container .main_container .bottom_list {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 0;
    display: flex;
    align-items: center;
}

.position_center_pin_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 94%;
    font-size: 0;
    will-change: width, transform;
}

.position_center_pin_container .has_volume {
    position: relative;
    height: 100%;
    flex-shrink: 0;
}

.level_1,
.level_2_l,
.level_2_r,
.level_3_l,
.level_3_r {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    will-change: transform;
    transform: translateZ(0);
    min-height: 0;
}

.size_fixed {
    width: 31vw;
    height: 94%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 999px;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-right: 2.8vw;
    will-change: transform;
}

.size_monitor {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 3vw;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-right: 2.8vw;
}

.level_3_r .size_monitor {
    margin-right: 0vw;
}

.level_2_r {
    will-change: transform;
}

.level_3_r {
    transform-origin: center center;
    will-change: transform;
}

.level_3_r .vassal_left {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    transform-origin: right center;
    font-size: 3.542vw;
    font-weight: bold;
    padding: 0 1.46vw;
    box-sizing: border-box;
    white-space: nowrap;
    color: #313131;
}

.level_3_r .vassal_right {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    transform-origin: left center;
    font-size: 3.542vw;
    font-weight: bold;
    padding: 0 1.46vw;
    box-sizing: border-box;
    white-space: nowrap;
    color: #313131;
}

.level_3_r .vassal_bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transform-origin: center top;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.level_3_r .vassal_bottom .p_1 {
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    padding: 3.6vh 0 3.5vh;
    padding: 3.6svh 0 3.5svh;
    box-sizing: border-box;
    color: #313131;
    font-size: 3.542vw;
}

.level_3_r .vassal_bottom .p_2 {
    width: 32vw;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    font-size: 1.25vw;
    line-height: 1.5;
    margin-bottom: 3svh;
    color: #4D4D4D;
}

.main_container .bg_text {
    position: absolute;
    top: 17%;
    font-size: 10vw;
    line-height: 1;
    font-weight: bold;
    color: rgba(179, 179, 179, 0);
    background: linear-gradient(0deg, rgba(225,225,226,0) 0%, rgba(83,83,83,0.48) 48.2666015625%, #535353 100%);
    opacity: 0.2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

/* ========================================================
   📱 移动端首屏横向推流与文字排版自适应 (Max-Width: 996px)
======================================================== */
@media screen and (max-width: 996px) {
    /* 1. 手势操作行程合理缩短 */
    .header_track_container {
        height: 3800px;
    }
    .header_track_container .main_container {
        height: 100svh;
    }
    /* 2. 上下流光副卡片同步等比收窄至 45vw，保持全场立式节奏一致 */
    .size_fixed {
        width: 45vw;
        margin-right: 3.6vw;
        border-radius: 999px;
    }

    /* 3. 中间主卡片容器与间隙匹配 */
    .level_2_l {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        margin-right: 3.6vw !important;
    }

    .level_2_l .size_monitor {
        width: 100% !important;
        height: 100% !important;
        margin-right: 0 !important;
        object-fit: cover;
    }

    /* 后面卡片在移动端同步收窄为 45vw 胶囊宽，右边隙 3.6vw */
    .level_2_r .size_monitor {
        width: 45vw !important;
        height: 100% !important;
        margin-right: 3.6vw !important;
        flex-shrink: 0;
    }

    /* 终局核心卡（最后一张）清除右边距 */
    .level_3_r .size_monitor {
        margin-right: 0 !important;
    }

    /* 4. 背景英文字印位置与大小 */
    .main_container .bg_text {
        top: 13%;
        font-size: 19vw;
        opacity: 0.16;
        text-align: center;
        background: linear-gradient(0deg, rgba(225,225,226,0) 0%, rgba(83,83,83,0.48) 80%, #535353 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        pointer-events: none;
    }

    /* 5. 左右破雾文字 ("源自" / "中国") 适配 */
    .level_3_r .vassal_left,
    .level_3_r .vassal_right {
        font-size: 4vh;      /* 经 1.92 倍反向放大后视觉约为 29px，大气醒目且不碰壁 */
        font-size: 4svh;      /* 经 1.92 倍反向放大后视觉约为 29px，大气醒目且不碰壁 */
        padding: 0 4.4vw;
    }

    .level_3_r .vassal_bottom {
        width: -webkit-max-content; /* 🌟 兜底：兼容老版本 iOS / 老安卓魔改内核 */
        width: -moz-max-content;    /* 兜底：老火狐 */
        width: max-content;         /* 现代标准 */
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 标题：100% 保持你原本的所有字号、宽度、行高与间距参数 */
    .level_3_r .vassal_bottom .p_1 {
        width: 63vw;          /* 保持你的 63vw */
        max-width: 100%;
        margin-left: auto;    /* 🌟 确保水平绝对居中 */
        margin-right: auto;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        font-size: 4vh;    /* 保持你的字号 */
        font-size: 4svh;    /* 保持你的字号 */
        line-height: 1.5;     /* 保持你的行高 */
        padding: 2.56vh 0 4.4vh;   /* 保持你的内边距 */
        padding: 2.56svh 0 4.4svh;   /* 保持你的内边距 */
    }

    /* 副文描述：100% 保持你原本的所有字号、宽度、行高与间距参数 */
    .level_3_r .vassal_bottom .p_2 {
        width: 77vw;          /* 保持你的 77vw */
        max-width: 100%;
        margin-left: auto;    /* 🌟 确保水平绝对居中 */
        margin-right: auto;
        text-align: center;
        font-size: 1.9vh;     /* 保持你的字号 */
        font-size: 1.9svh;     /* 保持你的字号 */
        line-height: 1.6;     /* 保持你的行高 */
        margin-bottom: 7.3vh;  /* 保持你的下间距 */
        margin-bottom: 7.3svh;  /* 保持你的下间距 */
        color: #5a5a5a;
    }

    /* 探索按钮：居中对齐 */
    .level_3_r .vassal_bottom .tr_btn {
        margin-top: 2px;
        margin-left: auto;
        margin-right: auto;
    }
}