/* 付费页顶部轮播。全屏与抽屉共用，顺序：开卷 / 流年 / 典籍 / 顾问。 */

#pageMember .pay-hero {
  container-type: inline-size;
}

#pageMember .pay-hero::before,
#pageMember .pay-hero::after {
  content: none;
}

#pageMember .pay-hero-track .pay-hero-slide {
  position: relative;
  display: block;
  height: calc(var(--pay-hero-top-space) + 60cqw);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--color-bg-paper);
}

#pageMember .pay-hero .scene,
#pageMember .pay-hero .book-scene,
#pageMember .pay-hero .chat-shot,
#pageMember .pay-hero .copy {
  position: absolute;
}

#pageMember .pay-hero .scene,
#pageMember .pay-hero .book-scene,
#pageMember .pay-hero .chat-shot {
  inset: 0;
}

#pageMember .pay-hero .scene-cave {
  background: url("assets/pay/hero-cave.jpg") 62% 36% / cover no-repeat;
}

#pageMember .pay-hero .scene-cave::after,
#pageMember .pay-hero .scene-ink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pay-hero-top-space);
  bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 36px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 36px);
  background:
    linear-gradient(180deg, rgba(247, 241, 230, 0) 0%, rgba(247, 241, 230, 0) 70%, rgba(247, 241, 230, 0.92) 100%),
    linear-gradient(90deg, #F7F1E6 0%, #F7F1E6 24%, rgba(247, 241, 230, 0.5) 40%, rgba(247, 241, 230, 0) 56%);
}

#pageMember .pay-hero .scene-ink {
  background: url("assets/pay/hero-ink.jpg") 70% 40% / cover no-repeat;
  mix-blend-mode: multiply;
}

#pageMember .pay-hero .scene-ink::after {
  background:
    linear-gradient(180deg, rgba(247, 241, 230, 0) 0%, rgba(247, 241, 230, 0) 76%, #F7F1E6 100%),
    linear-gradient(90deg, #F7F1E6 0%, #F7F1E6 22%, rgba(247, 241, 230, 0) 44%);
}

#pageMember .pay-hero .copy {
  inset: 0;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--pay-hero-top-space) 46% 40px 24px;
  text-align: left;
}

#pageMember .pay-hero .is-cave .copy { padding-right: 40%; }
#pageMember .pay-hero .is-chat .copy { padding: var(--pay-hero-top-space) 28px 72px 24px; }

#pageMember .pay-hero .pay-hero-copy-full,
#pageMember .pay-hero .pay-hero-copy-sheet {
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

#pageMember .is-pay-sheet .pay-hero .copy,
#pageMember.is-pay-sheet .pay-hero .copy {
  padding-bottom: 40px;
}

#pageMember .pay-hero .title {
  display: block;
  font-family: var(--font-family-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-main);
}

#pageMember .pay-hero .title span { display: block; margin: 0; font-size: 32px; line-height: 1.2; color: inherit; }
#pageMember .pay-hero .title .l2 { color: var(--color-gold-deep); }
#pageMember .pay-hero .track-4 { letter-spacing: 0.12em; }
#pageMember .pay-hero .track-5 { letter-spacing: 0.06em; }
#pageMember .pay-hero .track-0 { letter-spacing: 0; }

#pageMember .pay-hero .sub {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text-sub);
}

#pageMember .pay-hero .note-line {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}

#pageMember .pay-hero .pill {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid rgba(201, 169, 106, 0.45);
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-gold-deep);
}

#pageMember .pay-hero .is-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(247, 241, 230, 0.97) 0%,
    rgba(247, 241, 230, 0.94) 48%,
    rgba(247, 241, 230, 0.62) 72%,
    rgba(247, 241, 230, 0.34) 100%
  );
}

#pageMember .pay-hero .chat-shot {
  z-index: 1;
  padding: 72px 16px 28px 54%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: #F8F3EA;
}

#pageMember .pay-hero .chat-shot .me { align-self: flex-end; max-width: 78%; margin-top: -8px; }
#pageMember .pay-hero .chat-shot .bot { align-self: stretch; }
#pageMember .pay-hero .chat-shot .ask-msg-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
#pageMember .pay-hero .chat-shot .ask-msg-head img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #EDE2CF;
}
#pageMember .pay-hero .chat-shot .ask-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-main);
}
#pageMember .pay-hero .chat-shot .bubble {
  padding: 0 2px;
  font-size: 15px;
  line-height: 1.5;
  color: #8A7355;
}
#pageMember .pay-hero .chat-shot .me .bubble {
  padding: 7px 12px;
  border-radius: 14px;
  background: #8F6B31;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
