/* ============================================================
   panel.css —— 详情面板（右侧抽屉 / 移动端底部 sheet）
   ============================================================
   【文件职责】
   本文件负责"品牌详情面板"的所有样式。用户在地图上点击某个省份的点位后，
   会从右侧滑出一个抽屉式的面板，展示该品牌的：
   - 头部：省份 + 品牌名 + 标签 + 所属
   - 视频：品牌介绍视频（无视频时显示降级提示）
   - 简介：品牌故事文字
   - 技艺：技艺标签云
   - 3D 模型：可旋转的 3D 文物模型
   - 时间轴：品牌历史时间线

   【在项目中的角色】
   - 这是"内容深度"的核心载体，承载所有详细资料。
   - 在 map.css 之后加载，层级比 HUD 高（z-panel:60），但低于封面。
   - 桌面端从右侧滑入；手机端从底部滑入（响应式切换）。

   【阅读提示】
   - .panel 是"看不见的全屏容器"，里面装着遮罩 + 抽屉两块。
   - .panel__scrim 是半透明黑色遮罩，遮住后面的地图，让用户聚焦面板。
   - .panel__sheet 是真正的抽屉主体，初始位移到屏幕外，打开时滑入。
   - .is-open 是 JS 控制的状态类，加上后遮罩显现、抽屉滑入。
   ============================================================ */

/* 面板根容器：全屏覆盖，层级 60。
   初始 pointer-events:none 不响应点击（否则会拦截地图操作）。
   当没有 hidden 属性时恢复响应。 */
.panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  pointer-events: none;                   /* 默认不拦截事件 */
}
.panel:not([hidden]) { pointer-events: auto; } /* 显示时恢复点击 */

/* 半透明遮罩：盖在地图上让背景变暗 + 模糊，让用户视觉聚焦到面板。
   初始透明（看不见），打开时通过 .is-open 触发 opacity:1 渐显。 */
.panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.45);     /* 45% 黑色遮罩 */
  backdrop-filter: blur(4px);             /* 背后地图模糊 4px */
  -webkit-backdrop-filter: blur(4px);     /* Safari */
  opacity: 0;                             /* 初始透明 */
  transition: opacity var(--t-mid) var(--ease-out);
}
.panel.is-open .panel__scrim { opacity: 1; } /* 打开时遮罩显现 */

/* 抽屉主体：贴右、占满高度、宽度 min(46rem, 92vw)。
   初始 transform:translateX(100%) 把它整体向右推到屏幕外（100% = 自身宽度）。
   打开时通过 .is-open 触发 translateX(0) 滑回原位。
   box-shadow 用左侧投影模拟"从右侧投来的阴影"。 */
.panel__sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;            /* 占据右侧整列 */
  width: min(46rem, 92vw);                /* 桌面最大 46rem，移动端 92% 视口宽 */
  background: var(--paper);
  box-shadow: -12px 0 36px rgba(20, 18, 15, 0.16), -1px 0 0 var(--paper-3); /* 左侧投影 + 1px 描边 */
  display: flex;
  flex-direction: column;                 /* 章节纵向堆叠 */
  transform: translateX(100%);            /* 初始推到屏幕右侧外 */
  transition: transform var(--t-slow) var(--ease-silk);
  overflow: hidden;
}
.panel.is-open .panel__sheet { transform: translateX(0); } /* 滑入到原位 */

/* 关闭按钮：右上角圆形 × 按钮。
   悬停时朱砂色 + 旋转 90°，形成"叉号变红、转一下"的反馈。 */
.panel__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;                     /* 圆形 */
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-2);
  background: var(--paper-a80);
  border: 1px solid var(--paper-3);
  z-index: 5;                             /* 浮在内容之上 */
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-mid) var(--ease-silk);
}
/* 悬停 / 键盘聚焦：变朱砂色 + 灰背景 + 旋转 90° */
.panel__close:hover,
.panel__close:focus-visible {
  color: var(--cinnabar);
  background: var(--paper-2);
  transform: rotate(90deg);
}

/* 滚动容器与统一内边距：
   - 所有直系子元素（头部 + 各 section）统一左右 64px、上下 32px 内边距。
   - flex-shrink:0 保证内容不被压缩，超过容器高度时整体可滚动。 */
.panel__sheet > .panel__head,
.panel__sheet > section {
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  flex-shrink: 0;                         /* 不被压缩 */
}
/* 头部：顶部留更大间距(sp-8)，背景用两层渐变（整体向下渐淡 + 右上角朱砂光晕），
   下方加一条分隔线，让头部视觉上与正文分开。 */
