/* ============================================================
   山海有灵 · 山海图卷（V6 · 首页沉浸门面）
   横向长卷：卷首引首 → 六篇目分段 → 卷尾落款
   版画国风，落在现有 tokens 内，与鉴/灵/造/卜/读同源
   ============================================================ */

/* ============ 首页重排：精简 hero + 图卷 + 入口 ============ */
.view-home.active {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
  gap: var(--sp-6);
}

/* 精简 hero */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.home-hero .hero-eyebrow {
  font-family: var(--font-sub);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  color: var(--ink-faint);
}
.home-hero .hero-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, var(--fs-3xl));
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: var(--sp-1) 0;
}
.home-hero .hero-title .accent {
  font-family: var(--font-display);
  color: var(--cinnabar);
}
.home-hero .hero-sub {
  font-family: var(--font-sub);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  letter-spacing: var(--ls-wide);
  max-width: 30em;
  line-height: var(--lh-snug);
}
.home-hero .hero-seal { margin-top: var(--sp-2); }

/* ============ 图卷容器 ============ */
.scroll-wrap {
  position: relative;
  /* 满铺到视口两侧：破出 .view 的 1200px max-width 限制，
     仿传统手卷从左到右的视觉张力；bleed hack 配合 body 的 overflow-x:hidden 避免水平滚动条 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--sp-2);
}

/* —— 横向滚动带 —— */
.scroll-band {
  position: relative;
  width: 100%;
  height: 420px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  outline: none;
}
.scroll-band:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cinnabar);
}
.scroll-band.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

/* —— 卷轴进度条（方案 C · V8.10）
   隐藏原生滚动条，改用底部朱砂细线 + 滑动小方印表示"展卷进度"。
   方印随 scrollLeft 在轨道上滑动，卷首贴左、卷尾贴右，呼应卷轴展开隐喻。
   进度条为 .scroll-band 兄弟节点（#scrollRoot 内），不随横向滚动带走。 —— */
#scrollRoot { position: relative; }

.scroll-band {
  scrollbar-width: none;            /* Firefox 隐藏原生条 */
}
.scroll-band::-webkit-scrollbar {
  display: none;                    /* webkit 隐藏原生条 */
}

/* 进度轨道：常显淡朱砂细线，暗示可展卷 */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 2px;
  background: rgba(178, 58, 46, 0.14);
  pointer-events: none;
}
/* 滑动小方印：当前卷位，朱砂实色，手作歪斜 */
.scroll-progress-seal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;                 /* 垂直居中，凸出于 2px 轨道 */
  background: var(--cinnabar);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(178, 58, 46, 0.45);
  transform: rotate(-3deg);
  transition: left var(--dur-fast) var(--ease-ink);
  will-change: left;
}
/* 拖拽时方印即时跟随，关闭过渡避免滞后 */
.scroll-band.is-dragging ~ .scroll-progress .scroll-progress-seal {
  transition: none;
}

/* —— 视差远山层（绝对定位，慢速位移） —— */
.scroll-far {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 30%, rgba(61,74,82,0.05), transparent 60%),
    radial-gradient(ellipse at 78% 60%, rgba(178,58,46,0.04), transparent 55%);
  will-change: transform;
}

/* —— 横向轨道 —— */
.scroll-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
  min-width: 100%;
  padding: var(--sp-4) 0;
}

/* ============ 卷首引首 ============ */
.scroll-intro {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-6);
  border-right: 1px dashed var(--ink-ghost);
}
.scroll-intro-seal {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-seal);
  transform: rotate(-3deg);
}
.scroll-intro-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-wide);
  line-height: 1.25;
  text-align: center;
}
.scroll-intro-note {
  margin: 0;
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-base);
  text-align: center;
  max-width: 16em;
}
.scroll-intro-rule {
  width: 48px;
  height: 2px;
  background: var(--cinnabar);
  border-radius: var(--r-sm);
  margin-top: var(--sp-1);
}

/* ============ 篇目区域（去框去栅格，异兽散落） ============ */
/* 宽度由 JS 内联（PADX*2 + (n-1)*STRIDE + FRAME）；无 border/overflow，连贯山水 */
.scroll-seg {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}

/* 山水背景 */
.scroll-seg-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.scroll-mtn-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 竖排篇目卷标 · 漫游时识篇目（提至可辨透明度） */
.scroll-seg-label {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-2);
  z-index: 2;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: rgba(28,26,23,0.22);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ============ 异兽缩略（绝对定位散落） ============ */
