* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: white;
    background: linear-gradient(180deg, #6AB5F2 0%, #A3D8FF 40%, #E6F4FF 100%);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* 云层 */
.clouds-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.cloud { position: absolute; background: #fff; border-radius: 100px; filter: blur(40px); opacity: 0.25; animation: drift linear infinite; }
.c1 { width: 450px; height: 120px; top: 15%; left: -500px; animation-duration: 55s; }
.c2 { width: 300px; height: 90px; top: 45%; right: -400px; animation-duration: 40s; animation-direction: reverse; }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }

/* Hero Section 强制对齐修正 */
.hero { 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    position: relative; 
    z-index: 5; 
}
.hero-center-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* 确保子元素水平居中 */
    justify-content: center;
}
.main-title { 
    font-size: 6rem; 
    font-weight: 800; 
    white-space: nowrap; 
    margin-bottom: 20px; 
    display: block;
    width: 100%;
}
.main-subtitle { 
    font-size: 2.2rem; 
    font-weight: 300; 
    white-space: nowrap; 
    margin-bottom: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* 确保副标题内容居中 */
}
.chinese { margin-left: 15px; padding-left: 15px; border-left: 2px solid rgba(255,255,255,0.4); }

/* 按钮交互 - 去掉下划线 */
.btn-wrapper { width: 100%; display: flex; justify-content: center; }
.enter-link { text-decoration: none !important; border: none; outline: none; }
.enter-btn-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 22px 70px;
    border-radius: 60px;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}
.enter-btn-glass:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.arrow-icon { width: 28px; fill: white; transition: transform 0.3s; }
.enter-btn-glass:hover .arrow-icon { transform: translateX(10px); }

/* 板块排版维持原版数值 */
.section { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 10%; 
    position: relative; 
    z-index: 5; 
    gap: 100px; 
}
.row { flex-direction: row; }
.row-reverse { flex-direction: row-reverse; }

.model-viewport { width: 50vw; height: 90vh; }
.content { width: 35%; flex-shrink: 0; }

.title { font-size: 3.5rem; margin-bottom: 15px; }
.rainforest { color: #2E5A27; }
.desert { color: #A67C00; }
.volcano { color: #5D4037; }
.glacier { color: #1565C0; }
.desc { font-size: 2rem; opacity: 0.8; }

/* 修改 .cloud-transition-overlay 相关的 CSS */

.cloud-transition-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    pointer-events: none; 
    display: flex; 
    overflow: hidden; 
    visibility: hidden; /* 默认隐藏，防止阻挡点击 */
}

.cloud-transition-overlay.active {
    visibility: visible;
}

.transition-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #fff; /* 背景色建议与云朵一致 */
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
    z-index: 1; 
}

.cloud-transition-overlay.active .transition-bg { 
    opacity: 1; 
    transition-delay: 0.4s; 
}

.cloud-group { 
    position: absolute; 
    width: 60%; /* 增加宽度确保覆盖 */
    height: 80%; 
    z-index: 10; 
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); 
}

.left-clouds { left: 0; transform: translateX(-100%); }
.right-clouds { right: 0; transform: translateX(100%); }

/* 激活状态：左右向中间靠拢 */
.cloud-transition-overlay.active .left-clouds { transform: translateX(-10%); }
.cloud-transition-overlay.active .right-clouds { transform: translateX(10%); }

/* 退出状态：继续向反方向彻底滑出 */
.cloud-transition-overlay.exit .left-clouds { 
    transform: translateX(-150%); 
    transition: transform 1s cubic-bezier(0.45, 0, 0.55, 1);
}
.cloud-transition-overlay.exit .right-clouds { 
    transform: translateX(100%); 
    transition: transform 1s cubic-bezier(0.45, 0, 0.55, 1);
}
.cloud-transition-overlay.exit .transition-bg { 
    opacity: 0; 
    transition: opacity 0.8s ease-in-out;
}

/* 花瓣画布样式 */
#petal-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 确保不影响页面按钮点击 */
    z-index: 2; /* 位于背景云层之上，模型之下或之上取决于你，2 比较稳妥 */
}

/* 添加到 style.css 末尾 */
#petal-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999; /* 确保在最上层看到花朵，但由于 pointer-events 不影响点击 */
    pointer-events: none;
    background: transparent; /* 必须透明 */

    /* 顶部进度条 */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #6AB5F2, #FFEB3B);
    z-index: 10000;
    transition: width 0.1s ease-out;
}

/* 标题视差过渡 */
.hero-center-content {
    transition: transform 0.2s ease-out;
}

/* 文字浮现基础样式 */
.main-subtitle span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}
.main-subtitle span.show {
    opacity: 1;
    transform: translateY(0);
}

/* 增加模型容器的交互感 */
.model-viewport {
    cursor: grab;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.model-viewport:hover {
    transform: scale(1.05); /* 悬停时轻微放大 */
}

/* 滚动提示箭头的动画 */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    width: 2px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    overflow: hidden;
}
.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: scroll-down 2s infinite;
}
@keyframes scroll-down {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* 按钮点击波纹效果 */
.enter-btn-glass {
    overflow: hidden;
    position: relative;
}
}

