@import url('https://fonts.cdnfonts.com/css/poppins');

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

body {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    
    /* 1. 全局流动的长画布渐变 (不使用 fixed) */
    /* 当狗狗滚动到蘑菇区，背景完全进入 #000000 纯黑 */
    background: linear-gradient(180deg, 
        #d5a87e 0%,    /* 顶部：雪地 (亮蓝灰) */
        #6668b1 30%,   /* 过渡层 */
        #67daa4 50%,   /* 过渡层 */
        #000000 100%   /* 底部：蘑菇 (纯黑) */
    );
    /* 确保渐变撑满整个高度 */
    background-size: 100% 100%;
}

.section {
    width: 100%;
    height: 110vh; /* 维持原有的高度配置 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; /* 关键：背景设为透明，露出 body */
    overflow: hidden;
}

/* --- 核心：蘑菇专属局部柔光灯 --- */
.mushroom-glow {
    position: absolute; /* 极其重要：相对于所在的 Section 绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 在线性渐变之上，在模型之下 */
    pointer-events: none; /* 确保不干扰点击 */

    /* 使用多个不规则的径向渐变在黑底上营造流光感 */
    /* 这里的坐标 (at X% Y%) 让光效避开正中心，分布在屏幕四周，产生高级感 */
    background-image: 
        radial-gradient(at 10% 20%, rgba(66, 0, 110, 0.15) 0%, transparent 45%),  /* 左上：极光紫 */
        radial-gradient(at 90% 50%, rgba(247, 37, 133, 0.1) 0%, transparent 50%),   /* 右侧：霓虹玫红 */
        radial-gradient(at 30% 85%, rgba(72, 202, 228, 0.12) 0%, transparent 40%),  /* 左下：冰晶蓝 */
        radial-gradient(at 80% 90%, rgba(121, 0, 137, 0.6) 0%, transparent 40%);        /* 右下：加深黑色 */
    
    /* 专属呼吸动画 */
    animation: glowBreath 8s infinite alternate ease-in-out;
}

/* 局部光晕呼吸动画 */
@keyframes glowBreath {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.03); }
}

/* --- 3D 渲染层配置 --- */
#container3D {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 确保狗狗在所有光影前面跑 */
    pointer-events: none;
}

/* 装饰图片处理 */
.decorate {
    position: absolute;
    z-index: 11;
    opacity: 0.6;
}

/* 隐藏滚动条 */
*::-webkit-scrollbar { width: 0; }

.content-fit {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 12;
}