/**
 * common.css — 所有幻灯片的公共样式
 * 修改此文件会同步影响所有页面
 */

/* ── CSS 变量（全局主题） ── */
:root {
  --c-bg:     #03060f;
  --c-blue:   #1a8fff;
  --c-accent: #7b2fff;
  --c-neon:   #00f5c8;
  --c-purple: #c040fb;
  --c-silver: #a8b8d0;
  --c-text:   #e8f0fe;
  --c-dim:    #6b7fa3;
  --glow-blue:   0 0 16px rgba(26,143,255,.7);
  --glow-neon:   0 0 16px rgba(0,245,200,.7);
  --glow-purple: 0 0 16px rgba(192,64,251,.6);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body {
  width:100%; height:100%; background:#000; overflow:hidden;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
}

/* ── 16:9 幻灯片容器 ── */
.slide-wrap {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.slide {
  position:relative;
  width:min(100vw,177.78vh);
  height:min(100vh,56.25vw);
  background:var(--c-bg);
  overflow:hidden;
}

/* ── 背景层 ── */
#cvs { position:absolute; inset:0; z-index:0 }

.grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(26,143,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,143,255,.05) 1px, transparent 1px);
  background-size:60px 60px;
}

.glow {
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(26,143,255,.08) 0%,
    rgba(123,47,255,.05) 50%,
    transparent 75%
  );
}

/* ── 装饰线 ── */
.ln { position:absolute; z-index:3; left:0; right:0; height:2px }
.ln-t {
  top:9%;
  background:linear-gradient(90deg,transparent,var(--c-blue) 30%,var(--c-accent) 70%,transparent);
}
.ln-b {
  bottom:9%;
  background:linear-gradient(90deg,transparent,var(--c-neon) 30%,var(--c-blue) 70%,transparent);
}

/* ── 角括号 ── */
.bk { position:absolute; z-index:3; width:4.5%; height:13% }
.bk::before,.bk::after {
  content:''; position:absolute;
  background:var(--c-blue); box-shadow:var(--glow-blue);
}
.bk-tl { top:4%; left:3% }
.bk-tl::before { top:0; left:0; width:2px; height:100% }
.bk-tl::after  { top:0; left:0; height:2px; width:100% }
.bk-tr { top:4%; right:3% }
.bk-tr::before { top:0; right:0; width:2px; height:100% }
.bk-tr::after  { top:0; right:0; height:2px; width:100% }
.bk-bl { bottom:4%; left:3% }
.bk-bl::before { bottom:0; left:0; width:2px; height:100% }
.bk-bl::after  { bottom:0; left:0; height:2px; width:100% }
.bk-br { bottom:4%; right:3% }
.bk-br::before { bottom:0; right:0; width:2px; height:100% }
.bk-br::after  { bottom:0; right:0; height:2px; width:100% }

/* ── 步骤动画系统 ── */
[data-step] {
  opacity:0; transform:translateY(12px);
  transition:opacity .42s ease, transform .42s ease;
}
[data-step].step-on { opacity:1; transform:translateY(0) }

/* ── 步骤指示点（由 JS 动态注入内容） ── */
.step-dots {
  position:absolute; bottom:3.5%; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; gap:7px; align-items:center;
}
.dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(168,184,208,.25);
  transition:background .3s, box-shadow .3s;
}
.dot.active {
  background:var(--c-blue);
  box-shadow:0 0 8px rgba(26,143,255,.7);
}

/* ── 页码（由 JS 动态注入） ── */
.page-num {
  position:absolute; bottom:1.5%; left:50%; transform:translateX(-50%);
  z-index:10; font-size:clamp(8px,.8vw,11px);
  color:var(--c-dim); letter-spacing:.12em;
  opacity:0; animation:fadeIn .4s ease forwards .7s;
}

/* ── 内容区基础 ── */
.content {
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column;
  padding:0 5.5%; padding-top:11%; padding-bottom:9%;
}

