/* ============================================================
   arch.css — 「以卦定卷 · 展卷入境」四层一线样式
   古朴绢纸色调 · 长卷 · 舟渡 · 折屏 · 册页 · 钤印
   ============================================================ */

/* ── 全局变量：古朴色系 ── */
:root {
  --arch-paper: #E8DCC8;        /* 古绢纸底 */
  --arch-paper-dark: #D4C4A8;
  --arch-ink: #2C2418;          /* 墨 */
  --arch-ink-dim: #5C5240;
  --arch-vermilion: #C23A22;    /* 朱砂印 */
  --arch-indigo: #4A5D7A;       /* 靛蓝 */
  --arch-gold: #B8860B;         /* 金 */
  --arch-sepia: #8B7355;        /* 褐 */
  --arch-fade: rgba(232, 220, 200, 0);
}

/* ── 根容器 ── */
.arch-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--arch-paper);
  color: var(--arch-ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
}

/* ═══════════════════════════
   ① 生成层（启站占卜）
   ═══════════════════════════ */
#arch-gen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    url("ancient-paper.webp") center/cover,
    linear-gradient(135deg, var(--arch-paper) 0%, var(--arch-paper-dark) 50%, var(--arch-paper) 100%);
  transition: opacity 1s ease, visibility 1s ease;
}
.arch-gen-inner {
  text-align: center;
  max-width: 520px;
  padding: 3rem 2rem;
}
.arch-gen-title {
  font-size: 0.9rem;
  letter-spacing: 0.6em;
  color: var(--arch-ink-dim);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

/* 卦象展示 */
.arch-hex-display {
  margin: 1.5rem auto;
  min-height: 220px;
}
.hex-lines {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  align-items: center;
  margin-bottom: 1.5rem;
}
.yao {
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  transition: all 0.3s;
  line-height: 1.6;
}
.yao.yang { color: var(--arch-ink); }
.yao.yin { color: var(--arch-ink-dim); }
.yao.old { animation: yao-pulse 2s infinite; }
@keyframes yao-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.hex-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.hex-upper, .hex-lower {
  font-size: 1.15rem;
  letter-spacing: 0.15em;
}
.hex-full-name {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-top: 0.5rem;
  color: var(--arch-vermilion);
}

/* 彖辞 / 象辞 */
.arch-hex-info {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--arch-ink-dim);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.hex-ci, .hex-xiang, .hex-bian {
  margin: 0.35rem 0;
  text-align: left;
  padding-left: 1rem;
  border-left: 2px solid var(--arch-gold);
}

/* 灵签 */
.lingqian-display {
  text-align: center;
}
.lingqian-icon {
  font-size: 3rem;
  color: var(--arch-vermilion);
  margin-bottom: 1rem;
}
.lingqian-poem {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 1rem;
  line-height: 2;
  white-space: pre-line;
  color: var(--arch-ink);
  margin: 1rem 0;
  background: rgba(255,255,255,0.35);
  padding: 1rem;
  border-radius: 4px;
}
.lingqian-zone {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--arch-indigo);
  font-size: 1.05rem;
}
.lingqian-decode {
  margin-top: 1rem;
  border-left-color: var(--arch-indigo);
}

/* 灼甲骨 */
.oracle-display {
  position: relative;
  text-align: center;
}
.oracle-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 8px;
  opacity: 0.85;
}
.oracle-cracks {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  pointer-events: none;
}
.crack-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: crack-draw 1.5s forwards;
}
.crack-line:nth-child(2) { animation-delay: 0.3s; }
.crack-line:nth-child(3) { animation-delay: 0.6s; }
.crack-line:nth-child(4) { animation-delay: 0.9s; }
.crack-line:nth-child(5) { animation-delay: 1.2s; }
@keyframes crack-draw {
  to { stroke-dashoffset: 0; }
}
.oracle-zone {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--arch-sepia);
  font-size: 1.05rem;
}
.oracle-decode {
  margin-top: 1rem;
  border-left-color: var(--arch-sepia);
}

/* 启站按钮组 */
.arch-gen-tools {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.arch-btn-gen {
  background: transparent;
  border: 1.5px solid var(--arch-ink-dim);
  color: var(--arch-ink);
  padding: 0.65rem 1.4rem;
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s;
  letter-spacing: 0.12em;
}
.arch-btn-gen:hover {
  background: var(--arch-ink);
  color: var(--arch-paper);
  box-shadow: 0 2px 10px rgba(44,36,24,0.25);
}

/* 展卷入境按钮 */
.arch-enter-btn {
  margin-top: 2.5rem;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: enter-blink 2.5s infinite;
}
.arch-enter-btn span {
  font-size: 1.15rem;
  letter-spacing: 0.4em;
  color: var(--arch-vermilion);
  border-bottom: 1.5px solid var(--arch-vermilion);
  padding-bottom: 0.2rem;
}
.arch-enter-btn small {
  font-size: 0.78rem;
  color: var(--arch-ink-dim);
  letter-spacing: 0.2em;
}
@keyframes enter-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 生成层淡出 */
.arch-fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ═══════════════════════════
   ② 空间层：长卷 + 舟 + 折屏
   ═══════════════════════════ */
#arch-scroll-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease 0.5s, visibility 1.2s ease 0.5s;
}
#arch-scroll-layer.arch-show {
  opacity: 1;
  visibility: visible;
}

