/* ===== 重置样式和全局设置 ===== */
:root {
    --color-white: #fff;
    --color-black: #000;
    --color-yellow: #ffd34f;
    --color-orange: #ff6a41;
    --color-orange-hover: #fa5325;
    --color-gray: #a6a6a6;
    --color-gray-dark: #9a9a9a;
    --font-primary: "Neue Montreal", Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

*,
:after,
:before {
    box-sizing: border-box
}


img,
video {
    height: auto;
    max-width: 100%;
}


:root {
    color-scheme: light;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    box-sizing: border-box;
    color: var(--color-black);
    font-family: var(--font-primary);
    font-size: 62.5%;
    font-weight: 400;
    line-height: 1
}

html.no-scroll {
    overflow: hidden
}

html,
html body {
    background: var(--color-black)
}

html * {
    -webkit-tap-highlight-color: transparent
}

.intro {
    background-color: var(--color-black);
    height: 100vh;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 为intro容器添加黑色蒙版 */
/* .intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 4;
    opacity: 0;
    transition: opacity 1s ease-in-out;
} */

/* .intro.show-overlay::before {
    opacity: 1;
} */

/* 确保intro容器中的内容在蒙版之上 */
.intro__logo,
.intro__title,
.intro__desc {
    z-index: 5;
}

.intro__img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(25vw, 15rem);
    height: calc(min(25vw, 15rem) * 1.533);
    object-fit: cover;
    visibility: hidden;
    /* 性能优化 */
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: optimizeSpeed;
    /* 完全无过渡效果，瞬间切换 */
}

.intro__img.active {
    visibility: visible;
}

.intro__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    opacity: 0;
    /* 初始状态：小矩形裁剪 */
    clip-path: polygon(38% 41%, 62% 41%, 62% 59%, 38% 59%);
    transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease-out;
    /* 前70%匀速，后30%加速的缓动曲线 */
    will-change: clip-path, opacity;
    /* 优化性能 */
    transform: translateZ(0);
    /* 硬件加速 */
}

.intro__video.show {
    opacity: 1;
}

.intro__video.fullscreen {
    /* 最终状态：完整显示 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ===== Logo样式 - 优化过渡 ===== */
.intro__logo {
    position: absolute;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    z-index: 1000;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    /* 更长更流畅的淡入，与clip-path动画时长协调 */
    pointer-events: none;
    will-change: opacity;
}

.intro__logo img {
    width: 14rem;
    height: auto;
}

.intro__logo.show {
    opacity: 1;
}

/* ===== 标题文字样式 ===== */
.intro__title {
    position: absolute;
    top: 34vh;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 1.2rem;
}

.chars {
    font-size: 4.5rem;
    color: var(--color-white);
    opacity: 0;
    transform: rotateY(90deg) translateZ(0);
    transition: all 1.2s ease-in-out;
    transform-origin: center center;
    font-family: "SourceHanSansSC-Bold", sans-serif;
    will-change: transform, opacity;
}

.chars.show {
    opacity: 1;
    transform: rotateY(0deg) translateZ(0);
}

/* ===== 描述文字样式 ===== */
.intro__desc {
    position: absolute;
    top: 43vh;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.9;
    letter-spacing: .16rem;
    opacity: 0;
    transform: translateX(-50%) translateY(3rem) translateZ(0);
    transition: all 1.4s ease-out;
    width: 100%;
    font-family: "FZJunHJW_Zhun", sans-serif;
    will-change: transform, opacity;
}

.intro__desc.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) translateZ(0);
}

.home-about {
    position: relative;
    background-color: var(--color-black);
}

.home-about__content-wrapper {
    mix-blend-mode: screen;
    position: relative;
    z-index: 999;

}

.home-about__content {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    height: 100svh;
    position: relative;
    padding: 43vh 0 0 7.5vw;
}

.home-about__content__date {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    font-family: "SoDoSans-Bold", sans-serif;
}

.home-about__content__title {
    font-size: 4.5rem;
    letter-spacing: 1rem;
    line-height: 1.2;
    margin-bottom: 2.2rem;
    font-family: "SourceHanSansSC-Bold", sans-serif;
}

.home-about__content__desc {
    font-size: 1.5em;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    font-family: "FZJunHJW_Zhun", sans-serif;
    color: rgba(255, 255, 255, 0.9);
}

/* 轮播文字容器 */
.carousel-text-container {
    position: relative;
    min-height: 4.5em;
    /* 预留足够的高度，避免布局跳动 */
}

/* 轮播文字渐隐过渡效果 */
.carousel-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.6s ease-in-out;
}

.home-about__content__desc__symbol {
    font-family: "SourceHanSansSC-Regular", sans-serif;
}

.home-about__images {
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: absolute;
    padding: 0;
    top: 0;
    width: 100%;
    will-change: transform, position;
    /* 优化动画性能 */
    backface-visibility: hidden;
    /* 防止闪烁 */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    /* 开启硬件加速 */
}

