/* ═══════════════════════════════════════════════════════════════
   城市与眼睛 — 视觉增强补丁层
   city-eyes-visual.css

   使用方法：在 city-eyes.css 之后加载
   <link rel="stylesheet" href="city-eyes.css">
   <link rel="stylesheet" href="city-eyes-visual.css">

   原则：
   - 只修改视觉表现，不改变任何交互逻辑
   - 不删除原文件的任何规则，仅覆盖或补充
   - 可随时移除此文件回到原始状态
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   0. 扩展 CSS 变量：z-index 语义层级 + 噪点纹理
   ───────────────────────────────────────────────────────────── */
:root {
  /* z-index 统一语义层级（替代散乱的 -3 ~ 10000） */
  --z-bg-deep:    -3;   /* 液态背景舞台 */
  --z-bg-mid:     -2;   /* 背景中层 */
  --z-bg-top:     -1;   /* 背景前层 */
  --z-content:    1;    /* 正文内容 */
  --z-content-top: 2;   /* 内容浮层 */
  --z-sticky:     3;     /* sticky 元素 */
  --z-nav:        50;   /* 主导航 */
  --z-side-nav:   90;   /* 侧边导航 */
  --z-float:      100;  /* 浮动岛屿 */
  --z-drawer:     180;  /* 抽屉面板 */
  --z-preview:    200;  /* 省份预览 */
  --z-modal:      240;  /* 模态弹窗 */
  --z-toast:      260;  /* toast 通知 */
  --z-detail:     300;  /* 详情面板 */
  --z-lightbox:   10000;/* 灯箱最高层 */

  /* 噪点纹理 SVG（data URI，内联无需外部文件） */
  --noise-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* 焦点环统一变量 */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

:root.theme-dark {
  /* 暗色模式阴影修正：带蓝色调而非纯黑 */
  --shadow: rgba(10, 14, 26, 0.42);
}


/* ─────────────────────────────────────────────────────────────
   1. 焦点环修复（可访问性 — 严重）
   为所有 outline:none 但缺少替代焦点环的元素添加可见焦点
   ───────────────────────────────────────────────────────────── */

/* 开场页主按钮：保留原 hover 效果，补充焦点环 */
.orb-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 语言切换下拉框 */
.language-select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 搜索输入框：原仅有 border-color 变化，增加焦点环 */
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none; /* box-shadow 已作为替代，保持原有交互 */
}

/* 搜索结果卡片 */
.search-result-card:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 时间线卡片 */
.timeline-card:focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 浮动按钮 */
.float-button:focus-visible,
.float-drawer-toggle:focus-visible,
.side-nav-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 导航链接 */
.nav-link:focus-visible,
.side-nav-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* 模态关闭按钮 */
.modal-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 50%;
}

/* 日/夜开关 */
.switch-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 999px;
}

/* 印象标签 */
.impression-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* 省份卡片 */
.province-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 14px;
}

/* 日志卡片 */
.log-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* footer 工具按钮 */
.log-secondary-button:focus-visible,
.log-button:focus-visible,
.install-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}


/* ─────────────────────────────────────────────────────────────
   2. 视口修复：100vh → 100dvh
   修复 iOS Safari 地址栏伸缩导致的布局跳动
   ───────────────────────────────────────────────────────────── */
.hero {
  min-height: 100dvh;
}

.explore-section {
  min-height: 100dvh;
}

/* 旧浏览器 fallback：不支持 dvh 时忽略此行，回退到原 100vh */
@supports not (min-height: 100dvh) {
  .hero { min-height: 100vh; }
  .explore-section { min-height: 100vh; }
}


/* ─────────────────────────────────────────────────────────────
   3. 平滑滚动 + 排版优化
   ───────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* 尊重用户的减少动画偏好：禁用平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 标题排版：防止孤行 */
.hero h1,
.section-head h2,
.journey-section-title,
.modal-head h2 {
  text-wrap: balance;
}

/* 段落排版：防止孤词 */
.hero p,
.section-head p,
.panel-note,
.disclaimer-body p,
.guide-body p,
.changelog-body p,
.install-guide-body p {
  text-wrap: pretty;
}

/* 统一 letter-spacing 为 3 级标准 */
/* 大标题：-0.01em（收紧） */
.hero h1,
.intro-title {
  letter-spacing: -0.01em;
}

/* 中标题：0.02em（微开） */
.section-head h2,
.journey-section-title,
.modal-head h2 {
  letter-spacing: 0.02em;
}

/* 标签/小字：0.08em（统一所有 0.04/0.06/0.12/0.14/0.16em） */
.panel-kicker,
.province-sub,
.version-mark,
.nav-link,
.install-button {
  letter-spacing: 0.08em;
}

