/* ===================================================================
 * story-nav.css · 页面级吸顶导航条样式（v=20260714-24）
 *
 * 用于 jingyanggang.html 顶部吸顶导航条，提供：
 *   - 返回 AI 影匠工坊
 *   - 七道工序（页面内锚点 #craftSec）
 *   - 互动戏台（页面内锚点 #actStage）
 *
 * 设计原则：
 *   - position:sticky 吸顶，不覆盖内容（区别于 fixed）
 *   - top:0，z-index 高于戏台但不遮挡进度框/步骤栏/皮影
 *   - 深色半透明背景 + 细金边 + 轻微模糊
 *   - 为锚点设置 scroll-margin-top，避免吸顶导航遮住标题或操作区域
 * =================================================================== */

/* 导航条容器：吸顶，不覆盖内容 */
.page-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 6px;
  padding:10px 24px;
  background:rgba(14,6,5,.88);
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-kai);
  font-size:14px;
  letter-spacing:.15em;
}
/* 顶部金线 */
.page-nav::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), var(--vermillion), var(--gold), transparent);
}

/* 导航链接 */
.page-nav-link{
  display:inline-block;
  padding:6px 14px;
  color:var(--paper-dim);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:1px;
  transition:all .25s ease;
  white-space:nowrap;
}
.page-nav-link:hover{
  color:var(--gold-bright);
  border-color:var(--line-strong);
  background:rgba(60,24,18,.4);
}
.page-nav-link:active{
  color:var(--gold);
}
.page-nav-link:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

/* 分隔符 */
.page-nav-div{
  color:var(--vermillion);
  opacity:.6;
  user-select:none;
  padding:0 2px;
}

/* ===================================================================
 * 锚点 scroll-margin-top：避免吸顶导航遮住标题或操作区域
 * 导航条高度约 44px（桌面）/ 38px（移动），留 60px 余量
 * =================================================================== */
#craftSec,
#craftPlay,
#transSec,
#actStage{
  scroll-margin-top:64px;
}

/* 响应式：窄屏自适应 */
@media(max-width:900px){
  .page-nav{
    padding:8px 16px;
    font-size:13px;
    gap:0 4px;
  }
  .page-nav-link{
    padding:5px 10px;
  }
  #craftSec,
  #craftPlay,
  #transSec,
  #actStage{
    scroll-margin-top:56px;
  }
}
@media(max-width:560px){
  .page-nav{
    font-size:12px;
    gap:4px 4px;
    padding:7px 12px;
  }
  .page-nav-link{
    padding:4px 8px;
  }
  .page-nav-div{
    display:none;
  }
  #craftSec,
  #craftPlay,
  #transSec,
  #actStage{
    scroll-margin-top:48px;
  }
}

/* reduced-motion */
@media(prefers-reduced-motion:reduce){
  .page-nav-link{ transition:none !important; }
}