.panel__head {
  padding-top: var(--sp-8);
  background:
    linear-gradient(180deg, var(--paper-2) 0%, transparent 100%),        /* 整体从上到下渐淡 */
    radial-gradient(ellipse at top right, var(--cinnabar-a25), transparent 60%); /* 右上角朱砂晕染 */
  border-bottom: 1px solid var(--paper-3);
}
/* 中间所有 section 自由滚动 —— 显式声明不被压缩，配合 sheet 的 overflow-y:auto */
.panel__head { flex-shrink: 0; }
.panel__intro,
.panel__crafts,
.panel__3d,
.panel__timeline {
  flex-shrink: 0;
}
/* 让整个抽屉可以纵向滚动（内容超长时） */
.panel__sheet {
  overflow-y: auto;
  scrollbar-width: thin;                                  /* Firefox 细滚动条 */
  scrollbar-color: var(--paper-3) transparent;
}

/* —— 头部内容（省份 / 品牌名 / 标签 / 所属） —— */

/* 省份小字：楷体 + 大字距，呼应封面眉头风格 */
.panel__province {
  font-family: var(--font-kai);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: 0.3em;
  padding-left: 0.3em;                    /* 因字距大补一点左内边距 */
}
/* 品牌名：抽屉里最大的字，font-weight 900 最粗。
   下方留 padding-bottom 给 ::after 装饰线留位置。 */
.panel__brand {
  margin-top: var(--sp-2);
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--ink);
  position: relative;
  padding-bottom: var(--sp-4);
}
/* 品牌名下方的朱砂横线装饰：从左到右 3em 宽，右端渐淡。
   呼应封面 .cover__rule 的"笔锋"线条。 */
.panel__brand::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3em; height: 2px;
  background: linear-gradient(90deg, var(--cinnabar), var(--cinnabar) 70%, transparent); /* 朱砂从左到右渐淡 */
}
/* 标签（品类/级别）：朱砂楷体小字 */
.panel__tag {
  margin-top: var(--sp-4);
  font-family: var(--font-kai);
  font-size: var(--fs-sm);
  color: var(--cinnabar);
  letter-spacing: 0.1em;
}
/* 所属（所有者/单位）：极小字 + 大字距 */
.panel__owner {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.15em;
}

/* —— 章节标题（带方印序号） ——
   每个章节标题前用 ::before 伪元素生成一个朱砂方框，里面装 data-num 属性的序号，
   模拟"印章式章节编号"。比常见的"竖条+文字"更有古风。 */
.panel__h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
/* 章节序号印章：从 HTML 的 data-num 属性读取序号文字（attr() 函数），
   朱砂边框 + 朱砂半透明底 + 内 2px 白边，形成"双层印章"效果。 */
.panel__h3::before {
  content: attr(data-num);                /* attr() 读取元素 data-num 属性 */
  flex-shrink: 0;
  width: 1.7em; height: 1.7em;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--cinnabar);
  border-radius: var(--r-sm);
  background: var(--cinnabar-a25);
  color: var(--cinnabar);
  font-family: var(--font-kai);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: inset 0 0 0 2px var(--paper); /* 内描白边 */
}

/* —— 媒体（视频区） —— */
/* 视频区容器：上下内边距略不对称，顶部留更多空间 */
.panel__media {
  padding: var(--sp-6) var(--sp-8) var(--sp-5);
  flex-shrink: 0;
}
/* 视频本身：16:9 宽高比（aspect-ratio），深色底色防止白底视频闪烁，
   object-fit:cover 让视频填满容器（可能裁切边缘）。 */
.panel__video {
  width: 100%;
  aspect-ratio: 16 / 9;                   /* 强制 16:9 比例 */
  background: var(--night-2);
  border-radius: var(--r-md);
  object-fit: cover;                      /* 填满容器，可能裁边 */
  box-shadow: var(--shadow-md);
}
/* 视频不可用时的降级提示框：虚线边框 + 灰底，提示用户无视频。
   里面通常包含 <code> 标签显示技术原因（如"无视频源"）。 */
.panel__media-fallback {
  padding: var(--sp-6);
  text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--paper-3);      /* 虚线边框表示"占位" */
  border-radius: var(--r-md);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