/* 长卷容器 */
.arch-handscroll {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* iOS 惯性滚动：移动端漫游长卷才有顺滑手感 */
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条但保留滚动能力 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;              /* 可按住拖拽长卷 */
  user-select: none;
  -webkit-user-select: none;
}
.arch-handscroll.arch-grabbing { cursor: grabbing; }
.arch-handscroll.arch-grabbing .arch-zone { cursor: grabbing; }
.arch-handscroll::-webkit-scrollbar { display: none; }

.arch-scroll-content {
  position: relative;
  width: max-content;        /* 随 8 区自然宽度撑开 */
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 3vw;
  padding: 0 55vw;           /* 两端长卷留白，使可横向拖动漫游 */
  box-sizing: border-box;
  background:
    url("qingming-scroll.webp") repeat-x center top / cover,
    linear-gradient(to bottom,
      rgba(232,220,200,0.85) 0%,
      rgba(212,196,168,0.75) 70%,
      rgba(139,115,85,0.35) 100%);
  background-blend-mode: multiply;
}

/* 分区 */
.arch-zone {
  position: relative;
  flex: 0 0 auto;
  width: 13vw;
  min-width: 128px;
  max-width: 190px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
  cursor: pointer;            /* 整张卡片都可点进入 */
}
.arch-zone.active {
  transform: scale(1.04);
  z-index: 5;
}
.arch-zone-inner {
  background: rgba(232,220,200,0.82);
  border: 1.5px solid;
  border-radius: 6px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 24px rgba(44,36,24,0.12);
  max-width: 200px;
  transition: box-shadow 0.3s;
}
.arch-zone.active .arch-zone-inner {
  box-shadow: 0 6px 32px rgba(44,36,24,0.22);
}
.arch-zone-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.arch-zone-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 0.3rem;
}
.arch-zone-sub {
  font-size: 0.8rem;
  color: var(--arch-ink-dim);
  margin-bottom: 0.5rem;
}
.arch-zone-tip {
  font-size: 0.76rem;
  color: var(--arch-indigo);
  font-style: italic;
  margin-top: 0.5rem;
}

/* 钤印按钮 */
.arch-seal-btn {
  display: inline-block;
  margin-top: 1rem;
  background: transparent;
  border: 2px solid var(--arch-vermilion);
  color: var(--arch-vermilion);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
  line-height: 44px;
}
.arch-seal-btn:hover {
  background: var(--arch-vermilion);
  color: var(--arch-paper);
  transform: scale(1.08);
}

/* ──── 乘舟渡 ──── */
.arch-boat {
  position: absolute;
  bottom: 14%;
  left: 200px;
  z-index: 20;
  cursor: grab;
  user-select: none;
  transition: left 0.05s linear;
}
.arch-boat:active { cursor: grabbing; }
.arch-boat-body {
  font-size: 1.8rem;
  background: rgba(184,134,11,0.7);
  color: var(--arch-paper);
  padding: 0.4rem 0.9rem;
  border-radius: 4px 4px 16px 4px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  writing-mode: horizontal-tb;
  letter-spacing: 0.15em;
}

/* ──── 屏风扇景 ──── */
.arch-screens {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}
.arch-screen {
  position: absolute;
  top: 10%;
  width: 140px;
  height: 80%;
  background:
    url("ancient-paper.webp") center/cover,
    linear-gradient(90deg,
      rgba(232,220,200,0.6) 0%,
      rgba(232,220,200,0.15) 80%,
      transparent 100%);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(139,115,85,0.3);
  border-radius: 4px;
  padding: 1.5rem 1rem;
  writing-mode: vertical-rl;
  font-size: 0.84rem;
  opacity: 0;
  transform: perspective(400px) rotateY(var(--r, 15deg));
  transition: opacity 0.5s, transform 0.5s;
}
.arch-screen-left {
  left: 1%;
  --r: -15deg;
}
.arch-screen-right {
  right: 1%;
  --r: 15deg;
}
#arch-scroll-layer.arch-show .arch-screen {
  opacity: 1;
}
.screen-preview b {
  font-size: 1.05rem;
  letter-spacing: 0.15em;
}

