/* 固定在视口中心的 about 粒子背景，尺寸对齐 index_about 的 about-back */
.top-sections{
    position: relative;
    overflow: hidden;
}

.top-sections::after{
    content: "";
    height: calc(80 * var(--rpx-50));
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(to top, #080914ff, #08091400);
    z-index: 210;
}

.top-back{
    position: absolute;
    left: calc((100vw - clamp(800px, 83.3333vw, 1600px)) / 2);
    top: calc(72 * var(--rpx-50));
    width: clamp(800px, 83.3333vw, 1600px);
    height: clamp(300px, calc(31.25vw + 0px), 600px);
    z-index: 1;
    overflow: hidden;
    background-color: #080914;
    pointer-events: none;
}

.top-back-canvas{
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.top-back-particles{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
}

.intro{
    position: relative;
    z-index: 2;
}

section.intro{
    padding-top: calc(540 * var(--rpx-67));
    padding-bottom: calc(120 * var(--rpx-50));
}

.intro .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro .title{
    font-weight: 600;
    font-size: calc(68 * var(--rpx-50));
    margin-top: 0;
    line-height: 1.5em;
}

.intro .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.intro .desc{
    width: clamp(720px, calc(22.9167vw + 500px), 940px);
    color: #fff9;
    line-height: calc(30em / 16);
    margin-top: calc(54 * var(--rpx));
}

.intro .vid-ctn{
    margin-top: calc(130 * var(--rpx-50));
    width: min(100%, calc(1000 * var(--rpx-75)));
    margin-inline: auto;
    aspect-ratio: 1000 / 580;
    height: auto;
    padding: calc(20 * var(--rpx-75));
    position: relative;
    border-radius: calc(30 * var(--rpx-75));
    overflow: visible;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.intro .vid-ctn::before{
    content: "";
    position: absolute;
    width: calc(1186 * var(--rpx-50));
    height: calc(560 * var(--rpx-50));
    background: url("../images/intro_lights_trimmed.webp?v=1.1") center/contain no-repeat;
    left: calc((100% - 1186 * var(--rpx-50)) / 2);
    bottom: 100%;
}

.vid-ctn::after{
    opacity: 1;
}

.vid-ctn .cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    border-radius: calc(15 * var(--rpx));
    overflow: hidden;
}

.vid-ctn video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.vid-ctn .btn-layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 210;
    cursor: pointer;
}

.play-hint{
    width: calc(128 * var(--rpx-75));
    height: calc(130 * var(--rpx-75));
    background: url("../images/play_hint.webp") center/contain no-repeat;
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.vid-ctn:hover .play-hint{
    transform: scale(1.08);
}

section.mission{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));

    position: relative;
    z-index: 200;
}

section.mission .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mission .title{
    font-size: calc(68 * var(--rpx-50));
    margin-top: 0;
    font-weight: 600;
}

.mission .pill-tag{
    margin-top: calc(22 * var(--rpx));
}
 
.mav-list{
    width: 100%;
    --column: 3;
    --gap: calc(60 * var(--rpx-50));
    margin-top: calc(100 * var(--rpx-50));
}

.mav{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px #fff3;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: #0002;
    border-radius: calc(30 * var(--rpx));
    height: calc(440 * var(--rpx));
    padding: calc(40 * var(--rpx-50));
    text-align: center;
}

.mav .icon{
    width: calc(80 * var(--rpx));
    height: calc(80 * var(--rpx));
}

.mav .line1{
    font-weight: 600;
    margin-top: calc(72 * var(--rpx-50));
    font-size: calc(38 * var(--fpx-67));
}
.mav .line2{
    color: #fff9;
    font-size: calc(24 * var(--rpx-67));
    margin-top: calc(14 * var(--rpx));
}

