/* ============================================
   服务翻书（单本循环翻页）
   左页静态品牌 + 右页服务内容，自动翻页循环
   ============================================ */

/* ===== 容器（沿用门组件的头部排版） ===== */
.doors-component {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 48px 72px;
}

.door-head { text-align: center; margin-bottom: 20px; }
.door-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #FF6B35;
  border: 1.5px solid rgba(238, 240, 255, 0.42);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 20px;
}
.door-sub {
  margin-top: 14px;
  font-size: 16px;
  color: rgba(238, 240, 255, 0.85);
  letter-spacing: .04em;
}

/* Services 大字 */
.svc-hero-title {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-size: clamp(3.4rem, 9.5vw, 7rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
.svc-hero-title .sht-solid .split-line {
  background: linear-gradient(120deg, #7d82ff 0%, #a78bfa 65%, #ff8a5c 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(109, 114, 255, 0.32));
}
@media (max-width: 640px) {
  .svc-hero-title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}

/* ============ 开场：闭合的书 → 封面绕书脊翻开 ============ */
/* 闭合态：整书裁切只露右半（皮面板刚性不变形），封面盖在右半上；
   开场 = 封面绕书脊（右半左缘）真实 3D 翻转，左半随翻开逐渐显现 */
.book.is-opening {
  animation: bookEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  clip-path: inset(-90px -40px -90px 50% round 20px);
  animation-name: bookEnter, bookUnfoldClip;
  animation-duration: 0.7s, 1.3s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.4, 0.75, 0.3, 1);
  animation-delay: 0s, 0.55s;
  animation-fill-mode: both, both;
}

@keyframes bookEnter {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* 裁切窗口随封面翻开向左扩：封面转到 ~-90° 后左半显形，封面落下的轨迹正好遮住显现过程 */
@keyframes bookUnfoldClip {
  from { clip-path: inset(-90px -40px -90px 50% round 20px); }
  to   { clip-path: inset(-90px -40px -90px -40px round 20px); }
}

/* 左页目录常驻（开场期间被闭合裁切自然隐藏，无需淡入动画） */

/* 封皮页（品牌封面，垫在内容页之上）：绕书脊真实翻开 0° → -179°，带拎起弧线 */
.book.is-opening .bpage-cover {
  animation: coverOpen 1.3s cubic-bezier(0.4, 0.75, 0.3, 1) 0.55s both;
  z-index: 60 !important;
}

@keyframes coverOpen {
  0%   { transform: rotateY(0deg); translate: 0 0; }
  45%  { translate: 0 -16px; }              /* 纸被拎起的中峰 */
  /* 终点与 .bpage.flipped 完全一致（封皮最大深度，垫目录之下），动画结束零跳变 */
  100% { transform: rotateY(-179deg) scale(0.982) translateZ(6px); translate: 0 0; }
}

/* ----- 封面正面：品牌排版 ----- */
.cover-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}

.cover-front .cf-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: #ff9d78;
}

.cover-front .cf-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.35;
  font-weight: 800;
  background: linear-gradient(120deg, #9ba1ff, #c4b5fd 55%, #ffa07a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cover-front .cf-sub {
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  color: rgba(238, 240, 255, 0.7);
}

/* ============ 翻页动态：纸页被拎起的弧线 ============ */
/* 翻页进行中（JS 挂 .is-flipping）：页面上浮弧线 + 整书下压回弹 */
.bpage.is-flipping {
  animation: flipArc var(--flip-dur, 1s) cubic-bezier(0.4, 0.75, 0.3, 1) both;
}

@keyframes flipArc {
  0%   { translate: 0 0; z-index: inherit; }
  45%  { translate: 0 -14px; }  /* 纸被拎起的中峰 */
  100% { translate: 0 0; }
}

/* 整书在翻页瞬间的按压回弹 */
.book.is-pressed {
  animation: bookPress 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bookPress {
  0%   { transform: none; }
  35%  { transform: translateY(2px) scale(0.997); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .book.is-opening,
  .book.is-opening .bpage-cover,
  .bpage.is-flipping,
  .book.is-pressed { animation: none; }
  .book.is-opening { clip-path: none; }
}

/* ================= 书台（真实摊开的书） ================= */
.book-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
  perspective: 2200px;
  position: relative;
}

/* 书的接地投影（书"放"在页面上，而非漂浮） */
.book-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 68%;
  height: 44px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(3, 5, 22, 0.7), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* 封皮：比纸页大一圈的深色皮革底 */
.book {
  position: relative;
  display: flex;
  width: min(840px, 100%);
  height: 490px;
  transform-style: preserve-3d;
  border-radius: 20px;
  background: linear-gradient(115deg, #1a1e4e, #12153d 60%, #0d1030);
  border: 1px solid rgba(167, 139, 250, 0.25);
  padding: 10px 12px; /* 封皮包边 */
  box-shadow:
    0 34px 70px -26px rgba(0, 0, 16, 0.85),
    inset 0 1px 0 rgba(238, 240, 255, 0.22);
  z-index: 1;
}

/* 封皮烫金线（内框） */
.book::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 15px;
  pointer-events: none;
  z-index: 41;
}

/* 书的纸张厚度（右侧多条纸边） */
.book::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 4px;
  width: 10px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(238, 240, 255, 0.47) 0 1.5px,
    rgba(16, 20, 58, 0.9) 1.5px 3.5px
  );
  box-shadow: 0 0 8px rgba(3, 5, 22, 0.6);
  z-index: 0;
  transform: none;
}

