/* ============================================================
   map.css —— 地图主舞台 / HUD 顶栏底栏
   ============================================================
   【文件职责】
   本文件负责"地图主舞台"的所有样式，包含三大块：
   1) .map：地图容器（ECharts 中国地图挂在这里），含背景渐变与错误兜底层。
   2) .hud：地图顶/底部的"信息条"——顶部 HUD 显示品牌、导航、提示；
      底部 HUD 显示来源/落款。采用毛玻璃效果（backdrop-filter）半透贴合地图。
   3) .map-tip：鼠标悬停省份时弹出的自定义 tooltip（提示气泡）。

   【在项目中的角色】
   - 这是用户从封面"入卷"后看到的核心交互页。
   - 在 cover.css 之后加载，层级低于封面、高于地图本身。
   - HUD 的导航/品牌与详情面板、封面共享同一套令牌色（朱砂 + 描金）。

   【阅读提示】
   - "BEM 命名"：块__元素--修饰符，例如 hud 是块，hud__nav 是元素，
     hud--top 是修饰符（顶部版本）。这种命名让样式作用一目了然。
   - backdrop-filter 是"背景滤镜"，能让元素背后的内容模糊/变色，形成毛玻璃。
   ============================================================ */

/* 地图容器：占满父级舞台、层级最低（z-map:10），里面挂载 ECharts 实例。
   背景用三层径向渐变叠加：左上一抹墨色、右下一抹朱砂、中心到外缘由亮到暗，
   让地图像"从纸上浮起"，而不是单调纯色。 */
.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-map);                  /* 地图层级：10（HUD/面板都比它高） */
  background:
    radial-gradient(ellipse at 18% 22%, rgba(20, 18, 15, 0.04) 0%, transparent 40%), /* 左上淡墨 */
    radial-gradient(ellipse at 82% 78%, rgba(168, 52, 42, 0.03) 0%, transparent 45%), /* 右下淡朱砂 */
    radial-gradient(ellipse at 50% 50%, var(--paper) 0%, var(--paper-2) 80%);          /* 中心亮、外缘暗 */
}
/* 地图加载/渲染失败时的兜底提示：全屏居中显示说明文字。
   JS 在出错时把这段插入到 .map 里。 */
.map__err {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-2);
  font-family: var(--font-kai);
  line-height: 2;                         /* 行高 2：松散便于阅读 */
}
/* 错误信息中加粗的红色文字（如错误码） */
.map__err b { color: var(--cinnabar); }

/* ===== HUD（Heads-Up Display）—— 地图上的悬浮信息条 ===== */
/* HUD 通用样式：横向 flex 两端对齐，背景是"从纸色到透明"的渐变 + 毛玻璃模糊，
   让 HUD 看起来像"贴在地图上的一层薄纸"。 */
.hud {
  position: absolute;
  left: 0; right: 0;                       /* 左右各 0：横向铺满 */
  z-index: var(--z-hud);                   /* 层级 20：在地图之上 */
  display: flex;
  align-items: center;
  justify-content: space-between;          /* 两端对齐：左右各放一组 */
  padding: var(--sp-4) var(--sp-6);
  background: linear-gradient(to bottom, var(--paper-a80), rgba(242, 236, 224, 0.4) 70%, transparent); /* 从上到下渐淡 */
  backdrop-filter: blur(8px) saturate(1.05);          /* 背后内容模糊 8px，颜色饱和度提高 5% */
  -webkit-backdrop-filter: blur(8px) saturate(1.05);  /* Safari 兼容写法 */
}
/* 顶部 HUD：贴顶放置 */
.hud--top { top: 0; }
/* 底部 HUD：贴底放置、改成纵向排列，渐变方向反过来（从下到上渐淡） */
.hud--bottom {
  top: auto; bottom: 0;
  flex-direction: column;
  gap: var(--sp-1);
  background: linear-gradient(to top, var(--paper-a80), rgba(242, 236, 224, 0.4) 70%, transparent);
  padding: var(--sp-3) var(--sp-6) var(--sp-4);
}

/* 顶部左侧"品牌组合"：印章 + 名称横排 */
.hud__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* 品牌迷你印章：缩小的方印，呼应封面印章风格。
   双层 box-shadow（内 2px 白 + 内 3px 红晕）模拟印章的双层边框。 */
.hud__seal {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cinnabar);
  border-radius: var(--r-sm);
  color: var(--cinnabar);
  font-family: var(--font-kai);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--cinnabar-a25);
}
/* 品牌名称：楷体大字 + 大字距 */
.hud__name {
  font-family: var(--font-kai);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.22em;
  color: var(--ink);
}
/* 名称前的小红点装饰（用 ::before 伪元素插入"·"） */
.hud__name::before {
  content: "·";
  margin-right: 0.4em;
  color: var(--cinnabar);
}

/* 顶部右侧导航：横向排列的过滤标签，flex-wrap 允许窄屏时换行 */
.hud__nav {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;                        /* 允许换行，避免溢出 */
}
/* 单个导航项：黑体小字 + 半透宣纸背景 + 透明边框。
   四个属性同步过渡（颜色/背景/边框/位移），形成柔和的悬停反馈。 */
