/* === 全局设置 === */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* === 自定义字体 === */
@font-face {
/*     font-family: 'CustomFont'; */
/*     src: url('../fonts/huiwenmingchao.otf') format('opentype'); */
/*     /* 如果使用 .woff 或 .woff2，格式如下： */
/*        src: url('../fonts/your-font.woff2') format('woff2'), */
/*             url('../fonts/your-font.woff') format('woff'); */
/*     */ 
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",         "Source Han Sans CN", sans-serif;
    
}

body {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center; /* 保持水平居中 */
    
    /* === 修改部分 === */
    /* 1. 允许垂直滚动 */
    overflow-y: auto; 
    /* 2. 保证最小高度是屏幕高度，内容多了自动撑开 */
    min-height: 100vh; 
    /* 3. 给上下留点呼吸空间，防止贴边太难看 */
    padding: 50px 0; 
    
    font-family: 'Courier New', Courier, monospace;
    
}

/* === 核心舞台 === */
#workspace {
    position: relative;
    
    /* === 修改部分 === */
    /* 1. 宽度控制：电脑上不要太宽，手机上占满 */
    width: 70%; 
    max-width: 1400px; 
    
    /* 2. 保持这个宽高比，浏览器会自动计算高度 */
    aspect-ratio: 3840 / 3000; 
    
    background-color: #fff;
    
    /* 3. 这里的 hidden 建议保留！ */
    /* 作用：防止里面的图片（比如超出的树枝）把页面撑出横向滚动条 */
    overflow: hidden; 

    margin: auto;
    
    /* 🔧 为子元素提供字体大小基准，这样可以用 em 相对缩放 */
    font-size: 10px; /* 基准值，1em = 10px，方便计算 */
}

/* === 背景图层控制 (保持不变) === */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 层级 1: 风景 (最底) */
.layer-tree {
    z-index: 1;
}

/* 层级 3: 窗框 (中间) */
.layer-window {
    z-index: 20;
    /* ⚠️ 关键：允许鼠标穿透窗框，点击到底下的 Middle Items */
    pointer-events: none; 
}

/* === 物品容器 === */
/* 这些容器本身没有大小，只是为了分组管理 z-index */
#layer-middle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10; /* 夹在 Tree(1) 和 Window(20) 之间 */
    pointer-events: none; /* 容器本身不挡鼠标 */
}

#layer-top-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30; /* 在 Window(20) 之上 */
    pointer-events: none; /* 容器本身不挡鼠标 */
}

/* === 交互物品通用样式 === */
.item {
    position: absolute;
    cursor: pointer;
    opacity: 0; /* 默认隐身 */
    transform: translateY(15px) scale(0.98);
    transition: opacity 0.4s ease, transform 0.4s ease;
    
    /* 恢复鼠标交互能力 (因为父容器设了 none) */
    pointer-events: auto; 
}

.item img {
    width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- 交互状态 --- */

/* 1. 未固定时的悬停 - 只在有像素的地方显示 */
.item:not(.is-fixed).is-hovering {
    opacity: 0.6;
    transform: translateY(0) scale(1);
}

/* 2. 已固定 (点击后) */
.item.is-fixed {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
}

/* 3. 已固定 + 悬停非透明像素时 (呼吸动画) */
.item.is-fixed.is-hovering {
    animation: breathe 3s ease-in-out infinite;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.05));
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* 加载文字 */
.loading-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ccc;
    z-index: 0;
}

/* === 顶部模块标签 === */
.module-label {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'CustomFont', sans-serif; /* 使用自定义字体 */
    font-size: 1.4em;     /* 相对于 workspace 的 font-size (10px) 缩放，5em = 50px */
    color: #333;         /* 可根据需要调整颜色 */
    white-space: nowrap;  /* 防止文字换行 */
    z-index: 25;         /* 在窗框上方 */
    user-select: none;   /* 禁止选中 */
    transition: all 0.3s ease; /* 平滑过渡 */
    letter-spacing: 0.1em; /* 可选：调整字间距 */
}

/* ==========================================
   🫧 氛围组：泡泡系统 (Bubble System - 3x5 高光分离版)
   ========================================== */

.bubble-wrapper {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 15;
    will-change: transform;
    --bubble-color: rgba(255,255,255,0.5); /* 默认颜色 */
    --bubble-y: 0%; /* 默认行 */
}

/* 通用层级样式 */
.bubble-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* ⚠️ 核心修改：5列3行 = 500% 300% */
    background-size: 500% 300%;
}

/* --- 1. 底层：颜色填充层 (Color Mask) --- */
.bubble-fill-mask {
    background-color: var(--bubble-color);
    -webkit-mask-image: url('../images/home/bubble.png');
    mask-image: url('../images/home/bubble.png');
    -webkit-mask-size: 500% 300%;
    mask-size: 500% 300%;
    /* 初始位置：第2列 (25%) */
    -webkit-mask-position: 25% var(--bubble-y);
    mask-position: 25% var(--bubble-y);
}

/* --- 2. 中层：线稿本体层 (Line Art - Multiply) --- */
.bubble-line-art {
    background-image: url('../images/home/bubble.png');
    /* 初始位置：第2列 (25%) */
    background-position: 25% var(--bubble-y);
    /* 正片叠底：白色变透明，黑色保留 */
    mix-blend-mode: multiply;
}

/* --- 3. 顶层：纯白高光层 (Highlight - Normal) --- */
.bubble-highlight {
    background-image: url('../images/home/bubble.png');
    /* 初始位置：第1列 (0%) - 只显示高光 */
    background-position: 0% var(--bubble-y);
    /* 正常混合模式，确保白色是纯白 */
    mix-blend-mode: normal;
    /* 稍微加点亮度，让高光更突出 (可选) */
    filter: brightness(1.2);
}


/* === 💥 破碎动画控制 === */

/* 当添加 .bubble-burst 类时触发 */

/* 1. 高光层立即消失 (因为破碎帧里没有高光) */
.bubble-burst .bubble-highlight {
    opacity: 0;
    transition: opacity 0s; /* 瞬间消失 */
}

/* 2. 线稿层播放动画 (从第2列播到第5列) */
.bubble-burst .bubble-line-art {
    /* steps(3) 表示从 25%->50%->75%->100% 需要3步 */
    animation: spriteBurst 0.4s steps(3) forwards;
    pointer-events: none;
}

/* 3. 遮罩层同步播放动画 */
.bubble-burst .bubble-fill-mask {
    animation: maskBurst 0.4s steps(3) forwards;
}

/* 动画关键帧：从 25% 移动到 100% */
@keyframes spriteBurst {
    from { background-position: 25% var(--bubble-y); }
    to   { background-position: 100% var(--bubble-y); }
}

@keyframes maskBurst {
    from { -webkit-mask-position: 25% var(--bubble-y); mask-position: 25% var(--bubble-y); }
    to   { -webkit-mask-position: 100% var(--bubble-y); mask-position: 100% var(--bubble-y); }
}