/* ===== 内页区（纸面在封皮内） ===== */
.book-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  transform-style: preserve-3d;
  border-radius: 14px;
  overflow: hidden;
}

/* ===== 左页：目录（初始态；翻过去的页会盖在其上——真实书的层级） ===== */
.book-left {
  position: relative;
  min-width: 0;
  border-right: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(129, 136, 255, 0.07), transparent 60%),
    linear-gradient(170deg, #191d4a, #10143a);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.9rem 1.7rem 2.3rem;
}

/* 中缝暗影 */
.book-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 16, 0.5), transparent 22%);
  pointer-events: none;
}

.bl-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(238, 240, 255, 0.54);
  margin-bottom: 1.5rem;
}

.bl-title {
  font-size: 1.3rem;
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.4rem;
}

/* 目录列表 */
.bl-toc {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.bl-toc .toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
  border: 1px solid transparent;
}

.bl-toc .toc-item .t-no {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  transition: color 0.3s;
}

/* 引导虚线 */
.bl-toc .toc-item .t-fill {
  flex: 1;
  border-bottom: 1px dashed rgba(238, 240, 255, 0.26);
  transform: translateY(-3px);
}

.bl-toc .toc-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
}

/* 当前章：高亮 + 左标 */
.bl-toc .toc-item.on {
  color: var(--ink);
  background: linear-gradient(90deg, rgba(129, 136, 255, 0.12), transparent 75%);
  border-color: rgba(129, 136, 255, 0.22);
}

.bl-toc .toc-item.on .t-no {
  color: var(--accent);
}

.bl-foot {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  color: rgba(238, 240, 255, 0.47);
  letter-spacing: 0.12em;
  display: flex;
  justify-content: space-between;
}

/* ===== 右页（翻页区） ===== */
.book-pages {
  position: relative;
  min-width: 0;
  transform-style: preserve-3d;
}

/* 中缝谷底阴影 */
.book-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  bottom: 2%;
  width: 42px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 16, 0.68), transparent 74%);
  z-index: 40;
  pointer-events: none;
  filter: blur(2.5px);
}

/* 一页纸 */
.bpage {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.4,.75,.3,1);
  z-index: 1;
}

.bpage.flipped {
  /* 翻过去的页比封皮小一圈（scale），左封皮露出边缘；
     translateZ 逐页抬升（--tz 由 JS 注入）→ 纸页堆叠的凸起层次 */
  transform: rotateY(-179deg) scale(0.982) translateZ(var(--tz, 1px));
}

