/* ============================================================================
   问时 · 视觉特效层（fx.css）
   设计目标：开屏一场大特效、起卦有仪式感、解读逐段浮现；同时不拖累首屏。
   规则：只有 html.lfx-on 存在时才隐藏内容（JS 不执行 = 内容照常可见）。
   ========================================================================== */

/* ---------- 字体：拉丁用自托管展示体，中文走系统宋/黑梯次 ---------- */
@font-face{font-family:"LF Serif";src:url("assets/fonts/cormorant-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"LF Serif";src:url("assets/fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"LF Sans";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LF Sans";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --lf-display:"LF Serif","Cormorant Garamond","Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong","SimSun",serif;
  --lf-text:"LF Sans",Inter,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --lf-gold:#c99a4a;
  --lf-gold-soft:rgba(201,154,74,.55);
  --lf-ink:#1d1d1f;
  --lf-cream:#f7f2e6;
}

/* 只改“展示性”文字，正文保持原样以免影响可读性与既有排版 */
h1,h2,.intro-lead,h1 em,h2 em,.pw-title,.reading-step h3,.pw-eyebrow,#result .result-top b{
  font-family:var(--lf-display);
}
h1,h2{font-weight:600;letter-spacing:.01em}
body,.pw-lead,.pw-fine,.reading-step p{font-family:var(--lf-text)}
h1 em,h2 em{font-style:normal;color:var(--lf-gold);position:relative}
/* 数字统一等宽，日期/金额不抖动 */
.pw-price,.pw-summary span,#result .pill,.reading-step .step-no{font-variant-numeric:tabular-nums}

/* ---------- 开屏大特效 ---------- */
#lfxIntro{
  position:fixed;inset:0;z-index:9998;
  display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 0%,#1b1712 0%,#12100e 55%,#0b0a09 100%);
  overflow:hidden;
  will-change:opacity;
  transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
#lfxIntro.is-out{opacity:0;pointer-events:none}
#lfxIntro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lfx-intro-inner{position:relative;z-index:2;text-align:center;padding:24px}
.lfx-brand{
  font-family:var(--lf-display);font-weight:600;
  font-size:clamp(34px,7vw,64px);line-height:1.15;
  color:#f3e7cf;letter-spacing:.34em;text-indent:.34em;
  opacity:0;transform:translateY(14px);
}
.lfx-sub{
  margin-top:14px;font-family:var(--lf-text);font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.28em;text-indent:.28em;color:rgba(243,231,207,.62);
  opacity:0;transform:translateY(10px);
}
.lfx-intro-inner.is-in .lfx-brand{animation:lfxBrand 1s cubic-bezier(.2,.7,.2,1) .15s forwards}
.lfx-intro-inner.is-in .lfx-sub{animation:lfxSub .9s cubic-bezier(.2,.7,.2,1) .5s forwards}
@keyframes lfxBrand{to{opacity:1;transform:none}}
@keyframes lfxSub{to{opacity:1;transform:none}}
.lfx-skip{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:3;background:none;border:0;cursor:pointer;
  color:rgba(243,231,207,.45);font-family:var(--lf-text);font-size:12px;
  letter-spacing:.22em;padding:10px 16px;
}
.lfx-skip:hover{color:rgba(243,231,207,.8)}

/* ---------- 逐段浮现（起卦结果 / 解卦）---------- */
html.lfx-on .lfx-rev{opacity:0;transform:translateY(20px)}
html.lfx-on .lfx-rev.lfx-in{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1);
}
/* 金色引导线：解读段落左侧生长 */
.pw-detail .reading-step, .pw-detail > section, .pw-detail .pw-block{position:relative}
.pw-detail .reading-step::before{
  content:"";position:absolute;left:-14px;top:.35em;bottom:.35em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--lf-gold) 0%,rgba(201,154,74,0) 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
html.lfx-on .pw-detail .reading-step.lfx-in::before{transform:scaleY(1)}

