/* ============================================
   BASE · 全局变量与基底
   Claude 官网深色模式配色
   ============================================ */

:root {
  /* 背景层（Claude 温暖深灰系，不是纯黑） */
  --bg-primary: #262624;
  --bg-secondary: #1f1e1d;
  --bg-elevated: #30302e;
  --bg-hover: #3a3a37;

  /* 边框（基于米白前景做透明度，比 Claude 官网亮一档适应 LED 大屏） */
  --border-faint: rgba(245, 244, 239, 0.08);
  --border-subtle: rgba(245, 244, 239, 0.14);
  --border-medium: rgba(245, 244, 239, 0.20);
  --border-strong: rgba(245, 244, 239, 0.32);

  /* 文字（Claude 米白系，二三级提亮） */
  --text-primary: #f5f4ef;
  --text-secondary: #cdc9c0;
  --text-muted: #a5a297;
  --text-faint: #6e6c66;
  --text-disabled: #42403c;

  /* 唯一强调色（Claude 橙褐 → 提亮版，适应深色大屏） */
  --accent: #e07a5d;
  --accent-hover: #eb8f6f;
  --accent-soft: rgba(224, 122, 93, 0.18);

  /* 数据可视化三档分级（更鲜明） */
  --data-leading: #82b891;      /* 领先 · 绿 */
  --data-leading-bg: rgba(130, 184, 145, 0.18);
  --data-neutral: #a5a297;      /* 普通 · 灰 */
  --data-neutral-bg: rgba(165, 162, 151, 0.12);
  --data-lagging: #d37373;      /* 落后 · 红 */
  --data-lagging-bg: rgba(211, 115, 115, 0.18);

  /* 6 个阶段色阶（统一灰调，当下阶段用 accent）*/
  --era-1: #4a4844;
  --era-2: #565450;
  --era-3: #63605a;
  --era-4: #706d66;
  --era-5: #7d7a72;
  --era-6: var(--accent);

  /* 阴影（克制的 drop shadow，无发光）*/
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.35);

  /* Viewport 单位 */
  --u: 1vw;

  /* 字号刻度（以 Claude / Anthropic 官网编辑级排版为参考）*/
  --text-hero: 7vw;
  --text-display: 5vw;
  --text-h1: 3.6vw;
  --text-h2: 2.6vw;
  --text-h3: 1.8vw;
  --text-h4: 1.4vw;
  --text-lg: 1.2vw;
  --text-md: 1vw;
  --text-body: 0.95vw;
  --text-sm: 0.82vw;
  --text-xs: 0.7vw;

  /* 数字专用字号 */
  --num-mega: 11vw;
  --num-huge: 7vw;
  --num-big: 4vw;

  /* 间距 */
  --space-xs: 0.4vw;
  --space-sm: 0.8vw;
  --space-md: 1.5vw;
  --space-lg: 2.5vw;
  --space-xl: 4vw;
  --space-xxl: 6vw;

  /* 圆角 · 克制使用 */
  --radius-sm: 0.2vw;
  --radius-md: 0.4vw;
  --radius-lg: 0.6vw;

  /* 动效节奏 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
}

/* 重置 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

body.cursor-hidden { cursor: none; }
body.cursor-hidden * { cursor: none !important; }

img { display: block; max-width: 100%; }

/* 舞台 · 用 dvh 排除移动端浏览器工具栏占用的高度 */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;       /* 老浏览器回退 */
  height: 100dvh;      /* 现代：动态视口高度，排除地址栏/工具栏 */
  overflow: hidden;
  background: var(--bg-primary);
}

/* 每张 slide · inset:0 填满 .stage（跟随 stage 的 dvh 高度）*/
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  will-change: opacity;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.slide.leaving {
  opacity: 0;
  visibility: visible;
  z-index: 1;
}

/* 工具类 */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }

/* 黑/白屏 */
.blackout-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.blackout-overlay.on { opacity: 1; pointer-events: auto; }

.whiteout-overlay {
  position: fixed;
  inset: 0;
  background: #f5f4ef;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.whiteout-overlay.on { opacity: 1; pointer-events: auto; }

/* 去掉噪点叠加层：Claude 官网没有这个，保持画面干净 */
.grain { display: none; }

/* 页码指示 */
.slide-indicator {
  position: fixed;
  bottom: 2vh;
  right: 2vw;
  font-family: var(--font-sans);
  font-size: 0.7vw;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  z-index: 1000;
  pointer-events: none;
}

body.present-mode .slide-indicator { display: none; }