/* 当滚动到第二屏时，添加fixed定位 */
.home-about__images.fixed {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 1;
    will-change: auto;
    /* 固定后不再需要will-change */
}

.home-about__images__img {
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    will-change: opacity;
    opacity: 0;
    transition: none;
    /* 移除CSS过渡，使用JS控制 */
    backface-visibility: hidden;
    /* 防止闪烁 */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    /* 开启硬件加速 */
}

/* 设置图片层级 - 确保正确的层叠顺序 */
.home-about__images__img:nth-child(1) {
    z-index: 10;
}

/* 第一张图片最高层级，确保在过渡时可见 */
.home-about__images__img:nth-child(2) {
    z-index: 9;
}

.home-about__images__img:nth-child(3) {
    z-index: 8;
}

.home-about__images__img:nth-child(4) {
    z-index: 7;
}

.home-about__images__img:nth-child(5) {
    z-index: 7;
}

.home-about__images__img:nth-child(6) {
    z-index: 7;
}

/* 循环播放的图片样式 */
.home-about__images__img--carousel {
    z-index: 7 !important;
    /* 确保循环图片在同一层级，但低于前面的基础图片 */
}

/* 第一张图片默认显示 */
.home-about__images__img:first-child {
    opacity: 1;
}

.pin-spacer {
    place-self: auto;
    grid-area: auto;
    z-index: auto;
    float: none;
    flex-shrink: 1;
    display: block;
    position: absolute;
    flex-basis: auto;
    overflow: visible;
    box-sizing: border-box;
}

.home-tribute {
    position: relative;
    height: 70svh;
    width: 100vw;
    background: url(../assets/images/bg/05.jpg) no-repeat center center / cover;
}

.home-tribute__content {
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .5rem;
    gap: .8rem;
}

/* 第三屏行样式 */
.tribute-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
}

/* 第三屏字符样式 */
.tribute-char {
    display: inline-block;
    color: rgb(255, 255, 255);
    transition: color 1s ease-out;
    margin: 0;
    min-width: 1em;
    font-family: "SourceHanSansSC-Bold", sans-serif;
}

/* 字符变黑的状态 */
.tribute-char.dark {
    color: rgb(0, 0, 0);
}

.home-character {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: url(../assets/images/bg/07.jpg) no-repeat center center / cover;

}


.home-character__carousel__list {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
    touch-action: manipulation;
    /* 允许所有方向的滚动和缩放 */
}

.home-character__carousel__list__content {
    display: inline-flex;
    flex-wrap: nowrap;
    position: relative;
    will-change: transform;
    gap: 3rem;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translate3d(0px, 0px, 0px);
    padding: 0 3rem;
}



.slide {
    width: 80vw;
    height: calc(80vw * 1.75);
    flex-shrink: 0;
    /* 防止滑块缩小 */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}


.card {
    width: 100%;
    height: 100%;
    perspective: 80rem;
    position: relative;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    /* keep 3D space for children */
}

.card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card .face,
.card .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card .face {
    transform: rotateY(0deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
}

.font__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.card .back {
    transform: rotateY(180deg);
    display: block;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 1.8;
    background-color: var(--color-white);
}


.back__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.home-character__carousel__control__next,
.home-character__carousel__control__prev {
    width: 9rem;
    height: 1.8rem;
    position: absolute;
    bottom: 7vh;
}

/* 放大缩小循环动画关键帧 */
@keyframes pulse-scale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}


.home-character__carousel__control__next {
    right: 10%;
    /* 添加放大缩小循环动画 */
    animation: pulse-scale 1.5s ease-in-out infinite;
    transform-origin: center;
}

.home-character__carousel__control__prev {
    left: 10%;
    /* 添加放大缩小循环动画 */
    animation: pulse-scale 1.5s ease-in-out infinite;
    transform-origin: center;
}

.front-view {
    position: absolute;
    bottom: 1.1rem;
    right: 1rem;
    pointer-events: none;
    letter-spacing: .5rem;
    font-size: 1.6rem;
    color: #B3823F;
    font-family: "FZJunHJW_Cu", sans-serif;
}


.home-last-screen {
    position: relative;
    height: 100dvh;
    width: 100vw;
    background: url(../assets/images/bg/06.jpg?1.4.5) no-repeat center center / cover;
    color: #fff;
}

.home-last-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.home-last-screen__date {
    position: absolute;
    font-size: 2rem;
    letter-spacing: .1rem;
    top: 22svh;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Pike-Regular", "FZJunHJW_Zhong", sans-serif;
}

.home-last-screen__top-title {
    position: absolute;
    font-size: 2rem;
    line-height: 1.3;
    top: 25svh;
    letter-spacing: .2rem;
    font-family: "FZJunHJW_Cu", sans-serif;
}

.home-last-screen__subtitle {
    position: absolute;
    top: 28svh;
    font-size: 2rem;
    line-height: 1.5;
    font-family: "Pike-Regular", "FZJunHJW_Zhong", sans-serif;
    letter-spacing: .12rem;
}