/* 快速回翻 */
.book.riffle .bpage {
  transition: transform 0.28s ease-in;
}

/* 正反两面：暖白纸面（像真的纸） */
.bpage .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0 14px 14px 0;
  padding: 2.1rem 2.3rem 1.9rem 2.7rem;
  overflow: hidden;
  /* 纸色：暖白偏灰，微噪点质感由暗色站整体压住亮度 */
  background:
    radial-gradient(130% 90% at 82% 0%, rgba(200, 208, 255, 0.10), transparent 52%),
    linear-gradient(76deg, #262a52 32%, #20244a);
  color: #e8eaf8;
  border: 1px solid rgba(16, 20, 58, 0.55);
  border-left: none;
  /* 凸起质感：顶部受光高光 + 中缝内暗 + 底部内暗角 */
  box-shadow:
    inset 14px 0 22px -14px rgba(6, 8, 26, 0.7),
    inset 0 1px 0 rgba(238, 240, 255, 0.14),
    inset 0 -10px 18px -12px rgba(6, 8, 26, 0.55);
}

/* 纸面横线（笔记本暗纹） */
.bpage .face.front::before {
  content: "";
  position: absolute;
  inset: 4.6rem 2.3rem 4.9rem 2.7rem;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 27px,
    rgba(238, 240, 255, 0.16) 27px 28px
  );
  pointer-events: none;
}

/* 正面受光：中缝侧暗 */
.bpage .face.front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(16, 20, 58, 0.22), transparent 20%);
  pointer-events: none;
}

.bpage .face.back {
  transform: rotateY(180deg);
  border-radius: 14px 0 0 14px;
  border: 1px solid rgba(16, 20, 58, 0.55);
  border-right: none;
  /* 背面（翻过去朝上的面）：外投影让逐页抬升可感知 + 高光/内暗角 */
  box-shadow:
    inset -14px 0 22px -14px rgba(6, 8, 26, 0.7),
    inset 0 1px 0 rgba(238, 240, 255, 0.14),
    inset 0 -10px 18px -12px rgba(6, 8, 26, 0.55),
    0 14px 30px -16px rgba(3, 5, 22, 0.85);
  background:
    radial-gradient(130% 90% at 18% 0%, rgba(200, 208, 255, 0.10), transparent 52%),
    linear-gradient(104deg, #20244a 68%, #262a52);
  /* 章节扉页：垂直水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2.1rem 2.7rem 1.9rem 2.3rem;
}

.bpage .face.back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(270deg, rgba(16, 20, 58, 0.22), transparent 20%);
  pointer-events: none;
}

/* ----- 正面：服务内容（纸面深字） ----- */
.face.front .bf-no {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: #ff9d78;
}

.face.front h3 {
  margin-top: 0.8rem;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  color: #f2f3fc;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.face.front h3 .en {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(238, 240, 255, 0.57);
}

.face.front .bf-line {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c6cbf0;
}

.face.front .bf-desc {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.9;
  color: rgba(238, 240, 255, 0.80);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.face.front .bf-tags {
  position: absolute;
  left: 2.7rem;
  right: 2.3rem;
  bottom: 4.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.face.front .bf-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #c6cbf0;
  border: 1px solid rgba(238, 240, 255, 0.40);
  border-radius: 999px;
  padding: 0.2rem 0.68rem;
  background: rgba(238, 240, 255, 0.18);
}

.face.front .bf-go {
  position: absolute;
  left: 2.7rem;
  bottom: 1.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.84rem;
  font-weight: 800;
  color: #ff9d78;
}

.face.front .bf-go svg {
  transition: transform 0.3s var(--ease-out);
}

.face.front:hover .bf-go svg {
  transform: translateX(4px);
}

/* ----- 封皮背面 = 目录页（翻开后左侧第一眼） ----- */
.bpage-cover .face.back {
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.1rem;
  padding: 2rem 2.3rem 1.7rem;
}

.bpage-cover .face.back .cb-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(238, 240, 255, 0.5);
}

.bpage-cover .face.back .bl-toc {
  flex: 1;
}

/* ----- 封底正面 = 品牌尾页（翻完第六页右侧露出） ----- */
.bpage-back .face.front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.bpage-back .face.front::before {
  content: none; /* 去笔记本横线，品牌页干净 */
}

.bpage-back .face.front .bc-line {
  margin-top: 1rem;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  color: rgba(238, 240, 255, 0.55);
}

/* ----- 章节大字（正反两面通用：内容页背面 + 封底正面） ----- */
.face .bb-no {
  font-size: clamp(4.6rem, 9vw, 6.8rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(167, 139, 250, 0.62);
  text-shadow: 0 0 34px rgba(124, 101, 242, 0.35);
}

.face .bb-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(238, 240, 255, 0.85);
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* 平衡字距造成的偏移 */
}

/* 章名下短渐变分隔线 */
.face .bb-name::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin: 1.1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 92, 0.75), transparent);
}

