html, body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* 封面的色块动画 */
/* .slide-container {
    position: relative;
    width: 2720px;
    height: 1930px;
    overflow: hidden;
} */

.color-block, .slide-in-image {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: -100%;
    transition: left 0.8s ease-in-out;
}

.color-block {
    background-color: #1f265d; /* 色块 */
    z-index: 1;
}

.slide-in-image {
    z-index: 0;
    transition-delay: 0.3s; /* 图片动画延迟，等待色块动画完成 */
}


/* 侧滑菜单 */

    .menu-button {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 24px;
        border: none;
        background: none;
        cursor: pointer;
        z-index: 1000;
        color: white;
        z-index: 1000;/*让菜单按钮置于最顶层*/
    }

    .side-menu {
        position: fixed;
        width: 250px;
        height: 100%;
        background-color: #333;
        top: 0;
        right: -100%; /* Ensure it starts completely offscreen */
        transition: right 0.5s ease-in-out;
        color: white;
        padding: 20px;
        z-index: 999;/*让菜单置于顶层*/
    }


    .side-menu ul {
        list-style: none;
        padding: 0;
    }

    .side-menu li a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 10px;
        transition: color 0.3s;
    }

    .side-menu li a:hover {
        color: #ccc;
    }

    /* 侧滑菜单内部动画 */
    .side-menu ul li {
        opacity: 0; /* Start with items invisible */
        transform: translateY(-20px); /* Start slightly above their final position */
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    /* Animation for the text to slide in from the left */
    @keyframes slideInText {
        from {
            clip-path: inset(0 100% 0 0); /* Clip the text on the right, hiding it */
        }
        to {
            clip-path: inset(0 0 0 0); /* Reveal the text */
        }
    }

    .side-menu ul li a {
        display: inline-block;
        white-space: nowrap; /* Ensure text stays in a single line */
        clip-path: inset(0 100% 0 0); /* Start with text clipped */
        animation: slideInText 0.5s forwards; /* Animation to reveal text */
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); /* Fast start, slow end */
    }

/* 封面图片和文字 */
    .cover-image-and-text-fade-in-image, .cover-image-and-text-rise {
        opacity: 0;
        transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    }
    .cover-image-and-text-fade-in-image {
        margin-bottom: 8px;
        transform: translateY(20px);
    }
    .cover-image-and-text-rise {
        margin-top: 0;
        transform: translateY(20px);
    }

/* 前层背景图片 */
    .super-hero { 
        position: relative; 
    }
    /* 关键：图片作为“背景层”，宽度100%，高度自动，撑开容器高度 */
    .super-hero > img.hero-bg {
        display: block;
        width: 100%;
        height: auto;
    }

    .bottom-bar {
        position: relative; 
    }

    /* 小屏 */
    @media (max-width: 400px) {
        .super-hero {
            position: relative;
            min-height: 600px;       /* 容器至少 600px 高，托住绝对定位的图 */
        }
        
        .super-hero > div.hero-first-attach {
            position: relative;
            min-height: 600px;       /* 容器至少 600px 高，托住绝对定位的图 */
            overflow-x: hidden;
        }
        .super-hero > img.hero-bg {
            position: absolute;
            top: 0;
            left: 50%;
            height: 600px;           /* 手机：以高度为 600px 为准 */
            width: auto;             /* 宽度自动，保持比例，不拉伸 */
            max-width: none;         /* 允许超过容器宽度 */
            transform: translateX(-50%); /* 水平居中，即使宽度超出也居中 */
        }
    }

    /* 中屏 */
    @media (max-width: 426px) {
        .super-hero {
            position: relative;
            min-height: 600px;       /* 容器至少 600px 高，托住绝对定位的图 */
        }
        
        .super-hero > div.hero-first-attach {
            position: relative;
            min-height: 600px;       /* 容器至少 600px 高，托住绝对定位的图 */
            overflow-x: hidden;
        }

        .super-hero > img.hero-bg-first-middle-screen {
            position: absolute;
            top: 0;
            left: 50%;
            height: 600px;           /* 手机：以高度为 600px 为准 */
            width: auto;             /* 宽度自动，保持比例，不拉伸 */
            max-width: none;         /* 允许超过容器宽度 */
            transform: translateX(-50%); /* 水平居中，即使宽度超出也居中 */
        }

    }

    /* 叠加你的内容，覆盖在图片上 */
    .super-hero .cover-image-and-text-container {
        position: absolute;
        inset: 0;
        display: grid;
        /* 居中放置 */
        /* place-items: center; */
        padding: 4vh 16px;
    }

/* 第一屏需要覆盖在第二屏背景之上，确保跨屏图片可见 */
    .hero-first { z-index: 2; }

/* 让引语图水平居中，垂直中心对齐第一屏底部边界（跨越上下两屏） */
    .quote-boundary-center {
        position: absolute;
        left: 43%;
        top: 70%;
        pointer-events: none; /* 纯展示，避免拦截点击 */
        width: 40vw;
        max-width: 240px;
    }
    /* 小屏 */
    @media (max-width: 400px) {
        .quote-boundary-center {
            position: absolute;
            left: 32%;
            top: 65%;
            pointer-events: none; /* 纯展示，避免拦截点击 */
            width: 40vw;
            max-width: 240px;
        }
    }
        /* 中屏 */
    @media (max-width: 426px) {
        .quote-boundary-center {
            position: absolute;
            left: 30%;
            top: 65%;
            pointer-events: none; /* 纯展示，避免拦截点击 */
            width: 40vw;
            max-width: 240px;
        }

    }

/* logo和标语 */
    .hero-logo-img{
        margin:32px;
    }
    .hero-logo-text{
        margin: 98px 0 0 44px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
        color:white;
    }
    /* 小屏 */
    @media (max-width: 400px) {
        .hero-logo-img{
            margin:32px 32px 32px 2px;
        }
        .hero-logo-text{
            margin: 98px 0 0 18px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
            color:white;
        }
    }

/* 底栏 */
    .bottom-bar > div > p{
        opacity: 0.6;
        color: rgba(255, 255, 255, .3);
        letter-spacing: 1px;
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;

        position: relative;
        min-height: 1px;
        padding: 32px 16px 32px 16px;

        line-height: 1.8;
    }
    .bottom-bar > div > p > a{
        text-decoration: none; 
        color: #999c8e;
    }
    
    .bottom-bar > div > p > a > img{
        vertical-align: middle;
        margin-right: 4px;
    }