/* ═══════════════════════════
   ③ 深入层：册页蝴蝶装
   ═══════════════════════════ */
.arch-album-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(44,36,24,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.arch-album-show {
  opacity: 1;
  visibility: visible;
}

.arch-album-frame {
  width: min(720px, 92vw);
  background:
    url("ancient-paper.webp") center/cover,
    var(--arch-paper);
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.3);
  overflow: hidden;
}
.arch-album-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid rgba(139,115,85,0.3);
  background: rgba(255,255,255,0.2);
}
.album-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.album-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--arch-ink-dim);
  padding: 0.2rem 0.5rem;
}
.album-close:hover { color: var(--arch-vermilion); }

.arch-album-pages {
  display: flex;
  min-height: 380px;
}
.album-page {
  flex: 1;
  padding: 2rem;
  position: relative;
}
.album-page-left {
  border-right: 1px dashed rgba(139,115,85,0.25);
}
.album-page-right {
  background: rgba(255,255,255,0.08);
}
.album-spine {
  width: 28px;
  background: linear-gradient(to right,
    var(--arch-sepia), var(--arch-paper-dark), var(--arch-sepia));
  flex-shrink: 0;
}
.album-paper-texture {
  position: absolute;
  inset: 0;
  background: url("ancient-paper.webp") center/cover;
  opacity: 0.12;
  pointer-events: none;
  border-radius: 4px;
}
.album-page h3 {
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
  color: var(--arch-ink);
}
.album-page p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--arch-ink-dim);
}
.album-tip {
  margin-top: 1.5rem;
  font-style: italic;
  color: var(--arch-indigo);
}
.album-note {
  margin-top: 3rem;
  font-size: 0.82rem;
  color: var(--arch-sepia);
  text-align: center;
}

/* 册页内钤印入口 */
.album-enter-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 1.5px solid var(--arch-vermilion);
  color: var(--arch-vermilion);
  text-decoration: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}
.album-enter-seal:hover {
  background: var(--arch-vermilion);
  color: var(--arch-paper);
}
.seal-stamp-small {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ═══════════════════════════
   ④ 动作层：印章钤记动画
   ═══════════════════════════ */
.arch-seal-stamp {
  position: absolute;
  top: -20px;
  right: -10px;
  z-index: 40;
  pointer-events: none;
}
.seal-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0;
  transform: scale(2.5) rotate(-12deg);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.seal-drop .seal-img {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ═══════════════════════════
   响应式 & 无障碍降级
   ═══════════════════════════ */
@media (max-width: 640px) {
  .arch-gen-inner { padding: 1.5rem 1rem; }
  .hex-full-name { font-size: 1.3rem; }
  .arch-zone-inner { padding: 1rem 0.8rem; max-width: 150px; }
  .arch-screens { display: none; } /* 小屏隐藏折屏 */
  .arch-album-frame { width: 96vw; }
  .arch-album-pages { flex-direction: column; }
  .album-spine { width: 100%; height: 12px; }
  .album-page-left { border-right: none; border-bottom: 1px dashed rgba(139,115,85,0.25); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════
   ⑤ 黑洞过渡（选境 → 落地）
   ═══════════════════════════ */
.arch-blackhole {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 核心黑洞：从 0 放大到吞满全屏的纯黑圆 */
.bh-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  will-change: width, height;
}
.arch-blackhole.bh-active .bh-core {
  animation: bh-swallow 0.9s cubic-bezier(0.6, 0, 0.8, 0.4) forwards;
}

/* 环形吸积盘光晕：取当前境 z.color，同步放大 + 旋转 */
.bh-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255,255,255,0.35) 0%,
    var(--zone-color, #C23A22) 35%,
    transparent 70%);
  filter: blur(2px);
  opacity: 0;
  will-change: width, height, opacity;
}
.arch-blackhole.bh-active .bh-ring {
  opacity: 1;
  animation:
    bh-ring-grow 0.9s ease-out forwards,
    bh-ring-spin 0.9s linear forwards;
}

@keyframes bh-swallow {
  0% {
    width: 0;
    height: 0;
  }
  60% {
    width: 40vmax;
    height: 40vmax;
  }
  100% {
    width: 160vmax;
    height: 160vmax;
  }
}

@keyframes bh-ring-grow {
  0% {
    width: 8vmax;
    height: 8vmax;
    opacity: 1;
  }
  55% {
    width: 60vmax;
    height: 60vmax;
    opacity: 0.9;
  }
  100% {
    width: 160vmax;
    height: 160vmax;
    opacity: 0;
  }
}

@keyframes bh-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(220deg); }
}