@charset "UTF-8";
/*!
 * wuxiameng — 江湖物事层（v1.1.0 新增）
 * 刀 · 剑 · 山水 · 船 · 水墨 · 人物剪影 · 客栈 · 酒招
 * 八种物事全部由纯 CSS 绘制，不请求任何外链资源。
 * 由 <html data-wm-motifs="shan chuan dao mo"> 决定当前显示哪几种。
 * Author: randaxia | https://daimarushi.cn
 */

/* ------------------------------------------------------------------
 * 0. 场景层骨架
 * ------------------------------------------------------------------ */
.wm-hero,
.wm-foot { position: relative; overflow: hidden; }
.wm-hero > .wm-wrap,
.wm-foot > .wm-wrap { position: relative; z-index: 2; }

.wm-scene {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}

.wm-motif {
  position: absolute; display: block;
  color: var(--wm-motif-ink, var(--wm-accent));
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
}

/* 哪几种物事登场，由 data-wm-motifs 说了算 */
html[data-wm-motifs~="shan"]  .wm-motif--shan  { visibility: visible; }
html[data-wm-motifs~="chuan"] .wm-motif--chuan { visibility: visible; }
html[data-wm-motifs~="dao"]   .wm-motif--dao   { visibility: visible; }
html[data-wm-motifs~="jian"]  .wm-motif--jian  { visibility: visible; }
html[data-wm-motifs~="mo"]    .wm-motif--mo    { visibility: visible; }
html[data-wm-motifs~="ying"]  .wm-motif--ying  { visibility: visible; }
html[data-wm-motifs~="zhan"]  .wm-motif--zhan  { visibility: visible; }
html[data-wm-motifs~="jiu"]   .wm-motif--jiu   { visibility: visible; }

/* ------------------------------------------------------------------
 * 1. 山水 —— 远山如黛，横铺首屏下沿
 * ------------------------------------------------------------------ */
.wm-motif--shan {
  left: -2%; right: -2%; bottom: -1px; height: 62%;
  background: currentColor;
  clip-path: polygon(0 100%, 0 68%, 7% 46%, 15% 62%, 24% 30%, 33% 54%, 42% 22%, 51% 48%,
                     60% 34%, 69% 56%, 78% 26%, 87% 50%, 95% 38%, 100% 60%, 100% 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 62%);
  mask-image: linear-gradient(180deg, transparent 0, #000 62%);
}

/* ------------------------------------------------------------------
 * 2. 水墨 —— 晕染的墨点，铺满整屏
 * ------------------------------------------------------------------ */
.wm-motif--mo {
  inset: 0;
  background:
    radial-gradient(40% 52% at 14% 86%, currentColor 0 20%, transparent 72%),
    radial-gradient(28% 40% at 80% 72%, currentColor 0 16%, transparent 74%),
    radial-gradient(16% 24% at 52% 94%, currentColor 0 18%, transparent 76%),
    radial-gradient(22% 30% at 34% 66%, currentColor 0 12%, transparent 78%);
  filter: blur(7px);
}

/* ------------------------------------------------------------------
 * 3. 船 —— 一帆一橹，泊在画面左下
 * ------------------------------------------------------------------ */
.wm-motif--chuan {
  left: 5%; bottom: 9%; width: 4.8rem; height: 3.2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 3% 62%; background-position: 54% 100%; background-repeat: no-repeat;
}
.wm-motif--chuan::before {
  content: ""; position: absolute; inset: 0 0 34% 26%;
  background: currentColor;
  clip-path: polygon(46% 0, 100% 100%, 0 100%);
}
.wm-motif--chuan::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: currentColor;
  clip-path: polygon(0 40%, 96% 0, 88% 100%, 8% 100%);
}

/* ------------------------------------------------------------------
 * 4. 刀 —— 单刀斜挂，刀身带弧
 * ------------------------------------------------------------------ */
.wm-motif--dao { width: 5.6rem; height: 1.9rem; transform: rotate(-16deg); }
.wm-motif--dao::before {
  content: ""; position: absolute; inset: 0 0 0 14%;
  background: currentColor;
  clip-path: polygon(0 40%, 0 60%, 12% 60%, 18% 26%, 74% 0, 100% 46%, 76% 100%, 18% 74%, 12% 40%);
}
.wm-motif--dao::after {
  content: ""; position: absolute; left: 0; top: 34%; width: 17%; height: 32%;
  background: currentColor; border-radius: 1px;
}

/* ------------------------------------------------------------------
 * 5. 剑 —— 长剑直立，剑格剑柄俱全
 * ------------------------------------------------------------------ */
.wm-motif--jian {
  width: 1.5rem; height: 6.6rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 24% 20%; background-position: 50% 100%; background-repeat: no-repeat;
}
.wm-motif--jian::before {
  content: ""; position: absolute; left: 34%; right: 34%; top: 0; bottom: 26%;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 92%, 50% 100%, 0 92%);
}
.wm-motif--jian::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 20%; height: 6%;
  background: currentColor;
}

/* ------------------------------------------------------------------
 * 6. 人物剪影 —— 负手按剑的侠客
 * ------------------------------------------------------------------ */
.wm-motif--ying {
  width: 2.5rem; height: 6rem;
  background: currentColor;
  clip-path: polygon(44% 0, 57% 1%, 60% 8%, 56% 14%, 66% 21%, 74% 100%, 26% 100%,
                     34% 21%, 44% 14%, 40% 8%, 43% 1%);
}
.wm-motif--ying::after {
  content: ""; position: absolute; left: 62%; top: 6%; width: 5%; height: 66%;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 96%, 50% 100%, 0 96%);
  transform: rotate(24deg); transform-origin: 50% 100%;
}

