/* ==========================================================================
   术数研习 · 共用墨金宣纸视觉层（premium-base.css）
   八字页与奇门页共用：字体、色票、纸面、墨色题头、动效关键帧。
   只负责外观与动效，不改任何排盘/分析逻辑。
   ========================================================================== */
@font-face{
  font-family:"Premium Serif";
  src:url("fonts/premium-serif-600.woff2") format("woff2");
  font-weight:500 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --pm-paper:#f4eee3;
  --pm-card:#fffdf8;
  --pm-card-2:#fbf6ec;
  --pm-ink:#1b1814;
  --pm-ink-2:#2a241d;
  --pm-text:#2b261f;
  --pm-muted:#7a6f62;
  --pm-faint:#a2978a;
  --pm-line:rgba(110,84,44,.15);
  --pm-line-strong:rgba(110,84,44,.26);
  --pm-gold:#b08a46;
  --pm-gold-deep:#8a6a2f;
  --pm-gold-light:#dcc08a;
  --pm-gold-wash:rgba(176,138,70,.08);
  --pm-cinnabar:#a8352a;
  --pm-on-ink:#f2e8d4;
  --pm-on-ink-muted:rgba(242,232,212,.6);
  --pm-serif:"Premium Serif","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Source Han Serif CN","Songti SC","STSong",serif;
  --pm-sans:"PingFang SC","Noto Sans SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  --pm-ease:cubic-bezier(.22,1,.36,1);
  --pm-ease-soft:cubic-bezier(.4,0,.2,1);
  --pm-radius:16px;
  --pm-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 22px 48px -34px rgba(64,44,14,.38),0 2px 6px -3px rgba(64,44,14,.08);
}