/* 数据界面启用等宽数字 */
.stats-container,
.timeline-container,
.search-result-meta {
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────────────────────────────────
   4. 按压反馈：:active 状态
   让按钮点击时有物理确认感
   ───────────────────────────────────────────────────────────── */
.log-button:active,
.log-secondary-button:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 0.08s;
}

.float-button:active {
  transform: scale(0.95);
  transition-duration: 0.08s;
}

.province-card:active {
  transform: scale(0.98) translateY(0);
  transition-duration: 0.08s;
}

.nav-link:active {
  opacity: 0.7;
  transition-duration: 0.08s;
}

.install-button:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

.modal-close:active {
  transform: scale(0.9);
  transition-duration: 0.08s;
}

.impression-chip:active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

.orb-button:active {
  transform: scale(1.02) !important;
  transition-duration: 0.12s;
}


/* ─────────────────────────────────────────────────────────────
   5. 品牌字体引入（可选 — 需网络加载）
   使用系统字体降级，无网络时自动回退到原方案
   ───────────────────────────────────────────────────────────── */

/* Satoshi 字体 — 适合正文的现代无衬线字体 */
@font-face {
  font-family: 'Satoshi';
  src: url('https://fonts.cdnfonts.com/s/satoshi/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://fonts.cdnfonts.com/s/satoshi/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://fonts.cdnfonts.com/s/satoshi/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 替换正文字体栈：Satoshi 优先，系统字体降级 */
body,
input,
textarea,
select,
button {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 衬线标题保留 Georgia，但增加 Cormorant Garamond 作为更有性格的衬线首选 */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('https://fonts.cdnfonts.com/s/cormorant-garamond/CormorantGaramond-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.serif {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
}


/* ─────────────────────────────────────────────────────────────
   6. 噪点纹理覆层
   打破数字平面的"塑料感"，增加有机质感
   ───────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox); /* 最高层，覆盖一切 */
  pointer-events: none;        /* 不影响任何交互 */
  background-image: var(--noise-texture);
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* 暗色模式降低噪点强度 */
:root.theme-dark body::after {
  opacity: 0.04;
  mix-blend-mode: soft-light;
}

/* 低性能设备：禁用噪点（与原 blur-disabled 机制一致） */
.blur-disabled body::after {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   6.5 液态背景动画
   有机流动的色彩 blob，为页面增加生命力
   ───────────────────────────────────────────────────────────── */
#liquid-stage {
  position: fixed;
  inset: -30%;
  z-index: var(--z-bg-deep);
  pointer-events: none;
  opacity: 0.6;
}

.liquid-blob {
  position: absolute;
  border-radius: 42% 58% 68% 32%;
  filter: blur(48px);
  opacity: 0.72;
  will-change: transform;
  animation: blobDrift 12s ease-in-out infinite alternate;
}

.liquid-blob:nth-child(1) {
  width: 420px; height: 380px;
  top: 8%; left: 5%;
  background: rgba(255, 140, 60, 0.5);
  animation-duration: 10s;
}
.liquid-blob:nth-child(2) {
  width: 360px; height: 400px;
  top: 22%; left: 32%;
  background: rgba(245, 72, 48, 0.42);
  animation-duration: 13s;
}
.liquid-blob:nth-child(3) {
  width: 440px; height: 340px;
  top: 10%; left: 58%;
  background: rgba(240, 120, 100, 0.48);
  animation-duration: 11s;
}
.liquid-blob:nth-child(4) {
  width: 380px; height: 420px;
  top: 35%; left: 18%;
  background: rgba(255, 160, 80, 0.44);
  animation-duration: 14s;
}
.liquid-blob:nth-child(5) {
  width: 400px; height: 360px;
  top: 28%; left: 50%;
  background: rgba(220, 100, 80, 0.46);
  animation-duration: 12s;
}

/* 暗色模式：冷色调 blob */
:root.theme-dark .liquid-blob:nth-child(1) { background: rgba(82, 132, 214, 0.24); }
:root.theme-dark .liquid-blob:nth-child(2) { background: rgba(96, 190, 224, 0.16); }
:root.theme-dark .liquid-blob:nth-child(3) { background: rgba(130, 104, 214, 0.24); }
:root.theme-dark .liquid-blob:nth-child(4) { background: rgba(82, 132, 214, 0.20); }
:root.theme-dark .liquid-blob:nth-child(5) { background: rgba(96, 190, 224, 0.18); }

@keyframes blobDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-4%, 12%, 0) rotate(-18deg) scale(1.2); }
  100% { transform: translate3d(8%, 6%, 0) rotate(12deg) scale(1.12); }
}

/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .liquid-blob { animation: none; }
}

/* 低性能设备：隐藏液态背景 */
.blur-disabled #liquid-stage { display: none; }


/* ─────────────────────────────────────────────────────────────
   7. 表面质感升级：真玻璃效果 + 色调阴影
   ───────────────────────────────────────────────────────────── */