/* ------------------------------------------------------------------
 * 7. 客栈 —— 檐角挑出的酒家
 * ------------------------------------------------------------------ */
.wm-motif--zhan { width: 5.2rem; height: 4.4rem; }
.wm-motif--zhan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: currentColor;
  clip-path: polygon(0 66%, 6% 66%, 50% 0, 94% 66%, 100% 66%, 100% 100%, 0 100%);
}
.wm-motif--zhan::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 40%; bottom: 0;
  background: linear-gradient(180deg, currentColor 0 42%, transparent 42%),
              linear-gradient(90deg, currentColor 0 24%, transparent 24% 34%,
              currentColor 34% 66%, transparent 66% 76%, currentColor 76% 100%);
}

/* ------------------------------------------------------------------
 * 8. 酒招 —— 挑在竿头的「酒」旗
 * ------------------------------------------------------------------ */
.wm-motif--jiu { width: 3.6rem; height: 6.2rem; }
.wm-motif--jiu::before {
  content: ""; position: absolute; left: 6%; top: 0; bottom: 0; width: 5%;
  background: currentColor;
}
.wm-motif--jiu::after {
  content: ""; position: absolute; left: 12%; top: 6%; width: 78%; height: 46%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.wm-motif--jiu > b {
  position: absolute; left: 30%; top: 12%;
  font-family: var(--wm-font-song, serif); font-size: 1.15rem; font-weight: 700;
  color: var(--wm-bg, #fff); line-height: 1;
}

/* ------------------------------------------------------------------
 * 9. 首屏构图：远景压低、近物贴边，文字始终居中可读
 * ------------------------------------------------------------------ */
.wm-scene--hero .wm-motif--shan  { opacity: .20; }
.wm-scene--hero .wm-motif--mo    { opacity: .16; }
.wm-scene--hero .wm-motif--chuan { opacity: .34; }
.wm-scene--hero .wm-motif--dao   { opacity: .30; left: 7%; top: 16%; }
.wm-scene--hero .wm-motif--jian  { opacity: .26; right: 11%; bottom: 12%; }
.wm-scene--hero .wm-motif--ying  { opacity: .30; right: 6%; bottom: 10%; }
.wm-scene--hero .wm-motif--zhan  { opacity: .26; left: 4%; bottom: 8%; }
.wm-scene--hero .wm-motif--jiu   { opacity: .30; right: 8%; top: 10%; }

/* 页脚：只留远景与一叶扁舟，压得更淡，不与题词抢戏 */
.wm-scene--foot .wm-motif--shan  { opacity: .14; height: 100%; }
.wm-scene--foot .wm-motif--mo    { opacity: .10; }
.wm-scene--foot .wm-motif--chuan { opacity: .22; left: auto; right: 6%; bottom: 12%; }
.wm-scene--foot .wm-motif--dao   { opacity: .18; left: 6%; top: 18%; }
.wm-scene--foot .wm-motif--jian  { opacity: .18; right: 5%; bottom: 14%; }
.wm-scene--foot .wm-motif--ying  { opacity: .20; left: 12%; bottom: 8%; }
.wm-scene--foot .wm-motif--zhan  { opacity: .18; right: 10%; bottom: 10%; }
.wm-scene--foot .wm-motif--jiu   { opacity: .20; left: 4%; top: 12%; }

/* ------------------------------------------------------------------
 * 10. 列表容器：每篇卷轴角上一枚兵器小徽记
 * ------------------------------------------------------------------ */
.wm-list > .wm-post::after {
  content: ""; position: absolute; top: .85rem; right: .85rem;
  width: 1rem; height: 1rem;
  background: var(--wm-accent); opacity: 0; visibility: hidden;
  pointer-events: none;
}
html[data-wm-motifs~="dao"] .wm-list > .wm-post::after {
  visibility: visible; opacity: .34;
  clip-path: polygon(0 42%, 14% 42%, 22% 16%, 78% 0, 100% 50%, 80% 100%, 22% 84%, 14% 58%, 0 58%);
}
html[data-wm-motifs~="jian"] .wm-list > .wm-post::after {
  visibility: visible; opacity: .34;
  clip-path: polygon(46% 0, 100% 34%, 58% 40%, 58% 78%, 100% 84%, 100% 100%, 0 100%, 0 84%, 42% 78%, 42% 40%, 0 34%);
}

/* ------------------------------------------------------------------
 * 11. 移动端：物事缩小、贴边，别把小屏塞满
 * ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .wm-scene--hero .wm-motif--shan { height: 48%; }
  .wm-scene--hero .wm-motif--dao  { left: 3%; top: 10%; transform: rotate(-16deg) scale(.78); }
  .wm-scene--hero .wm-motif--jiu  { right: 3%; top: 6%; transform: scale(.78); transform-origin: top right; }
  .wm-scene--hero .wm-motif--chuan { left: 3%; bottom: 5%; transform: scale(.82); transform-origin: bottom left; }
  .wm-scene--hero .wm-motif--ying  { right: 4%; bottom: 6%; transform: scale(.82); transform-origin: bottom right; }
  .wm-scene--hero .wm-motif--jian  { right: 5%; bottom: 6%; transform: scale(.78); transform-origin: bottom right; }
  .wm-scene--hero .wm-motif--zhan  { left: 3%; bottom: 6%; transform: scale(.8); transform-origin: bottom left; }
  .wm-scene--foot .wm-motif--zhan, .wm-scene--foot .wm-motif--jiu { opacity: .12; }
}

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