/* V4 — Result · 初阅命盘 · 古籍展开 */

#result {
  display: none;
}

.result {
  overflow: hidden;
  padding-inline: 20px;
  padding-block: calc(44px + env(safe-area-inset-top, 0px))
    calc(36px + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  background-image: url("../assets/backgrounds/scene-study-mystic-v2.png");
  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
}

/* 摄影背景下隐藏 framework 八卦叠层 */
.result::before {
  display: none;
}

/* 左侧文字区压暗，保证可读 */
.result__inner::before {
  content: "";
  position: absolute;
  inset: -32px -20px -32px -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(16, 14, 12, 0.9) 0%,
    rgba(16, 14, 12, 0.68) 48%,
    rgba(16, 14, 12, 0.28) 72%,
    transparent 100%
  );
}

/* 古籍线稿（右侧弱装饰） */
.result::after {
  content: "";
  position: absolute;
  top: 18%;
  right: -8%;
  z-index: 1;
  width: 160px;
  height: 220px;
  pointer-events: none;
  background: url("../assets/svg/paper.svg") center / cover no-repeat;
  opacity: var(--opacity-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.result__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-fade) var(--ease-out), transform var(--duration-fade) var(--ease-out);
}

.result--visible .result__inner {
  opacity: 1;
  transform: translateY(0);
}

.result__anim {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
  transition-delay: calc(var(--anim-order, 0) * 80ms + 140ms);
}

.result--visible .result__anim {
  opacity: 1;
  transform: translateY(0);
}

.result__motto {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
}

/* ── 朱砂印状态 ── */

.result__status {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.result__status-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 0;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--color-vermilion);
}

.result__status-mark::before {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: url("../assets/svg/seal.svg") center / contain no-repeat;
}

.result__status-mark::after {
  content: "命盘初阅";
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-vermilion);
}

.result__status-desc {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

/* ── 标题区 ── */

.result__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 7.6vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.result__subtitle {
  margin-top: -16px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ── 宣纸卡片 ── */

.result__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: var(--space-card) 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-paper);
}

.result__card-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.result__card-title::before {
  content: "【";
  color: var(--color-text-muted);
}

.result__card-title::after {
  content: "】";
  color: var(--color-text-muted);
}

.result__card-rule {
  width: 100%;
  height: 0;
  margin-top: -6px;
  border-top: 1px solid var(--color-border);
}

/* ── 命盘字段 · 铜色记录 ── */

.result__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result__field + .result__field {
  padding-top: 4px;
}

.result__field-label {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.result__field-value,
.result__wuxing-line {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--color-bronze);
}

.result__wuxing-line {
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ── 初步分析 ── */

.result__overview-text {
  width: 100%;
}

.result__overview-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result__overview-line {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

/* ── 重点方向 ── */

.result__insights {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result__insight {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result__insight + .result__insight {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.result__insight-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.result__insight-text {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

/* ── CTA ── */

.result__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  padding: 14px 20px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.result__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── 页脚 ── */

.result__footer {
  width: 100%;
  padding-top: 4px;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

@media (min-width: 768px) {
  .result {
    padding-inline: var(--space-page-x);
  }

  .result__inner {
    max-width: var(--content-max);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result__inner,
  .result__anim {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* Conversion hierarchy: explain the value before the next action. */
.result__next-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 18px;
  border-left: 3px solid var(--color-bronze);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bronze) 12%, var(--color-surface-paper));
}

.result__next-step h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.result__next-step p {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.result__cta {
  color: #17120a;
  background: linear-gradient(135deg, #b49056, var(--color-bronze));
  border-color: var(--color-bronze);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Result profile card export */
.result__save-card { margin: 16px 0 22px; padding: 16px; border: 1px solid rgba(201,157,71,.42); border-radius: 14px; background: rgba(255,248,232,.045); text-align: center; }
.result__save-card-btn { width: 100%; min-height: 48px; border: 1px solid #c99d47; border-radius: 9px; background: linear-gradient(135deg,#5d3713,#9e6a22); color:#fff3d9; font:600 16px "Noto Serif SC",serif; cursor:pointer; }
.result__save-card p { margin:10px 0 0; color:#bca77d; font-size:13px; line-height:1.6; }
#result-save-card-tip { color:#e6cf9e; }

/* V32 · 结果页统一版心与可见的小卡片保存反馈 */
.result__inner > .result__save-card,
.result__inner > .result__hook,
.result__inner > .result__chain,
.result__inner > .result__preview,
.result__inner > .result__cta { width:100%; box-sizing:border-box; }
.result__save-card { margin:0; }
.result__cta { position:relative; min-height:58px; }
.result__cta::before { content:"下一步 · 免费领取"; position:absolute; top:-17px; left:0; font-family:var(--font-serif); font-size:11px; letter-spacing:.1em; color:var(--color-bronze); }
.result__card-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.7); }
.result__card-preview { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; width:min(100%,390px); max-height:calc(100dvh - 36px); padding:20px; overflow:auto; box-sizing:border-box; border:1px solid #c99d47; border-radius:16px; background:#17110b; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.result__card-preview p { margin:0; font-family:var(--font-serif); font-size:16px; color:#f5e8ce; }
.result__card-preview img { display:block; width:100%; border:1px solid rgba(201,157,71,.48); border-radius:8px; }
.result__card-preview small { font:13px/1.65 var(--font-serif); color:#cdb990; text-align:center; }
.result__card-preview-download { display:inline-flex; justify-content:center; align-items:center; min-height:42px; width:100%; border-radius:8px; background:linear-gradient(135deg,#b49056,#8c5b1a); color:#17120a; font:600 14px var(--font-serif); text-decoration:none; }
.result__card-preview-close { position:absolute; top:8px; right:11px; width:32px; height:32px; border:0; background:transparent; color:#f5e8ce; font-size:28px; line-height:1; cursor:pointer; }
@media (max-width:767px) { .result__inner { gap:24px; } .result__cta { margin-top:12px; } }

/* V34 · 移动端背景可见性：降低内容区黑色蒙层，不牺牲核心文字对比度 */
@media (max-width: 767px) {
  .hero__inner::before,
  .consultation__inner::before,
  .loading__inner::before,
  .result__inner::before,
  .unlock__inner::before {
    background: linear-gradient(180deg, rgba(12,10,8,.68) 0%, rgba(12,10,8,.48) 52%, rgba(12,10,8,.30) 100%);
  }
  .hero__scene::before,
  .consultation__scene::before,
  .loading__scene::before { filter: brightness(1.08) saturate(1.06); }
}