/* 底部章节装饰小字（CSS 生成，不占 DOM） */
.face.back::before {
  content: "CHAPTER";
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.42em;
  color: rgba(238, 240, 255, 0.4);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bpage { transition: none; }
}

/* ================= 控制条 ================= */
.book-ctrl {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.bc-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  transition: all 0.3s;
  background: var(--surface);
}

.bc-btn:hover {
  border-color: var(--primary);
  color: #fff;
  background: rgba(129, 136, 255, 0.15);
}

.bc-dots {
  display: flex;
  gap: 0.5rem;
}

.bc-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(238, 240, 255, 0.34);
  transition: all 0.35s var(--ease-out);
  cursor: pointer;
}

.bc-dots i.on {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 138, 92, 0.6);
}

/* 自动翻页提示（悬停暂停） */
.book-stage:hover .bpage {
  /* 悬停时进行中的动画照常，仅暂停计时器（JS 控制） */
}

@media (prefers-reduced-motion: reduce) {
  .bpage { transition: none; }
  .book { animation: none; transform: none; }
}

/* ===== 响应式 ===== */
/* 整书摆正后此断点不再需要特殊处理 */
@media (max-width: 760px) {
  .doors-component { padding: 24px 20px 56px; }
  /* 移动端无 3D 翻转：开场直接全宽淡入，不做裁切开书 */
  .book.is-opening { clip-path: none; animation: bookEnter 0.7s ease both; }
  .book.is-opening .bpage-cover { animation: none; }
  .book {
    height: 600px;
    padding: 8px;
  }
  .book-inner { grid-template-columns: 1fr; }
  .book-left { padding: 1.4rem 1.4rem 1.1rem; }
  .bl-title { font-size: 1.1rem; margin-bottom: 0.9rem; }
  .bl-toc { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
  .bl-toc .toc-item { padding: 0.3rem 0.6rem; font-size: 0.76rem; }
  .bl-toc .toc-item .t-fill { display: none; }
  .bl-foot { display: none; }
  .book-pages { min-height: 380px; }
  .bpage { transform: none; }
  .bpage.flipped { transform: none; opacity: 0; pointer-events: none; }
  .book::before {
    left: 2%;
    right: 2%;
    top: 50%;
    width: auto;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(129, 136, 255, 0.5), transparent);
  }
  .book-left {
    border-right: 1px solid rgba(238, 240, 255, 0.34);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 1.3rem 1.4rem;
    min-height: 120px;
    box-shadow: inset 0 -10px 22px -14px rgba(0, 0, 16, 0.75);
  }
  .bl-title { font-size: 1.25rem; }
  .book-pages { min-height: 400px; }
  .bpage .face,
  .bpage .face.back { border-radius: 0 0 18px 18px; }
  .face.front .bf-tags { bottom: 4.2rem; }
  .face.front .bf-go { bottom: 1.6rem; }
}