/* ============================================================
 * 东方禅意雅物馆 · 禅意装饰层（zen-decor.css）
 * ------------------------------------------------------------
 * 手法沿用传统装裱与禅画语言：
 *   圆相 / 祥云纹 / 莲花纹 / 回纹 / 四角纹样 / 竖排禅诗 / 印章 / 香雾
 * 全部装饰为 aria-hidden 纯视觉层，不影响内容与 SEO。
 * ============================================================ */

:root {
  --gold-dim:   rgba(200,160,104,.38);
  --gold-faint: rgba(200,160,104,.20);
  --celadon:      #7d9a8c;
  --celadon-dim:  rgba(125,154,140,.32);
  --cell: 300px;   /* 装饰圆形基准尺寸 */
}

/* ---------- 装饰定位容器 ---------- */
.section, .hero, .page-hero { position: relative; }
.zen-decor {
  position: absolute; z-index: 1; pointer-events: none;
  color: var(--gold); opacity: .55;
}
.zen-decor.gold   { color: var(--gold); opacity: .5; }
.zen-decor.celadon{ color: var(--celadon); opacity: .42; }
.zen-decor.dim    { opacity: .28; }
/* 内容层始终在装饰之上 */
.section > .container, .hero-inner, .page-hero > .container { position: relative; z-index: 2; }

/* ---------- 圆相（禅圆）---------- */
.zen-circle {
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5;
}
.zen-circle.large { width: 340px; height: 340px; }
.zen-circle.double::after {
  content: ""; position: absolute; inset: 12px;
  border-radius: 50%; border: 1px dashed currentColor; opacity: .55;
}
.zen-circle.double { position: relative; }
.zen-circle.large.double::after { inset: 22px; }
/* 极缓的呼吸旋转，几不可察，只是让画面"活"着 */
.zen-circle { animation: zenSpin 240s linear infinite; }
@keyframes zenSpin { to { transform: rotate(360deg); } }

/* ---------- 竖排禅诗 ---------- */
.zen-poem-vertical {
  writing-mode: vertical-rl; font-family: var(--serif);
  font-size: 21px; letter-spacing: .62em; line-height: 1;
  color: currentColor; opacity: .62; white-space: nowrap;
}
.zen-poem-vertical.small { font-size: 13.5px; letter-spacing: .52em; opacity: .5; }

/* ---------- 印章 ---------- */
.zen-seal {
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .18em;
  color: var(--seal); border: 1.5px solid rgba(190,86,64,.62);
  writing-mode: vertical-rl; text-align: center; line-height: 1.25;
  transform: rotate(-3.5deg); opacity: .62;
}

/* ---------- 四角纹样（装裱角线）---------- */
.corner-ornament { position: absolute; width: 60px; height: 60px; color: var(--gold); opacity: .42; z-index: 1; pointer-events: none; }
.corner-ornament svg { width: 100%; height: 100%; }
.corner-ornament.tr { transform: rotate(90deg); }
.corner-ornament.br { transform: rotate(180deg); }
.corner-ornament.bl { transform: rotate(270deg); }

/* ---------- 祥云纹 ---------- */
.cloud-pattern { width: 240px; height: 120px; color: currentColor; opacity: .5; }
.cloud-pattern.large { width: 380px; height: 190px; }

/* ---------- 回纹 + 莲花页脚饰带 ---------- */
.footer-ornament { width: 100%; height: 48px; color: var(--gold-l); opacity: .62; }
.footer-ornament svg { width: 100%; height: 100%; }

/* ============================================================
 * 两侧飘逸祥云层（全站氛围底衬）
 * 固定视口，随页面滚动始终在两侧留白处缓缓流动
 * ============================================================ */
.zen-side-clouds {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
.zen-side-clouds .sc {
  position: absolute;
  color: #d9b681;
  will-change: transform, opacity;
}
.zen-side-clouds .sc svg { width: 100%; height: auto; display: block; }
/* 云头统一朝内卷，云身向边缘延展 —— 两侧对称、向中心聚拢的流动感 */
.zen-side-clouds .sc svg { transform: scaleX(-1); }

/* 雾气：让云有"气"在走，而非静止贴片 */
.zen-side-clouds .sc-mist {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,178,124,.50), rgba(214,178,124,0) 72%);
  filter: blur(24px);
}