/* 降级框里的代码片段：等宽字体 + 灰底圆角 */
.panel__media-fallback code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  padding: 2px 6px;
  background: var(--paper-3);
  border-radius: var(--r-sm);
  font-size: 0.88em;
  color: var(--ink-2);
}

/* —— 简介 —— */
/* 简介段落：首行缩进 2 字（中文段落标准），行高松散，颜色稍弱于标题 */
.panel__intro p {
  text-indent: 2em;                       /* 首行缩进 2 个字宽 */
  line-height: 1.95;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* —— 技艺标签（标签云） —— */
/* 标签容器：横向 flex + flex-wrap 允许换行，自动形成多行标签云 */
.panel__crafts ul {
  display: flex;
  flex-wrap: wrap;                        /* 允许换行 */
  gap: var(--sp-2);
}
/* 单个标签：宣纸暗底 + 描边 + 楷体，
   悬停时向上飘 2px + 朱砂边框 + 朱砂字。 */
.panel__crafts li {
  padding: var(--sp-2) var(--sp-4);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  font-family: var(--font-kai);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: var(--ink-2);
  position: relative;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.panel__crafts li:hover {
  transform: translateY(-2px);            /* 向上飘 2px */
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

/* —— 3D 模型展示区 —— */
/* 3D 区底部留 24px 间距 */
.panel__3d { padding-bottom: var(--sp-5); }
/* 3D 画布容器：流式高度 clamp(280px, 38vh, 420px)，
   底色用径向渐变让中心略亮（呼应"展台灯光"）。
   cursor:grab 让光标变"抓手"，提示可拖拽旋转模型。 */
.panel__model {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vh, 420px);      /* 流式高度：最小 280，最大 420 */
  background:
    radial-gradient(ellipse at 50% 60%, var(--paper-2) 0%, var(--paper) 70%); /* 中心略亮 */
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: grab;                           /* 抓手光标 */
}
.panel__model--oracle {
  background: #101923;
  border-color: rgba(211, 171, 103, 0.48);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.30);
}
.panel__model--oracle .model3d__label {
  color: #d5b679;
  background: rgba(16, 25, 35, 0.72);
  border-color: rgba(211, 171, 103, 0.42);
}
/* 鼠标按下时光标变 grabbing（抓住状态） */
.panel__model:active { cursor: grabbing; }
/* Three.js 等库会往容器里插入 canvas 元素，这里强制它铺满父容器。
   !important 是为了覆盖 Three.js 默认注入的 inline style。 */
.panel__model canvas { width: 100% !important; height: 100% !important; display: block; }
/* 3D 模型不可用时的占位提示（模型加载失败/无模型时显示） */
.panel__model-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-kai);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
/* 3D 容器右下角的浮动标签（如文物名称），半透毛玻璃 + 楷体 */
.model3d__label {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  padding: 4px var(--sp-3);
  font-family: var(--font-kai);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--ink-3);
  background: var(--paper-a80);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-sm);
  pointer-events: none;                   /* 不拦截鼠标，方便用户操作 3D */
  backdrop-filter: blur(4px);
}
/* 3D 区下方的操作提示（如"拖拽旋转 / 滚轮缩放"） */
.panel__model-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-align: right;                      /* 右对齐，呼应右下角 label */
}

/* —— 时间轴（品牌历史时间线） ——
   用 CSS 实现一条竖向虚线轴 + 各节点的"印章式"端点。
   每个节点是一个 8×8 的旋转 45° 方块（朱砂底+描金边），
   模拟"印章打在时间轴上"的视觉效果。 */
/* 时间轴容器：相对定位，左侧留出空间放轴线和端点 */
.panel__timeline ol {
  position: relative;
  padding-left: var(--sp-5);
}
/* 轴线：用 ::before 在容器左侧画一条竖向虚线 */
.panel__timeline ol::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 0;                               /* 宽度为 0，用 border-left 当线 */
  border-left: 1px dashed var(--paper-3); /* 虚线 */
}
/* 单个时间节点：相对定位，底部留 24px 间距隔开各项 */
.panel__timeline li {
  position: relative;
  padding-bottom: var(--sp-5);
}
.panel__timeline li:last-child { padding-bottom: 0; }   /* 最后一项不留底距 */
/* 节点端点：8×8 方块，rotate(45deg) 旋转成菱形，
   朱砂底 + 描金边 + 双层光晕（白底+朱砂晕），形成"印章打在纸上"的效果。 */