人物展示
.character-showcase {
    width: 100%;
    height: 100vh;
    background: #9d85ff;
    background: radial-gradient(circle at center, #b4a1ff 0%, #8a6fff 100%);
    position: relative;
    overflow: hidden;
    z-index: 5;
}

/* 标题作为背景 */
.center-brand-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* 放在最底层 */
    pointer-events: none; /* 确保鼠标能穿过文字点击模型 */
    user-select: none;
}

.ribbit-style-text {
    font-size: clamp(8rem, 25vw, 15rem); /* 极大的字号，充满背景 */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.15); /* 半透明水印感 */
    margin: 0;
    text-transform: lowercase;
}

#physics-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 交互层在文字上方 */
}

/* 修正后的 footer section */
.footer-section {
    position: relative;
    width: 100%;
    height: 100vh; /* 关键：占据一整屏 */
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #E6F4FF 0%, #BEE3FF 100%);
    overflow: hidden; /* 隐藏溢出的光晕 */
    z-index: 10;
}

/* 确保光晕在背景层且足够大 */
.footer-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中光晕 */
    width: 120vw; /* 调大一点，确保覆盖全屏 */
    height: 120vh;
    background: radial-gradient(circle, rgba(106, 181, 242, 0.3) 0%, transparent 70%);
    filter: blur(100px);
    z-index: 1; /* 在内容下方 */
    pointer-events: none; /* 不干扰点击 */
}

@keyframes pulseGlow {
    from { transform: scale(1); opacity: 0.4; }
    to { transform: scale(1.3); opacity: 0.7; }
}

.footer-content {
    position: relative;
    z-index: 11;
    max-width: 900px;
}

.footer-text {
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 300;
    color: #445D6E;
    margin-bottom: 30px;
}

/* 重点文案渐变 + 兼容性属性 */
.footer-text .highlight {
    font-weight: 700;
    background: linear-gradient(90deg, #1565C0, #6AB5F2);
    -webkit-background-clip: text;
    background-clip: text; /* 标准属性 */
    -webkit-text-fill-color: transparent;
    color: transparent; 
    display: inline-block;
}

.footer-line {
    width: 60px;
    height: 3px;
    background: rgba(21, 101, 192, 0.3);
    margin: 40px auto;
    border-radius: 2px;
}

.footer-copyright {
    font-size: 0.9rem;
    color: rgba(68, 93, 110, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 返回顶部按钮交互 */
.back-to-top {
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(21, 101, 192, 0.2);
    padding: 12px 25px;
    border-radius: 30px;
    color: #1565C0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.back-to-top svg { width: 18px; fill: currentColor; transition: transform 0.3s; }

.back-to-top:hover {
    background: rgba(21, 101, 192, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.back-to-top:hover svg { transform: translateY(-3px); }

/* 1. 增强背景光晕：加入颜色相位变换 */
.footer-bg-glow {
    position: absolute;
    width: 70vw;
    height: 70vw;
    /* 使用更柔和的径向渐变，加入多种蓝色调 */
    background: radial-gradient(circle, 
        rgba(106, 181, 242, 0.3) 0%, 
        rgba(21, 101, 192, 0.1) 40%, 
        transparent 70%
    );
    filter: blur(100px);
    /* 组合动画：缩放 + 透明度 + 柔和旋转 */
    animation: deepBreath 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
    will-change: transform, opacity;
}

@keyframes deepBreath {
    0% { 
        transform: scale(0.9) rotate(0deg); 
        opacity: 0.3; 
    }
    50% { 
        transform: scale(1.4) rotate(10deg); 
        opacity: 0.8; 
        /* 模拟光线在空气中散射的变化 */
        filter: blur(80px);
    }
    100% { 
        transform: scale(0.9) rotate(0deg); 
        opacity: 0.3; 
    }
}

/* 2. 增强文字呼吸：让文字有轻微的上下起伏 */
.footer-content.visible {
    animation: floatText 6s infinite ease-in-out;
}

@keyframes floatText {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* 3. 增强高亮文字的“流光”呼吸感 */
.footer-text .highlight {
    font-weight: 700;
    /* 标准属性兼容性写法 */
    background: linear-gradient(
        120deg, 
        #1565C0 0%, 
        #6AB5F2 25%, 
        #A3D8FF 50%, 
        #6AB5F2 75%, 
        #1565C0 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* 让渐变色自己流动起来 */
    animation: shine 8s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* 4. 返回按钮的呼吸：边框微光 */
.back-to-top {
    /* ... 保持原有样式 ... */
    box-shadow: 0 0 0 0 rgba(106, 181, 242, 0);
    animation: btnPulse 4s infinite;
}

@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(106, 181, 242, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(106, 181, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(106, 181, 242, 0); }
}