/* ── 通用幻灯片头部 ── */
.sec-tag {
  font-size:clamp(9px,.85vw,12px); color:var(--c-dim);
  letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:clamp(3px,.5vh,7px);
  opacity:0; animation:fadeUp .6s ease forwards .2s;
}
.title {
  font-size:clamp(20px,2.8vw,40px); font-weight:700; letter-spacing:.06em;
  background:linear-gradient(90deg,#fff 0%,#a0c8ff 50%,var(--c-accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:clamp(2px,.4vh,5px);
  opacity:0; animation:fadeUp .6s ease forwards .35s;
}
.subtitle {
  font-size:clamp(10px,1.1vw,15px); color:var(--c-silver); letter-spacing:.04em;
  margin-bottom:clamp(8px,1.4vh,16px);
  opacity:0; animation:fadeUp .5s ease forwards .5s;
}

/* ── 目录按钮（注入到 slide-wrap，PPT 内容区外左上角） ── */
.toc-btn {
  position:absolute;
  top:clamp(6px,1vh,12px); left:clamp(6px,.8vw,12px);
  z-index:300;
  background:rgba(26,143,255,.08); border:1px solid rgba(26,143,255,.28);
  border-radius:6px; padding:4px 11px; cursor:pointer;
  color:var(--c-dim); font-size:clamp(9px,.88vw,12px);
  display:flex; align-items:center; gap:6px; letter-spacing:.08em;
  transition:border-color .2s, color .2s, background .2s;
  backdrop-filter:blur(4px);
}
.toc-btn:hover { border-color:var(--c-blue); color:#fff; background:rgba(26,143,255,.18) }
.toc-btn i { font-size:.9em }

/* ── 目录覆盖层（左侧抽屉式，注入到 slide-wrap） ── */
.toc-ov {
  position:absolute; inset:0; z-index:200;
  background:rgba(3,6,15,.45); backdrop-filter:blur(3px);
  display:none;
}
.toc-ov.show { display:block }

.toc-panel {
  position:absolute; top:0; left:0; bottom:0;
  width:clamp(220px,26%,300px);
  background:rgba(5,10,28,.97);
  border-right:1px solid rgba(26,143,255,.22);
  padding:clamp(14px,2.2vh,26px) clamp(14px,1.8vw,24px);
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  box-shadow:6px 0 40px rgba(3,6,15,.6);
}
.toc-ov.show .toc-panel { transform:translateX(0) }

.toc-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(10px,1.6vh,18px);
  padding-bottom:clamp(8px,1.1vh,12px); border-bottom:1px solid rgba(26,143,255,.14);
}
.toc-hd-ttl {
  font-size:clamp(9px,.9vw,12px); color:var(--c-dim);
  letter-spacing:.2em; text-transform:uppercase;
}
.toc-x {
  background:none; border:none; cursor:pointer; color:var(--c-dim);
  font-size:clamp(12px,1.2vw,16px); line-height:1; padding:2px 5px;
  transition:color .2s;
}
.toc-x:hover { color:#fff }

.toc-list { display:flex; flex-direction:column; gap:clamp(2px,.4vh,5px) }
.toc-a {
  display:flex; align-items:center; gap:clamp(8px,.9vw,12px);
  padding:clamp(5px,.7vh,8px) clamp(8px,1vw,12px);
  border-radius:6px; border:1px solid transparent;
  text-decoration:none; color:var(--c-silver);
  font-size:clamp(10px,.95vw,13px); letter-spacing:.03em;
  transition:background .2s, border-color .2s, color .2s;
}
.toc-a:hover { background:rgba(26,143,255,.08); border-color:rgba(26,143,255,.2); color:#fff }
.toc-a.cur  { background:rgba(26,143,255,.1);  border-color:rgba(26,143,255,.3);  color:var(--c-blue) }
.toc-n {
  font-family:"JetBrains Mono","Courier New",monospace;
  font-size:clamp(8px,.8vw,11px); color:var(--c-dim); min-width:2em; flex-shrink:0;
}
.toc-a.cur .toc-n { color:var(--c-blue) }

/* ── 关键帧 ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn {
  from { opacity:0 }
  to   { opacity:1 }
}