#pageMember .pay-hero .chat-shot .bot .bubble p { margin: 0; }
#pageMember .pay-hero .chat-shot .bot .bubble p + p { margin-top: 4px; }
#pageMember .pay-hero .chat-shot strong { font-weight: 700; }
#pageMember .pay-hero .chat-shot .think {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(247, 241, 230, 0.9);
  color: #A89880;
  font-size: 11px;
  line-height: 1.4;
}

#pageMember .pay-hero .book-scene {
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(255, 250, 242, 0.35), rgba(243, 231, 212, 0) 46%),
    #f3e6d2;
}
#pageMember .pay-hero .book-ring {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 250px;
  height: 148px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(122, 93, 43, 0.16);
  box-shadow: 0 0 0 16px rgba(196, 163, 106, 0.09), 0 0 0 34px rgba(122, 93, 43, 0.05);
}
#pageMember .pay-hero .folio {
  position: absolute;
  width: 102px;
  height: 148px;
  border-radius: 2px 7px 6px 2px;
  background: linear-gradient(90deg, #d9c4a4 0 7px, #fbf6ec 7px 12px, #f4ead8 12px);
  box-shadow: 0 12px 22px rgba(72, 52, 28, 0.16);
}
#pageMember .pay-hero .folio::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(90, 64, 36, 0.45) 0 2px, transparent 2px 11px);
}
#pageMember .pay-hero .folio em {
  position: absolute;
  top: 18px;
  left: 28px;
  padding: 6px 3px;
  border: 1px solid rgba(90, 64, 36, 0.28);
  background: rgba(255, 252, 246, 0.78);
  color: #3a2e22;
  font-family: var(--font-family-serif);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
#pageMember .pay-hero .folio-a { left: -16px; top: 28px; transform: rotate(-12deg); }
#pageMember .pay-hero .folio-b { left: 108px; top: -22px; width: 96px; height: 132px; transform: rotate(7deg); background: linear-gradient(90deg, #cbb892 0 7px, #f7efe2 7px 12px, #efe2cc 12px); }
#pageMember .pay-hero .folio-c { right: -12px; top: 10px; height: 156px; transform: rotate(10deg); }
#pageMember .pay-hero .folio-d { left: 2px; bottom: -18px; width: 108px; height: 150px; transform: rotate(7deg); background: linear-gradient(90deg, #c9b48c 0 7px, #f8f1e4 7px 12px, #ead9c0 12px); }
#pageMember .pay-hero .folio-e { left: 132px; bottom: 18px; width: 124px; height: 108px; transform: rotate(-3deg); }
#pageMember .pay-hero .folio-f { right: -8px; bottom: -8px; width: 104px; height: 150px; transform: rotate(-9deg); background: linear-gradient(90deg, #c4ae86 0 7px, #f6ecdc 7px 12px, #e7d3b6 12px); }
#pageMember .pay-hero .book-veil {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  width: 250px;
  height: 156px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(247, 241, 230, 0.94) 0%, rgba(247, 241, 230, 0.82) 42%, rgba(247, 241, 230, 0.35) 64%, rgba(247, 241, 230, 0) 76%);
  pointer-events: none;
}
#pageMember .pay-hero .is-books .copy {
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  text-align: center;
}
#pageMember .pay-hero .is-books .title { text-align: center; }
#pageMember.is-pay-sheet .pay-shell {
  overflow: hidden;
}

#pageMember.is-pay-sheet .pay-sheet-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 40;
  margin: 0;
  transform: translateX(-50%);
}

#pageMember.is-pay-sheet .pay-hero {
  margin-top: 0;
}

#pageMember.is-pay-sheet .pay-hero-track .pay-hero-slide {
  height: calc(52px + 60cqw);
}

#pageMember.is-pay-sheet .pay-hero .scene,
#pageMember.is-pay-sheet .pay-hero .book-scene,
#pageMember.is-pay-sheet .pay-hero .chat-shot {
  inset: 0;
}

#pageMember.is-pay-sheet .pay-hero .scene-cave::after,
#pageMember.is-pay-sheet .pay-hero .scene-ink::after {
  top: 0;
}

#pageMember.is-pay-sheet .pay-hero .copy,
#pageMember.is-pay-sheet .pay-hero .is-chat .copy,
#pageMember.is-pay-sheet .pay-hero .is-books .copy {
  padding-top: 52px;
}