/* ---------- 纸面与字体 ---------- */
html{
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(201,163,95,.16),transparent 62%),
    radial-gradient(900px 520px at -12% 38%,rgba(168,53,42,.05),transparent 60%),
    linear-gradient(180deg,#f6f1e7,#f1eadd 70%,#efe7d8);
  background-color:var(--pm-paper);
  min-height:100%;
}
body{
  position:relative;
  background:transparent;
  font-family:var(--pm-sans);
  color:var(--pm-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:rgba(176,138,70,.26);color:var(--pm-ink)}
:focus-visible{outline:2px solid var(--pm-gold);outline-offset:3px}
input,textarea{caret-color:var(--pm-cinnabar)}

/* ---------- 顶部：墨色题头 ---------- */
.top{
  position:relative;
  isolation:isolate;
  padding-bottom:46px;
  margin-bottom:30px;
  color:var(--pm-on-ink);
}
/* 通栏墨底：border-image 外扩只绘制、不产生横向滚动 */
.top::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  border-image:linear-gradient(180deg,#14110d 0%,#1c1813 62%,#221c15 100%) fill 0 / 0 / 0 100vmax;
}
.top::after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,192,138,.5) 25%,rgba(220,192,138,.5) 75%,transparent);
}
.appbar{border-bottom:1px solid rgba(220,192,138,.14)}
.app-brand{color:var(--pm-on-ink);font-family:var(--pm-serif);letter-spacing:.18em;font-weight:600}
.app-brand svg{color:var(--pm-gold-light)}
.back{color:var(--pm-on-ink-muted);border:1px solid transparent;border-radius:999px;letter-spacing:.08em}
.back:hover{background:rgba(242,232,212,.07);color:var(--pm-on-ink)}
.back[aria-current="page"]{
  background:linear-gradient(180deg,rgba(220,192,138,.16),rgba(220,192,138,.06));
  color:#f1dcab;
  border-color:rgba(220,192,138,.45);
}
.page-intro{position:relative;z-index:1}
.pm-eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
  color:var(--pm-gold-light);
  font-size:12px;letter-spacing:.32em;
}
.pm-seal{
  display:inline-grid;place-items:center;
  width:26px;height:26px;
  border-radius:4px;
  background:linear-gradient(145deg,#b6402f,#8f2a20);
  color:#fbe9dc;
  font-family:var(--pm-serif);
  font-size:15px;letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,220,200,.25),0 6px 14px -8px rgba(168,53,42,.8);
  transform:rotate(-4deg);
}
h1{
  font-family:var(--pm-serif);
  font-weight:600;
  font-size:52px;
  letter-spacing:.14em;
  line-height:1.2;
  color:transparent;
  background:linear-gradient(180deg,#fbf3e2 0%,#ecd9b0 70%,#cfae6e 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.sub{color:var(--pm-on-ink-muted);letter-spacing:.06em;margin-top:12px}
.life-note{
  position:relative;
  color:rgba(220,192,138,.85);
  font-family:var(--pm-serif);
  font-size:13px;
  letter-spacing:.06em;
  padding-left:16px;
  border-left:1px solid rgba(220,192,138,.4);
}
.pm-hero-ring{
  position:absolute;
  z-index:-1;
  top:0;bottom:0;left:-36px;right:-36px;
  overflow:hidden;
  pointer-events:none;
  color:var(--pm-gold-light);
  background:
    radial-gradient(closest-side at 80% 34%,rgba(201,163,95,.22),transparent),
    radial-gradient(closest-side at 4% 100%,rgba(168,53,42,.12),transparent);
}
.pm-hero-ring svg{position:absolute;top:62px;right:-24px;width:420px;height:420px;display:block;opacity:.34}
.pm-hero-ring text{font-family:var(--pm-serif);fill:currentColor}
.pm-ring-outer,.pm-ring-inner{transform-box:view-box;transform-origin:50% 50%}

/* ---------- 动效 ---------- */
@keyframes pm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pm-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes pm-ink{0%{opacity:0;filter:blur(8px);transform:scale(1.18)}60%{opacity:1}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes pm-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pm-refresh{from{opacity:.35}to{opacity:1}}
@keyframes pm-pop{0%{transform:scale(.94)}60%{transform:scale(1.02)}100%{transform:none}}
@keyframes pm-pulse{0%{box-shadow:0 0 0 0 rgba(176,138,70,.5)}100%{box-shadow:0 0 0 10px rgba(176,138,70,0)}}
@keyframes pm-spin{to{transform:rotate(360deg)}}
@keyframes pm-spin-rev{to{transform:rotate(-360deg)}}
@keyframes pm-glow{from{opacity:0;transform:scale(.92) rotate(-8deg)}}

@media (prefers-reduced-motion:no-preference){
  /* 页面初次进入 */
  .pm-hero-ring svg{animation:pm-glow 1.6s var(--pm-ease) both}
  .pm-ring-outer{animation:pm-spin 240s linear infinite}
  .pm-ring-inner{animation:pm-spin-rev 180s linear infinite}
  .appbar{animation:pm-fade .7s var(--pm-ease) both}
  .page-intro>div{animation:pm-rise .9s var(--pm-ease) .08s both}
  /* 结果区（由页面脚本在每次排盘后挂上） */
  .pm-motion .pm-enter{animation:pm-rise .75s var(--pm-ease) both;animation-delay:calc(var(--pm-i,0) * 70ms)}
  .pm-motion .pm-ink{animation:pm-ink 1s var(--pm-ease) both;animation-delay:calc(var(--pm-d,0) * 1ms)}
  .pm-motion .pm-reveal{opacity:0;transform:translateY(14px)}
  .pm-motion .pm-reveal.pm-in{opacity:1;transform:none;transition:opacity .7s var(--pm-ease),transform .7s var(--pm-ease);transition-delay:calc(var(--pm-i,0) * 60ms)}
  .pm-motion .pm-refresh{animation:pm-refresh .32s var(--pm-ease-soft) both}
  .pm-motion .pm-pop{animation:pm-pop .45s var(--pm-ease) both}
}

/* ---------- 题头响应式 ---------- */
@media (max-width:800px){
  h1{font-size:40px}
  .top{padding-bottom:36px;margin-bottom:24px}
  .pm-hero-ring{left:-20px;right:-20px}
  .pm-hero-ring svg{width:320px;height:320px;top:56px;right:-90px;opacity:.26}
}
@media (max-width:520px){
  h1{font-size:34px;letter-spacing:.1em}
  .pm-eyebrow{font-size:11px;letter-spacing:.24em;margin-bottom:10px}
  .pm-hero-ring{left:-16px;right:-16px}
  .pm-hero-ring svg{width:250px;height:250px;top:72px;right:-96px;opacity:.2}
  .back{border-radius:10px;letter-spacing:.02em}
  .life-note{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .pm-reveal{opacity:1!important;transform:none!important}
}