/* 模态卡片：增加内边框模拟边缘折射 */
.modal-card {
  box-shadow:
    0 20px 52px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08); /* 内顶光 */
}

:root:not(.theme-dark) .modal-card {
  box-shadow:
    0 20px 52px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5); /* 亮色模式内顶光更强 */
}

/* 导航栏：增加底部细线模拟玻璃边缘 */
.site-nav {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--border) 50%, transparent),
    0 4px 12px color-mix(in srgb, var(--shadow) 40%, transparent);
}

/* 省份卡片 hover：色调阴影（阴影带 accent 色温） */
.province-card:hover {
  box-shadow:
    0 12px 24px var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.province-card.is-active {
  box-shadow:
    0 16px 28px var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 日志卡片：色调阴影 */
.log-card {
  box-shadow:
    0 10px 24px var(--shadow),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}


/* ─────────────────────────────────────────────────────────────
   8. install-button 统一样式
   消除 index.html 和 main.html 中的重复内联样式
   ───────────────────────────────────────────────────────────── */
.install-button {
  font-size: 0.82rem;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 20px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
}

.install-button:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.install-button:active {
  transform: scale(0.96);
}


/* ─────────────────────────────────────────────────────────────
   9. skip-to-content 链接样式
   键盘用户的"跳到主内容"链接，默认隐藏，聚焦时显现
   ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-lightbox);
  padding: 10px 20px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: left 0.2s ease;
}

.skip-link:focus {
  left: 0;
}


/* ─────────────────────────────────────────────────────────────
   10. 骨架屏加载状态
   替代纯文字"加载中"，提供与最终布局匹配的占位形状
   ───────────────────────────────────────────────────────────── */

/* 骨架屏通用 shimmer 动画 */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border) 60%, transparent) 25%,
    color-mix(in srgb, var(--border) 30%, transparent) 50%,
    color-mix(in srgb, var(--border) 60%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* 地图骨架屏 */
.map-stage.is-loading .china-map {
  display: none;
}
.map-stage.is-loading::before {
  content: '';
  display: block;
  width: 100%;
  height: 60%;
  margin: 20% auto;
  max-width: 320px;
  aspect-ratio: 1.2 / 1;
  .skeleton;
  border-radius: 50%;
}

/* 时间线骨架屏 */
.timeline-container.is-loading .timeline-card {
  visibility: hidden;
}
.timeline-container.is-loading::after {
  content: '';
  display: block;
  height: 80px;
  margin-bottom: 12px;
  background: inherit;
  .skeleton;
}

/* 统计面板骨架屏 */
.stats-container.is-loading::before {
  content: '';
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stats-container.is-loading::after {
  content: '';
  display: block;
  height: 120px;
  .skeleton;
}

/* 尊重减少动画偏好：骨架屏改为静态 */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: color-mix(in srgb, var(--border) 40%, transparent);
  }
}


/* ─────────────────────────────────────────────────────────────
   11. 空状态引导视图
   无日志时显示引导性提示，而非空白
   ───────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--soft-text);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  opacity: 0.4;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-state-hint {
  font-size: 14px;
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────
   12. 滚动条美化
   ───────────────────────────────────────────────────────────── */
/* Webkit 浏览器 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 15%, transparent) transparent;
}


/* ─────────────────────────────────────────────────────────────
   13. 选区颜色
   ───────────────────────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text);
}

:root.theme-dark ::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}


/* ─────────────────────────────────────────────────────────────
   14. 微动效：滚动入场动画增强
   为 .reveal 元素增加更自然的入场过渡
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 尊重减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   文件说明
   ═══════════════════════════════════════════════════════════════

   本文件包含 14 个视觉增强模块，按影响优先级排列：

   1.  焦点环修复      — 可访问性硬性要求（严重）
   2.  100vh → 100dvh  — iOS Safari 视口修复
   3.  平滑滚动 + 排版  — text-wrap / tabular-nums / letter-spacing 统一
   4.  按压反馈        — :active scale 反馈
   5.  品牌字体        — Satoshi + Cormorant Garamond（可选，需网络）
   6.  噪点纹理覆层    — 打破"塑料感"
   7.  表面质感升级    — 真玻璃效果 + 色调阴影
   8.  install-button  — 统一消除重复内联样式
   9.  skip-to-content — 键盘可访问性
   10. 骨架屏加载状态  — 替代纯文字"加载中"
   11. 空状态引导视图  — 引导新用户首次操作
   12. 滚动条美化      — 全局滚动条样式
   13. 选区颜色        — 文字选中时的品牌色
   14. 微动效          — 滚动入场动画

   启用方式：在 HTML <head> 中，原 CSS 之后添加：
   <link rel="stylesheet" href="city-eyes-visual.css">

   禁用方式：删除该 <link> 行即可，无副作用。

   ═══════════════════════════════════════════════════════════════ */