.home-last-screen__bottom-title {
    position: absolute;
    font-size: 3.4rem;
    line-height: 1.2;
    bottom: 16svh;
    letter-spacing: .4rem;
    font-family: "FZJunHJW_Cu", sans-serif;
}


.home-last-screen-tip {
    position: absolute;
    font-size: .9rem;
    font-family: "Pike-Regular", "FZJunHJW_Zhong", sans-serif;
    opacity: 0.9;
    bottom: 4svh;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    letter-spacing: .02rem;
}

.home-last-screen__btn {
    width: 10rem;
    height: 2rem;
    position: absolute;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9svh;
}



/* 响应式媒体查询 */
@media (max-width: 480px) {


    .intro__logo img {
        width: 8rem;
    }

}

@media (max-width: 415px) {
    .chars {
        font-size: 4.4rem;
    }

    .intro__desc {
        font-size: 1.55rem;
    }

    .home-about__content__title {
        font-size: 4.3rem;
    }

    .home-about__content__date {
        font-size: 1.45rem;
    }

    .home-about__content__desc {
        font-size: 1.45rem;
    }

    .home-last-screen__main-title {
        font-size: 3.8rem;
        margin-bottom: 1rem;
    }

    .front-view {
        font-size: 1.55rem;
    }


}

@media (max-width: 400px) {
    .chars {
        font-size: 4rem;
    }

    .intro__desc {
        font-size: 1.5rem;
    }

    .home-about__content__title {
        font-size: 4rem;
    }

    .home-about__content__date {
        font-size: 1.4rem;
    }

    .home-about__content__desc {
        font-size: 1.4rem;
    }


    .front-view {
        font-size: 1.5rem;
    }

    .home-last-screen__top-title {
        font-size: 2rem;
    }

    .home-last-screen__bottom-title {
        font-size: 3rem;
    }
}


@media (max-width: 380px) {
    .home-about__content {
        padding: 41.5vh 0 0 8vw;
    }

    .chars {
        font-size: 3.5rem;
    }

    .intro__desc {
        font-size: 1.4rem;
    }

    .home-about__content__date {
        font-size: 1.3rem;
    }

    .home-about__content__title {
        font-size: 3.5rem;
    }

    .home-about__content__desc {
        font-size: 1.3rem;
    }

    .home-tribute__content {
        font-size: 4rem;
    }

    .home-character__carousel__control__next,
    .home-character__carousel__control__prev {
        width: 8rem;
        height: 2rem;
        bottom: 4vh;
    }

    .home-last-screen__date {
        font-size: 1.6rem;
        top: 20svh;
    }

    .home-last-screen__top-title {
        font-size: 1.8rem;
        top: 23svh;
    }


    .home-last-screen__subtitle {
        font-size: 1.6rem;
        top: 26svh;
    }

    .home-last-screen__bottom-title {
        font-size: 3rem;
        bottom: 15svh;
    }

    .home-last-screen-tip {

        font-size: .9rem;
        bottom: 3.5svh;
        letter-spacing: .02rem;
    }

    .home-last-screen__btn {
        width: 9rem;
        height: 1.8rem;
        bottom: 8svh;
    }

    .front-view {
        font-size: 1.4rem;
    }
}

/* PC端样式 */
@media (min-width: 998px) {
    body {
        overflow-x: hidden;
    }

    .intro__img {
        width: min(25vw, 20rem);
        height: calc(min(25vw, 20rem) * 1.533);

    }

    .intro__logo {
        top: 9vh;
    }

    .intro__title {
        top: 38vh;
    }

    .chars {
        font-size: 8rem;
        letter-spacing: 1rem;
    }

    .intro__desc {
        top: 50vh;
        font-size: 4rem;
    }

    .home-about__content {
        padding: 36vh 0 0 8vw;
    }

    .home-about__content__date {
        font-size: 3rem;
        line-height: 1.5;
    }

    .home-about__content__title {
        font-size: 8rem;
        letter-spacing: 4rem;
    }

    .home-about__content__desc {
        font-size: 4rem;
        line-height: 1.5;
    }

    .home-tribute__content {
        font-size: 10rem;

    }


    .home-character__carousel__list__content {
        gap: 6rem;
        padding: 0 6rem;

    }

    .slide {
        width: 20vw;
        height: calc(20vw * 1.75);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-character__carousel__control__next,
    .home-character__carousel__control__prev {
        width: 25rem;
        height: 5rem;
        bottom: 7vh;

    }

    .home-last-screen__date {
        font-size: 4.5rem;
        top: 12%;
    }

    .home-last-screen__top-title {
        font-size: 7rem;
        top: 17%;
    }

    .home-last-screen__subtitle {
        font-size: 4.5rem;
        top: 24.5%;
    }


    .home-last-screen__bottom-title {
        font-size: 8rem;
    }

    .home-last-screen__btn {
        width: 25rem;
        height: 5rem;
        bottom: 10%;
    }

    .home-last-screen-tip {
        font-size: 2.5rem;
    }

}