section.history{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.history .title{
    margin-top: 0;
    font-weight: 600;
    font-size: calc(54 * var(--fpx-50));
}

.history .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.history .subtitle{
    font-size: calc(24 * var(--rpx-75));
    margin-top: calc(16 * var(--rpx));
}

.timeline-ctn{
    padding-top: calc(100 * var(--rpx-50));
    width: 100%;
    position: relative;
}

.timeline-back-glows{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 180;
}

.timeline-back-glow{
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: var(--size, 520px);
    height: var(--size, 520px);
    transform: translate(-50%, -50%) scale(var(--scale, 1));
    transform-origin: 50% 50%;
    background: url("../images/back_glow.webp") center/contain no-repeat;
    filter: blur(calc(2 * var(--rpx-50)));
    will-change: transform;
}

.timeline{
    padding-left: var(--wrapper-margin);
    padding-right: var(--wrapper-margin);
    display: flex;
    align-items: flex-start;
    gap: calc(160 * var(--rpx-50));
    width: fit-content;
    position: relative;
    z-index: 210;
}

.timeline .year{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline .year-name{
    font-weight: 600;
    font-size: calc(54 * var(--fpx-50));
}

.timeline .year-desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: calc(84em / 28);
    line-height: calc(42em / 28);
    font-weight: 600;
    font-size: calc(24 * var(--fpx-67));
}

.timeline .months{
    display: flex;
    flex-wrap: nowrap;
    gap: calc(20 * var(--fpx));
    margin-top: calc(50 * var(--rpx));
}

.timeline .month{
    width: calc(340 * var(--fpx));
    border-radius: calc(30 * var(--fpx));
    box-shadow: inset 0 0 0 2px #fff2;
    padding: calc(30 * var(--fpx));
}

.timeline .month-name{
    width: fit-content;
    min-width: calc(60em / 16);
    height: calc(30em / 16);
    border-radius: calc(15em / 16);
    padding-left: .75em;
    padding-right: .75em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline .month-name::after{
    content: "";
    opacity: 1;
    padding: 1.5px;
}

.timeline .month-desc{
    margin-top: calc(24 * var(--rpx));
    color: #fff9;

    height: calc(120em / 16);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.72) rgba(255, 255, 255, 0.18);
    padding-right: .25em;
}

.timeline .month-desc::-webkit-scrollbar{
    width: 6px;
}

.timeline .month-desc::-webkit-scrollbar-track{
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.timeline .month-desc::-webkit-scrollbar-thumb{
    background: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
}

.timeline .month-desc::-webkit-scrollbar-button{
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.timeline .month-desc::-webkit-scrollbar-button:single-button{
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.timeline .month-desc::-webkit-scrollbar-button:vertical:start:decrement,
.timeline .month-desc::-webkit-scrollbar-button:vertical:end:increment{
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.timeline .month-desc p{
    padding-left: 1.5em;
    position: relative;
    line-height: calc(30em / 16);
}

.timeline .month-desc p::before{
    content: "";
    border-radius: 50%;
    position: absolute;
    top: calc(14em / 16);
    left: .7em;
    width: calc(4em / 16);
    height: calc(4em / 16);
    background-color: currentColor;
}

.timeline-bottom{
    margin-top: calc(40 * var(--rpx));
    width: 100%;
    position: relative;
    z-index: 220;
}

.timeline-stripe{
    width: 100%;
    position: relative;
    height: calc(30 * var(--rpx));
}

.timeline-stripe .gray{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 220;
    background: repeating-linear-gradient(to right, #FFFFFF00 0px, #FFFFFF00 18px, #FFFFFF1c 18px, #FFFFFF1f 20px);
}

.timeline-stripe .filled{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 230;
    background: var(--theme-gradient-horizontal);
    mask-image: repeating-linear-gradient(to right, #FFFFFF00 0px, #FFFFFF00 18px, #fff 18px, #fff 20px);
}

.timeline-years{
    width: var(--wrapper-width);
    display: flex;
    margin: calc(25 * var(--fpx)) auto 0;
    justify-content: space-between;
    color: #fff9;
}

.timeline-years .year.active{
    color: #fff;
}

.timeline-controls{
    justify-content: center;
    margin-top: calc(30 * var(--rpx));
    padding-left: var(--wrapper-margin);
    padding-right: var(--wrapper-margin);
}

section.honors{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));

    display: flex;
    flex-direction: column;
    align-items: center;

    background: url("../images/honor_back.webp") center bottom/100% auto no-repeat;
}

.honors .title{
    font-weight: 600;
    font-size: calc(54 * var(--fpx-50));
    margin-top: 0;
}

.honors .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.swiper-honors{
    margin-top: calc(60 * var(--rpx-50));
    perspective: 1200px;
    overflow: visible;
    width: 100%;
}

.swiper-honors .swiper-wrapper{
    align-items: center;
}

.swiper-honors .swiper-slide{
    transition: opacity .35s ease;
    opacity: .55;
    width: calc(600 * var(--rpx));
}

.swiper-honors .honor{
    width: calc(600 * var(--rpx));
}

.swiper-honors .swiper-slide img{
    display: block;
    border-radius: calc(20 * var(--rpx));

    max-width: 100%;
    max-height: calc(360 * var(--rpx));

    width: auto;
    height: auto;
    margin: auto;
}

.swiper-honors .swiper-slide .name{
    margin-top: calc(22 * var(--rpx));
    text-align: center;
    font-size: calc(20 * var(--fpx-75));
}

.swiper-honors .swiper-slide-active{
    opacity: 1;
}

.swiper-honors .swiper-slide-prev,
.swiper-honors .swiper-slide-next{
    opacity: .8;
}

.swiper-honors .swiper-controls{
    margin-top: calc(28 * var(--rpx));
    justify-content: center;
}


@media (max-width: 828px) {
    .top-back{
        width: 100vw;
        height: 50vw;
        left: 0;
        /* 桌面用 72*rpx-50；手机整体上移，避免粒子区视觉上像卡在视口正中 */
        top: calc(20 * var(--rpx-67));
    }

    .intro .desc{
        width: 100%;
    }

    .play-hint{
        width: calc(160 * var(--rpx));
        height: calc(162.5 * var(--rpx));
    }

    .mav-list{
        --column: 1;
    }

    .swiper-honors{
        margin-top: calc(36 * var(--rpx));
    }

    .swiper-honors .swiper-slide .name{
        margin-top: calc(14 * var(--rpx));
    }

    .timeline{
        flex-direction: column;
    }

    .timeline .year{
        width: 100%;
    }
    .timeline .year-desc{
        height: auto;
    }

    .timeline .months{
        flex-wrap: wrap;
        gap: calc(30 * var(--rpx));
    }

    .timeline .month{
        width: 100%;
        padding: calc(30 * var(--rpx)) calc(30 * var(--rpx)) calc(42 * var(--rpx));
        height: auto;
        min-height: unset;
    }

    .timeline-bottom{
        display: none;
    }

    section.honors{
        background-size: auto 100%;
        background-position: center;
    }

}