/* ---- 流动动画：位移 + 微旋 + 缩放 + 浓淡呼吸 ---- */
@keyframes cloudFloatA {
  0%   { transform: translate3d(0,0,0)           rotate(0deg)     scale(1);    opacity: .52; }
  30%  { transform: translate3d(26px,-34px,0)    rotate(2.4deg)   scale(1.06); opacity: .95; }
  58%  { transform: translate3d(8px,-12px,0)     rotate(-1.4deg)  scale(1.01); opacity: .70; }
  80%  { transform: translate3d(-16px,-26px,0)   rotate(1.2deg)   scale(1.04); opacity: .82; }
  100% { transform: translate3d(0,0,0)           rotate(0deg)     scale(1);    opacity: .52; }
}
@keyframes cloudFloatB {
  0%   { transform: translate3d(0,0,0)           rotate(0deg)     scale(1.03); opacity: .80; }
  35%  { transform: translate3d(-22px,26px,0)    rotate(-2.2deg)  scale(.97);  opacity: .42; }
  70%  { transform: translate3d(14px,10px,0)     rotate(1.6deg)   scale(1.05); opacity: .92; }
  100% { transform: translate3d(0,0,0)           rotate(0deg)     scale(1.03); opacity: .80; }
}
@keyframes mistDrift {
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity: .34; }
  40%  { transform: translate3d(34px,-40px,0) scale(1.18); opacity: .62; }
  75%  { transform: translate3d(-18px,-16px,0) scale(.94); opacity: .44; }
  100% { transform: translate3d(0,0,0)      scale(1);    opacity: .34; }
}

/* 两侧留白不足时整体降淡，避免压住正文 */
@media (max-width: 1360px) {
  .zen-side-clouds { opacity: .55; }
}
@media (max-width: 1180px) {
  .zen-side-clouds { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zen-side-clouds .sc, .zen-side-clouds .sc-mist { animation: none !important; opacity: .6; }
}

/* ---------- 山形剪影（章节过渡，营造"远山"层次）---------- */
.zen-mountain {
  width: 100%; height: 130px; display: block; color: var(--gold);
  opacity: .16; margin: -1px 0;
}

/* ---------- 飘浮香雾（微粒）---------- */
.incense-wisp {
  position: absolute; z-index: 1; pointer-events: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214,178,124,.55) 0%, rgba(214,178,124,0) 70%);
  filter: blur(6px); opacity: 0;
  animation: wispFloat 22s var(--ease) infinite;
}
@keyframes wispFloat {
  0%   { opacity: 0;   transform: translateY(0) scale(.8); }
  18%  { opacity: .55; }
  55%  { opacity: .3;  transform: translateY(-70px) scale(1.15) translateX(10px); }
  100% { opacity: 0;   transform: translateY(-150px) scale(1.4) translateX(-12px); }
}

/* ---------- 首屏香云（三缕青烟）---------- */
.hero-incense {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  transform: translateX(-50%); width: 220px; height: 320px;
  pointer-events: none; opacity: .5;
}
.incense-smoke {
  position: absolute; bottom: 0; width: 14px; height: 100%;
  background: linear-gradient(180deg, rgba(214,178,124,0), rgba(214,178,124,.40), rgba(214,178,124,0));
  filter: blur(9px); border-radius: 50%;
  animation: smokeRise 17s var(--ease) infinite;
}
.incense-smoke:nth-child(1) { left: 22%; animation-delay: 0s;   }
.incense-smoke:nth-child(2) { left: 50%; animation-delay: 5.5s; height: 88%; }
.incense-smoke:nth-child(3) { left: 76%; animation-delay: 10s;  height: 76%; }
@keyframes smokeRise {
  0%   { opacity: 0;   transform: translateY(30px) scaleX(.7); }
  25%  { opacity: .7; }
  70%  { opacity: .35; transform: translateY(-40px) scaleX(1.25) skewX(6deg); }
  100% { opacity: 0;   transform: translateY(-120px) scaleX(1.5) skewX(-8deg); }
}

/* ---------- 内页页首装饰 ---------- */
.page-hero { overflow: hidden; }
.page-hero .zen-poem-vertical { position: absolute; top: 42%; right: 6%; }
.page-hero .zen-circle { position: absolute; left: -90px; top: -40px; width: 260px; height: 260px; opacity: .3; }

/* ---------- 装饰在窄屏收起，保证阅读舒适 ---------- */
@media (max-width: 1100px) {
  .zen-decor.optional, .hero-incense { display: none; }
  .cloud-pattern.large { width: 260px; height: 130px; }
}
@media (max-width: 900px) {
  .zen-decor, .corner-ornament, .incense-wisp, .hero-incense { display: none; }
  .page-hero .zen-poem-vertical { display: none; }
  .zen-mountain { height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .zen-circle, .incense-wisp, .incense-smoke { animation: none; }
  .incense-wisp { opacity: .3; }
}

/* ---------- 列表页分页 ---------- */
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink-2, #d4c6ab);
  font-size: 15px;
}
ul.pagination li { display: inline-block; line-height: 1; }
ul.pagination li a,
ul.pagination li span {
  display: inline-block;
  min-width: 40px;
  padding: 9px 14px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: var(--ink-2, #d4c6ab);
  background: var(--paper-2, #2f2318);
  border: 1px solid rgba(200, 160, 104, .35);
  border-radius: 3px;
  transition: all .25s ease;
}
ul.pagination li a:hover {
  color: var(--gold-l, #ddb987);
  border-color: var(--gold, #c8a068);
  background: var(--paper-3, #372a1d);
}
ul.pagination li.active a,
ul.pagination li.active span {
  color: #1b1409;
  background: var(--gold, #c8a068);
  border-color: var(--gold, #c8a068);
  font-weight: 600;
  cursor: default;
}