.scroll-beasts {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.scroll-beast {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-ink);
}
.scroll-beast:hover,
.scroll-beast:focus-visible {
  transform: translateY(-3px);
}
.scroll-beast:focus-visible {
  outline: none;
}
.scroll-beast-frame {
  position: relative;
  display: block;
  width: 84px;
  height: 84px;
  border: var(--line-ink) solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: var(--shadow-ink);
  transition: box-shadow var(--dur-fast) var(--ease-ink), border-color var(--dur-fast) var(--ease-ink);
}
.scroll-beast-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--line-hair) solid var(--ink-ghost);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.scroll-beast:hover .scroll-beast-frame,
.scroll-beast:focus-visible .scroll-beast-frame {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--accent, var(--cinnabar));
  border-color: var(--accent, var(--cinnabar));
}
.scroll-beast-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scroll-beast-img.is-placeholder {
  object-fit: contain;
}
/* 首字方印（图未加载/占位时显示） */
.scroll-beast-seal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--accent, var(--cinnabar));
  background: var(--paper);
  z-index: 0;
}
.scroll-beast-img:not(.is-placeholder) ~ .scroll-beast-seal {
  display: none;
}
.scroll-beast-name {
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  letter-spacing: var(--ls-normal);
  line-height: 1.2;
  text-align: center;
  max-width: 84px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 卷尾 · 分流枢纽 ============ */
.scroll-outro {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-left: 1px dashed var(--ink-ghost);
}
.scroll-outro-seal {
  transform: rotate(-4deg);
}
.scroll-outro-text {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
}
.scroll-outro-sub {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: var(--ls-wide);
}
/* 分流入口群 */
.scroll-hub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-2);
}
.scroll-hub-main {
  white-space: nowrap;
  text-align: center;
}
.scroll-hub-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.scroll-hub-row .btn {
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
}

/* ============ 展卷提示 ============ */
.scroll-hint {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  background: rgba(244,236,216,0.92);
  border: var(--line-hair) solid var(--ink-ghost);
  border-radius: var(--r-pill);
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  letter-spacing: var(--ls-normal);
  pointer-events: none;
  box-shadow: var(--shadow-ink);
  transition: opacity var(--dur-base) var(--ease-ink), transform var(--dur-base) var(--ease-ink);
}
.scroll-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}
.scroll-hint-arrow {
  font-family: var(--font-sub);
  color: var(--cinnabar);
  font-size: var(--fs-sm);
}

/* ============ 响应式：880px 图卷缩高 ============ */
@media (max-width: 880px) {
  .scroll-band { height: 380px; }
  /* 宽度由 JS 内联；frame 缩至 76，散落坐标(桌面基准)仍安全：top∈[143,207]+76=bottom≤299 < 348 */
  .scroll-beast-frame { width: 76px; height: 76px; }
  .scroll-beast-name { max-width: 76px; }
}

/* ============ 移动端 ≤640px 降级：竖向堆叠 ============ */
@media (max-width: 640px) {
  .view-home.active {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-7);
    gap: var(--sp-5);
  }
  .home-hero .hero-sub { font-size: var(--fs-sm); }

  /* 图卷容器无横向溢出 */
  .scroll-wrap { overflow: hidden; }
  .scroll-band {
    height: auto;
    overflow: visible;
    cursor: default;
    scrollbar-width: none;
  }
  .scroll-band::-webkit-scrollbar { display: none; }
  .scroll-band.is-dragging { cursor: default; user-select: auto; }
  .scroll-far { display: none; }

  /* 轨道转竖向 */
  .scroll-track {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    gap: var(--sp-4);
  }

  /* 卷首引首 */
  .scroll-intro {
    width: 100%;
    padding: var(--sp-4) var(--sp-3);
    border-right: none;
    border-bottom: 1px dashed var(--ink-ghost);
  }

  /* 篇目区域竖向全宽（覆盖内联宽度） */
  .scroll-seg {
    width: 100% !important;
    height: auto;
    padding: var(--sp-3);
    border-bottom: 1px dotted rgba(154,144,124,0.4);
    min-height: 0;
  }
  .scroll-seg-bg { opacity: 0.55; }
  .scroll-seg-label {
    font-size: var(--fs-xl);
    top: var(--sp-2);
    left: var(--sp-1);
  }

  /* 异兽退回横排（取消散落绝对定位） */
  .scroll-beasts {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) 0 0;
  }
  .scroll-beast {
    position: static;
    top: auto !important;
    left: auto !important;
  }
  .scroll-beast-frame { width: 72px; height: 72px; }
  .scroll-beast-name { max-width: 72px; }

  /* 卷尾枢纽 */
  .scroll-outro {
    width: 100%;
    padding: var(--sp-5) var(--sp-3);
    border-left: none;
    border-top: 1px dashed var(--ink-ghost);
  }
  .scroll-hub-row .btn { font-size: var(--fs-xs); padding: var(--sp-2); }

  /* 隐藏展卷提示（已竖向） */
  .scroll-hint { display: none; }
  /* 进度条仅在横向展卷时存在，竖向堆叠隐藏 */
  .scroll-progress { display: none; }
}

/* ============ 动效 ============ */
.scroll-beast {
  transition: transform var(--dur-fast) var(--ease-ink);
}
.scroll-seg-bg { transition: opacity var(--dur-base) var(--ease-ink); }

@media (prefers-reduced-motion: reduce) {
  .scroll-band { scroll-behavior: auto; }
  .scroll-far { transform: none !important; }
  .scroll-beast,
  .scroll-beast-frame,
  .scroll-seg-bg,
  .scroll-hint,
  .scroll-progress-seal {
    transition: none;
  }
  .scroll-beast:hover,
  .scroll-beast:focus-visible { transform: none; }
}