.hud__nav-item {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border: 1px solid transparent;          /* 初始透明，悬停时显形 */
  border-radius: var(--r-sm);
  background: var(--paper-a80);
  transition: color var(--t-mid) var(--ease-out),
              background var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
/* 悬停 / 键盘聚焦时：变朱砂色 + 出现朱砂细边 + 向上轻飘 1px */
.hud__nav-item:hover,
.hud__nav-item:focus-visible {
  color: var(--cinnabar);
  border-color: var(--cinnabar-a25);
  transform: translateY(-1px);
}
/* 当前选中项（JS 添加 .is-active）：反白显示 + 朱砂实底 + 微阴影 */
.hud__nav-item.is-active {
  color: var(--paper);
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  box-shadow: var(--shadow-sm);
}
/* 导航项内的小注解（用 <em> 标签包裹的次要文字，如分类计数） */
.hud__nav-item em {
  font-style: normal;                     /* 去掉默认斜体 */
  color: var(--ink-3);
  margin-left: 0.4em;
  font-size: 0.85em;                      /* 比父级小 15% */
}
/* 当前选中项的小注解：变成描金亮色，呼应整体描金点缀 */
.hud__nav-item.is-active em { color: var(--gold-2); }

/* 底部 HUD 的提示文字：用 <em> 包裹的关键词标朱砂强调 */
.hud__hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.hud__hint em {
  font-style: normal;
  color: var(--cinnabar);                 /* 强调字色 */
  margin: 0 0.2em;
}
/* 落款徽章：右下角的小标签，用朱砂边框 + 半透宣纸底显示"款"字与作者。
   呼应古书卷末的"某某款"落款样式。 */
.hud__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border: 1px solid var(--cinnabar-a25);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--paper-a80);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  font-family: var(--font-kai);
}
/* 落款前的"款"字：朱砂楷体粗体，模拟印章风格 */
.hud__credit::before {
  content: "款";
  color: var(--cinnabar);
  font-family: var(--font-kai);
  font-weight: 700;
}

/* 访问统计：与落款风格统一，弱显示不抢焦点 */
.hud__visits {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  background: var(--paper-a80);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
}
.hud__visits-icon {
  font-size: 0.8em;
}
.hud__visits-sep {
  color: var(--paper-3);
  margin: 0 0.2em;
}

/* ===== ECharts 自定义 tooltip（鼠标悬停省份时弹出的小气泡） =====
   ECharts 允许用自定义 HTML 渲染 tooltip，这里用宣纸毛玻璃风格
   替代 ECharts 默认的黑底白字样式。 */
.map-tip {
  min-width: 200px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-a80);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);             /* 毛玻璃 */
  -webkit-backdrop-filter: blur(8px);     /* Safari */
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.7;
}
/* tooltip 第一行：省份名（小字楷体，弱色） */
.map-tip__province {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.15em;
  font-family: var(--font-kai);
}
/* tooltip 主标题：品牌名（朱砂粗体） */
.map-tip__brand {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cinnabar);
  margin: var(--sp-1) 0;
}
/* tooltip 分类标签 */
.map-tip__tag {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
/* tooltip 底部"所属"信息：上方加一条虚线分隔 */
.map-tip__owner {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--paper-3);  /* 虚线分隔 */
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.08em;
}

/* ===== 入场动画 =====
   舞台激活前，HUD 和地图都隐藏（透明+下移），等待 .is-active 触发。
   激活后，顶栏从上滑下、底栏从下滑上，形成"两段夹击"的入场效果。 */
/* 默认（未激活）状态：透明 + 轻微下移 */
.stage:not(.is-active) .hud,
.stage:not(.is-active) .map {
  opacity: 0;
  transform: translateY(8px);
}
/* 激活后：顶栏从上方 12px 处滑下来，延迟 200ms 开始 */
.stage.is-active .hud--top { animation: hud-down var(--t-slow) var(--ease-silk) 200ms backwards; }
/* 激活后：底栏从下方 12px 处滑上来，延迟 400ms 开始（比顶栏晚一拍） */
.stage.is-active .hud--bottom { animation: hud-up var(--t-slow) var(--ease-silk) 400ms backwards; }
/* 顶栏动画：从上方 12px 滑到原位，透明度 0→1 */
/* backwards 关键字：动画开始前应用 from 状态，避免首帧闪烁 */
@keyframes hud-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 底栏动画：从下方 12px 滑到原位 */
@keyframes hud-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 响应式 ===== */
/* 中等屏（平板竖屏 / 小笔记本，< 1024px）：稍微收紧 HUD 内边距、品牌字号降级 */
@media (max-width: 1023px) {
  .hud { padding: var(--sp-3) var(--sp-4); }
  .hud__name { font-size: var(--fs-body); }
}
/* 手机（< 768px）：顶栏改成纵向排列，导航横向滚动不换行 */
@media (max-width: 767px) {
  .hud--top {
    flex-direction: column;               /* 改纵向 */
    align-items: flex-start;              /* 左对齐 */
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  /* 导航占满整宽，允许横向滚动（不换行） */
  .hud__nav {
    width: 100%;
    overflow-x: auto;                     /* 横向溢出可滚动 */
    flex-wrap: nowrap;                    /* 强制不换行 */
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;    /* iOS 惯性滚动 */
  }
  .hud__nav::-webkit-scrollbar { display: none; }   /* 隐藏滚动条 */
  .hud__nav-item { flex-shrink: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); } /* 不被压缩 */
  .hud__seal { width: 32px; height: 32px; font-size: 0.62rem; }
  .hud--bottom { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .hud__hint { font-size: 0.65rem; }
}