/* ---------- 起卦中的仪式感 ---------- */
body.lfx-casting #result{filter:blur(3px) saturate(.9);opacity:.55;transition:filter .35s,opacity .35s}
body.lfx-casting .compass,
body.lfx-casting .grand-compass{animation:lfxSpin 1.1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes lfxSpin{to{transform:rotate(360deg)}}
.lfx-cast-veil{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(201,154,74,.10) 48%,transparent 100%);
  transform:translateY(-100%);animation:lfxSweep 1.15s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lfxSweep{to{transform:translateY(100%)}}
body.lfx-casting #questionForm .primary{opacity:.6;cursor:progress}

/* ---------- 减少动效 / 低端设备 ---------- */
@media (prefers-reduced-motion: reduce){
  #lfxIntro{display:none !important}
  html.lfx-on .lfx-rev{opacity:1 !important;transform:none !important}
  body.lfx-casting #result{filter:none;opacity:1}
  .lfx-cast-veil{display:none}
  .pw-detail .reading-step::before{transform:scaleY(1)}
}
html.lfx-off #lfxIntro{display:none}

/* ============================================================================
   2026-10-23 第二版：真正“看得见”的改版（上一版只有细微动效，肉眼几乎无感）
   1) 中文展示字体改成楷/宋衬线梯次，并强制压过 product-ui.css 的 sans 继承
   2) 首屏标题显著放大、金色细线、第二行改朱砂色，正文加深对比
   ========================================================================== */
:root{
  /* 中文：先楷（Mac: Kaiti SC / Win: KaiTi），再宋，最后兜底 */
  --lf-display:"LF Serif","Cormorant Garamond","Kaiti SC","STKaiti","KaiTi","Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
}

/* 强制生效：product-ui.css 里 body 的 sans 栈会继承下来 */
h1,h2{font-family:var(--lf-display)!important;font-weight:600!important;letter-spacing:.015em}
h1 em,h2 em{font-style:normal;color:#a83b2e;font-weight:600!important}

/* 首屏：放大 + 金色细线 + 更实的正文 */
.intro .eyebrow{
  position:relative;padding-left:0;display:inline-block;
  letter-spacing:.34em;font-size:12px;color:#8a7a5f!important;
}
.intro .eyebrow::after{
  content:"";display:block;width:64px;height:2px;margin:14px 0 0;
  background:linear-gradient(90deg,#c99a4a,rgba(201,154,74,0));
}
.intro h1{
  font-size:clamp(46px,7.4vw,104px)!important;
  line-height:1.06!important;
  letter-spacing:.01em!important;
  margin:.18em 0 .22em!important;
  color:#1f1c19!important;
  text-wrap:balance;
}
.intro h1 em{display:inline-block;position:relative}
.intro-lead{
  font-size:clamp(14px,1.15vw,16.5px)!important;
  line-height:1.95!important;
  color:#4b443a!important;
  max-width:34em;
}
/* 首屏标签排成一行细线小字，别用灰到看不见的颜色 */
.hero-pills span{
  color:#6d6353!important;font-size:11.5px!important;letter-spacing:.14em;
  border-color:rgba(180,138,69,.35)!important;
}

/* 手机：标题别顶满，留呼吸 */
@media (max-width:640px){
  .intro h1{font-size:clamp(34px,10.5vw,52px)!important;line-height:1.14!important}
  .intro-lead{font-size:14px!important;line-height:1.85!important}
}


/* ---------- 排版修正：标题不许溢出，手机要收住 ---------- */
.intro h1,.intro h1 em{max-width:100%;white-space:normal!important;word-break:break-word;overflow-wrap:anywhere}
.intro h1{font-size:clamp(40px,5.4vw,86px)!important}
/* 站点原本用渐变裁切做第二行配色，color 改不动；这里换成朱砂实色 */
.intro h1 em{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#a83b2e!important;color:#a83b2e!important}
.hero-pills{flex-wrap:wrap!important}
@media (max-width:900px){ .intro h1{font-size:clamp(34px,7.6vw,56px)!important} }
@media (max-width:640px){
  .intro h1{font-size:clamp(28px,8.4vw,40px)!important;line-height:1.2!important}
  .hero-pills span{font-size:11px!important;padding:5px 10px!important}
}

/* ---------- 起卦全屏仪式 ---------- */
#lfxCast{
  position:fixed;inset:0;z-index:9995;display:grid;place-content:center;justify-items:center;gap:26px;
  background:radial-gradient(120% 100% at 50% 0%,rgba(27,23,18,.96) 0%,rgba(11,10,9,.97) 100%);
  transition:opacity .4s ease;
}
#lfxCast.is-out{opacity:0;pointer-events:none}
.lfx-cast-ring{position:relative;width:136px;height:136px;border-radius:50%;border:1px solid rgba(201,154,74,.32);animation:lfxRingSpin 3.2s linear infinite}
.lfx-cast-ring:after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(201,154,74,.5)}
.lfx-cast-ring i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#c99a4a;box-shadow:0 0 10px rgba(201,154,74,.75);animation:lfxDotPulse 1.5s ease-in-out infinite}
.lfx-cast-ring i:nth-child(1){transform:rotate(0deg) translateY(-66px)}
.lfx-cast-ring i:nth-child(2){transform:rotate(60deg) translateY(-66px);animation-delay:.12s}
.lfx-cast-ring i:nth-child(3){transform:rotate(120deg) translateY(-66px);animation-delay:.24s}
.lfx-cast-ring i:nth-child(4){transform:rotate(180deg) translateY(-66px);animation-delay:.36s}
.lfx-cast-ring i:nth-child(5){transform:rotate(240deg) translateY(-66px);animation-delay:.48s}
.lfx-cast-ring i:nth-child(6){transform:rotate(300deg) translateY(-66px);animation-delay:.6s}
.lfx-cast-label{font-family:var(--lf-display);font-size:14px;letter-spacing:.42em;text-indent:.42em;color:#e8d9ba}
@keyframes lfxRingSpin{to{transform:rotate(360deg)}}
@keyframes lfxDotPulse{0%,100%{opacity:.35;box-shadow:0 0 6px rgba(201,154,74,.4)}50%{opacity:1;box-shadow:0 0 16px rgba(201,154,74,.9)}}
@media (prefers-reduced-motion: reduce){ #lfxCast{display:none!important} }
/* 段落标题也统一到楷/宋：product-ui.css 里 .use-cases h2 这类选择器更具体，必须点名压过它 */
.use-cases h2,.faq-section h2,.result-panel h2,.input-panel h2,.section-title,.uses-heading h2,.faq-head h2{
  font-family:var(--lf-display)!important;
  letter-spacing:.02em!important;
}
.use-cases h2,.faq-head h2{font-weight:600!important}

/* ============================================================================
   2026-10-23 第三版：版式重构 + 内容精简（保留 FAQ）
   ========================================================================== */

/* 段落之间的节奏：统一上下留白，细金线分隔 */
.use-cases,.faq-section{position:relative}
.use-cases{margin-top:clamp(20px,3vw,40px)!important}
.use-cases .uses-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))!important;
  gap:12px!important;
  margin-top:clamp(18px,2.4vw,30px)!important;
}
/* 九类场景：只留「宫位字 + 类别名」，长描述与示例全部收起（内容精简） */
.use-cases article p,.use-cases article small{display:none!important}
.use-cases article{
  display:flex!important;align-items:center;gap:12px;
  min-height:0!important;margin:0!important;
  padding:15px 16px!important;border-radius:15px!important;
  border:1px solid rgba(180,138,69,.22)!important;
  background:#fffdf8!important;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s;
}
.use-cases article:hover{
  transform:translateY(-3px);
  border-color:rgba(180,138,69,.55)!important;
  box-shadow:0 12px 28px rgba(48,44,39,.09);
}
.use-cases article i{
  font-style:normal;flex:0 0 auto;
  font-family:var(--lf-display)!important;font-size:22px;line-height:1;
  color:#a83b2e;
}
.use-cases article h3{
  margin:0!important;font-size:15.5px!important;line-height:1.3!important;
  font-family:var(--lf-display)!important;letter-spacing:.05em;color:#2a2622;
}
/* 段落小标统一：金色短线 + 拉开字距 */
.eyebrow{letter-spacing:.3em!important}
.uses-heading,.faq-head{position:relative;padding-bottom:14px;margin-bottom:6px}
.uses-heading:after,.faq-head:after{
  content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;
  background:linear-gradient(90deg,#c99a4a,rgba(201,154,74,0));
}
.uses-heading h2,.faq-head h2{font-size:clamp(24px,3vw,38px)!important;line-height:1.25!important}
.uses-heading>p{color:#5c5346!important;line-height:1.85!important;max-width:46em}

/* FAQ 保留，但改成卡片式两栏（窄屏一栏） */
.faq-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;gap:12px!important;align-items:start}
.faq-list details{
  margin:0!important;padding:16px 18px!important;border-radius:15px!important;
  border:1px solid rgba(180,138,69,.2)!important;background:#fffdf8!important;
  transition:border-color .25s,box-shadow .25s;
}
.faq-list details[open]{border-color:rgba(180,138,69,.5)!important;box-shadow:0 10px 26px rgba(48,44,39,.07)}
.faq-list summary{font-family:var(--lf-display)!important;font-size:15.5px!important;letter-spacing:.03em;cursor:pointer}
.faq-list details p{margin:10px 0 0!important;color:#564e42!important;line-height:1.9!important;font-size:14px!important}

/* 提问区：输入框更大，聚焦时金色描边 */
.input-panel textarea{min-height:132px!important;font-size:16px!important;line-height:1.8!important}
.input-panel textarea:focus,.input-panel select:focus{outline:2px solid rgba(201,154,74,.55)!important;outline-offset:1px}
.input-panel .section-title span:first-child{letter-spacing:.16em;color:#8a7a5f}

/* 滚动进入：只做位移，不做透明度 —— 即使观察器没触发，内容也一定可见 */
html.lfx-on .lfx-rise{transform:translateY(16px)}
html.lfx-on .lfx-rise.lfx-in{transform:none;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){ html.lfx-on .lfx-rise{transform:none!important} }
@media (max-width:640px){
  .use-cases .uses-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .use-cases article{padding:13px 14px!important}
  .faq-list{grid-template-columns:1fr!important}
}
/* 方法区（先起盘，再解读）也统一到楷/宋，并压一下字号 */
.method-section h2,.method-head h2{
  font-family:var(--lf-display)!important;font-weight:600!important;
  font-size:clamp(24px,3.2vw,44px)!important;line-height:1.24!important;
}
.method-head:after{
  content:"";display:block;width:56px;height:2px;margin-top:14px;
  background:linear-gradient(90deg,#c99a4a,rgba(201,154,74,0));
}
.method-head>p{color:#5c5346!important;line-height:1.9!important}
/* 分类瓦片：宫位字回到左侧 */
.use-cases article{flex-direction:row!important}
.use-cases article i{order:-1}
/* 事实条：数字用展示体，标签淡一点 */
.fact-strip strong{font-family:var(--lf-display)!important;font-size:30px!important;letter-spacing:.02em}
.fact-strip span{color:#7a7266!important;letter-spacing:.08em}
/* ============================================================================
   2026-10-23 第四版：提问区上移后，首屏要能"看见能开始"
   ========================================================================== */
.intro{padding-top:clamp(26px,3.6vw,52px)!important;padding-bottom:clamp(20px,2.8vw,40px)!important}
.intro h1{font-size:clamp(38px,4.5vw,70px)!important;line-height:1.1!important}
.intro-lead{margin-top:.6em!important}
.workspace{margin-top:clamp(10px,1.6vw,20px)!important}
/* 提问区现在是第一块内容，做成"主卡片" */
.input-panel{
  border-color:rgba(180,138,69,.34)!important;
  box-shadow:0 20px 54px rgba(48,44,39,.08)!important;
}
.input-panel .section-title span:first-child{color:#a83b2e!important;font-weight:600}
.input-panel label{color:#3a352d!important}
/* 手机：首屏尽量露出输入框 */
@media (max-width:640px){
  .intro h1{font-size:clamp(28px,8vw,38px)!important}
  .hero-pills{margin-top:10px!important}
  .intro{padding-bottom:12px!important}
}
/* 短屏再压一档，让输入框在首屏就能看见 */
@media (max-height: 940px) and (min-width: 900px){
  .intro h1{font-size:clamp(38px,4.2vw,64px)!important}
  .hero-pills{margin-top:12px!important}
  .intro{padding-top:clamp(22px,3vw,44px)!important;padding-bottom:14px!important}
  .workspace{margin-top:8px!important}
}
/* ============================================================================
   盘面（六宫罗盘）：SVG 仪器版
   · 旧层全部隐藏，只留 fx.js 生成的 svg
   · 干掉前面几个 CSS 文件叠出来的 3D 倾斜与多重阴影
   ========================================================================== */
#result .grand-compass{
  --size:min(90%,372px)!important;
  width:var(--size)!important;height:var(--size)!important;aspect-ratio:1/1;
  transform:none!important;background:none!important;border-radius:0!important;
  filter:drop-shadow(0 26px 46px rgba(20,18,15,.22))!important;
  margin:0 auto 16px!important;
}
#result .grand-compass > *:not(svg){display:none!important}
#result .grand-compass svg.lfx-wheel{width:100%;height:100%;display:block}
/* 盘面下方的分享条别再压住它 */
#result .share-toolbar{position:relative!important;bottom:auto!important;margin:10px 0 4px!important}
@media (max-width:640px){
  #result .grand-compass{--size:min(94%,320px)!important}
}
/* 英文站盘面容器 */
#result .lfx-wheel-en{width:min(88%,344px);aspect-ratio:1/1;margin:4px auto 16px;filter:drop-shadow(0 22px 40px rgba(20,18,15,.18))}
#result .lfx-wheel-en svg{width:100%;height:100%;display:block}
@media(max-width:800px){ #result .lfx-wheel-en{width:min(92%,300px);margin-bottom:12px} }
/* ---------- 点击区放大：折叠标题与页脚链接原来只有 22~23px ---------- */
summary{min-height:38px;padding-top:8px;padding-bottom:8px}
.footer-link{display:inline-block;min-height:38px;padding:9px 8px;line-height:20px}
.lf-share-btn{min-height:34px}
@media (max-width:640px){
  summary{min-height:42px;padding-top:10px;padding-bottom:10px}
  .footer-link{min-height:42px;padding:11px 8px}
}