/* ===== 布局样式：页面结构和全屏滚动容器 ===== */

/* 全屏滚动容器：固定定位，覆盖整个视口 */
.fullpage-container {
    position: fixed;      /* 固定定位，不随页面滚动 */
    top: 0;              /* 顶部对齐 */
    left: 0;             /* 左侧对齐 */
    width: 100%;         /* 宽度100% */
    height: 100vh;       /* 高度100%视口高度 */
    overflow: hidden;    /* 隐藏溢出内容 */
    overflow-x: hidden;  /* 特别隐藏水平溢出 */
}

/* 单个页面区块：全屏显示，支持平滑过渡动画 */
.section {
    position: absolute;   /* 绝对定位，相对于全屏容器 */
    top: 0;              /* 顶部对齐 */
    left: 0;             /* 左侧对齐 */
    width: 100%;         /* 宽度100% */
    height: 100vh;       /* 高度100%视口高度 */
    transition: opacity 0.6s ease, transform 0.6s ease; /* 透明度和缩放过渡动画 */
    overflow-x: hidden;  /* 隐藏水平溢出 */
    opacity: 0;          /* 默认透明（隐藏） */
    transform: scale(0.9); /* 默认缩放0.9倍 */
}

/* 激活状态的页面区块：完全显示 */
.section.active {
    opacity: 1;          /* 完全不透明 */
    transform: scale(1); /* 正常尺寸 */
    z-index: 10;         /* 最高层级，显示在最前面 */
}

/* 下一个页面区块：准备进入视图的状态 */
.section.next {
    opacity: 0;          /* 完全透明 */
    transform: scale(1.1); /* 放大1.1倍 */
    z-index: 5;         /* 中等层级 */
}

/* 上一个页面区块：准备离开视图的状态 */
.section.prev {
    opacity: 0;          /* 完全透明 */
    transform: scale(0.9); /* 缩小0.9倍 */
    z-index: 5;         /* 中等层级 */
}

/* 首页英雄区块：相对定位，作为内部元素的定位参考 */
.hero-section {
    position: relative;  /* 相对定位 */
}

/* 英雄区块主要内容区域 */
.hero {
    position: relative;   /* 相对定位 */
    height: 100vh;       /* 高度100%视口高度 */
    display: flex;       /* 弹性布局 */
    align-items: flex-end; /* 垂直对齐：底部对齐 */
    justify-content: center; /* 水平对齐：居中 */
     padding: 0 0 100px 0;
     overflow-x: hidden;
 }
 
 .hero-content {
     position: relative;
     z-index: 1;
     max-width: 1200px;
     width: 100%;
     text-align: center;
     padding: 0 2rem;
 }
 
 .intro-section {
     z-index: 2;
 }
 
 .intro-content {
     position: absolute;
     bottom: 2rem;
     right: 2rem;
     z-index: 1;
     animation: none;
     padding: 0;
     max-width: 500px;
     text-align: left;
 }