.panel__timeline li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 8px;
  width: 8px; height: 8px;
  background: var(--cinnabar);
  border: 1px solid var(--gold);
  border-radius: 1px;
  transform: rotate(45deg);               /* 旋转 45° 成菱形 */
  box-shadow: 0 0 0 3px var(--paper), 0 0 6px var(--cinnabar-a25); /* 外圈白 + 朱砂光晕 */
}
/* 最后一项是"当下"（本团队走访），用描金区分历史与现在 */
.panel__timeline li:last-child::before {
  background: var(--gold);                /* 改成描金底 */
  border-color: var(--cinnabar);          /* 朱砂边 */
}
/* 年份：朱砂粗体大字（最后一项变描金，呼应端点） */
.panel__timeline-year {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--cinnabar);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-1);
}
/* 最后一项（当下）的年份用描金，与历史年份区分 */
.panel__timeline li:last-child .panel__timeline-year {
  color: var(--gold);
}
/* 年份下方的事件描述文字 */
.panel__timeline-text {
  color: var(--ink-2);
  line-height: 1.8;
  font-size: var(--fs-sm);
}

/* —— 内容入场 stagger（错峰浮入动画） ——
   stagger = "错峰"：面板打开后，各章节不是同时出现，而是按顺序错峰浮上来，
   营造"内容徐徐展开"的感觉。每个章节用递增的 animation-delay 实现。
   backwards 关键字：动画开始前应用 from 状态，避免延迟期间出现"已完成"的样子。 */
.panel.is-open .panel__head > *,
.panel.is-open .panel__media,
.panel.is-open .panel__intro,
.panel.is-open .panel__crafts,
.panel.is-open .panel__3d,
.panel.is-open .panel__timeline {
  animation: panel-section-up var(--t-slow) var(--ease-silk) backwards;
}
/* 各章节错峰延迟：120 → 200 → 260 → 320 → 380 → 440ms，
   间隔约 60ms，节奏均匀。 */
.panel.is-open .panel__head > * { animation-delay: 120ms; }
.panel.is-open .panel__media     { animation-delay: 200ms; }
.panel.is-open .panel__intro     { animation-delay: 260ms; }
.panel.is-open .panel__crafts    { animation-delay: 320ms; }
.panel.is-open .panel__3d        { animation-delay: 380ms; }
.panel.is-open .panel__timeline  { animation-delay: 440ms; }
/* 通用章节浮入动画：从下方 12px 浮上来 + 透明度 0→1 */
@keyframes panel-section-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 响应式 ===== */
/* 手机端（< 768px）：把抽屉从"右侧滑入"改成"底部滑入"——
   占满宽度、高度 92% 视口、顶部大圆角、用 translateY 从屏幕底部推上来。
   同时在顶部加一个 40×4 的小灰条作为"拖拽手柄"装饰。 */
@media (max-width: 767px) {
  .panel__sheet {
    top: auto;                            /* 取消顶部贴边 */
    width: 100%;                          /* 全宽 */
    height: 92dvh;                        /* 占 92% 视口高 */
    border-radius: var(--r-xl) var(--r-xl) 0 0; /* 顶部大圆角，下方无 */
    transform: translateY(100%);          /* 改为从底部上推 */
    transition: transform var(--t-slow) var(--ease-silk);
  }
  .panel.is-open .panel__sheet { transform: translateY(0); }
  /* 顶部"手柄条"装饰：模拟 iOS 底部弹层的小灰条 */
  .panel__sheet::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);          /* 水平居中 */
    width: 40px; height: 4px;
    background: var(--paper-3);
    border-radius: 2px;
    z-index: 6;
  }
  /* 手机端收紧内边距，避免内容被挤 */
  .panel__head,
  .panel__sheet > section,
  .panel__media {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
  .panel__head { padding-top: var(--sp-7); }     /* 顶部多留空间放手柄 */
  .panel__brand { font-size: var(--fs-h2); }     /* 品牌字号降级 */
  .panel__model { height: clamp(220px, 32vh, 320px); } /* 3D 区缩短 */
}

/* 无障碍：用户系统勾选"减少动画"时，过渡时长≈0、入场动画禁用 */
@media (prefers-reduced-motion: reduce) {
  .panel__sheet { transition-duration: 1ms; }
  .panel.is-open .panel__head > *,
  .panel.is-open .panel__media,
  .panel.is-open .panel__intro,
  .panel.is-open .panel__crafts,
  .panel.is-open .panel__3d,
  .panel.is-open .panel__timeline { animation: none; }
}