/* 英雄区栏样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 英雄区容器 */
.hero-section {
    /* 核心修改1：将min-height改为固定高度，缩小背景整体高度 */
    height: 60vh; /* 改为60%视口高度，可根据需求调整（如50vh/70vh） */
    /* 核心修改2：背景只在内容区域展示，超出部分用纯色填充（可选） */
    background: transparent; /* 透明背景，让bg-container显示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Microsoft Yahei", sans-serif;
    position: relative;
    overflow: hidden;
    /* 核心修改3：给body加最大宽度和居中，限制横向范围 */
    max-width: 100%;
    margin: 0 auto -1px auto; /* 移除底部间隙，与主内容区域融合 */
    width: 100%;
}

/* 新增背景容器：专门承载渐变背景，控制其高度 */
.bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 与hero-section高度一致 */
    background: linear-gradient(135deg, #e8f5e9 0%, #fffbf0 15%, #fff0e0 25%, #e1f5fe 50%, #fce4ec 75%, #fff8e1 100%);
    z-index: -1; /* 放在最底层，不遮挡内容 */
}

/* 新增渐变过渡层：用于连接英雄区和主内容区域的背景 */
.hero-transition {
    position: absolute;
    bottom: -50px; /* 向下延伸，覆盖更多主内容区域 */
    left: 0;
    width: 100%;
    height: 150px; /* 进一步增加过渡层高度 */
    background: linear-gradient(to bottom, 
        rgba(248, 248, 248, 0), 
        rgba(248, 248, 248, 0.2),
        rgba(248, 248, 248, 0.4),
        rgba(248, 248, 248, 0.6),
        rgba(248, 248, 248, 0.8),
        rgba(248, 248, 248, 1)
    );
    z-index: 1; /* 确保在背景之上，内容之下 */
}

/* 左侧淡绿色光效层 - 调整高度比例，适配整体视觉 */
.green-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 60%; /* 从40%改为60%，适配缩小后的背景高度 */
    background: radial-gradient(circle, rgba(129, 230, 153, 0.1) 0%, transparent 80%);
    border-radius: 0 0 100% 0;
    z-index: 0;
    filter: blur(50px);
}

/* 太阳容器 - 保持之前的紧凑定位 */
.sun-container {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    z-index: 1;
}

/* 太阳本体 - 保持原有样式 */
.sun {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffc4a3 0%, #ffe8d6 100%);
    border-radius: 50%;
    position: relative;
    opacity: 0.85;
    filter: blur(2px);
    z-index: 2;
}

/* 扩散光环层1 - 保持原有样式 */
.sun-ring-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border: 2px solid rgba(255, 240, 160, 0.6);
    border-radius: 50%;
    z-index: 1;
    filter: blur(3px);
    animation: ring-expand 2s infinite ease-out;
}

/* 扩散光环层2 - 保持原有样式 */
.sun-ring-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border: 1px solid rgba(255, 210, 140, 0.5);
    border-radius: 50%;
    z-index: 1;
    filter: blur(2px);
    animation: ring-expand 3s infinite ease-out;
    animation-delay: 0.5s;
}

/* 扩散光环层3 - 保持原有样式 */
.sun-ring-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border: 1px solid rgba(255, 200, 120, 0.4);
    border-radius: 50%;
    z-index: 1;
    filter: blur(1px);
    animation: ring-expand 4s infinite ease-out;
    animation-delay: 1s;
}

/* 大范围弥散散光层 - 保持原有样式 */
.sun-glow-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 200, 120, 0.15) 0%, transparent 100%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(40px);
}

/* 核心扩散动画 - 保持原有样式 */
@keyframes ring-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* 文字样式 - 保持紧凑间距 */
.main-text {
    font-size: 28px;
    color: #333;
    margin-top: 120px; /* 增加上边距，使文字更靠下 */
    text-align: center;
    font-weight: 500;
    z-index: 3;
}

/* 拼音样式 - 保持原有样式 */
.pinyin {
    font-size: 16px;
    color: #666;
    margin-top: 15px;
    letter-spacing: 1px;
    font-style: italic;
    z-index: 3;
}