/* ============================================================
   JUE 珏 — Editorial components & decorations (editorial.css)
   焕发活力：跑马灯 / 玉印 / 手风琴 / 藏家轮播 / 五德 / 五行表 /
   养玉 / 四角金框 / 分隔符 / 云纹边饰 / 电影感媒体帧。
   全部动效：transform/opacity only，无全屏 mix-blend。
   ============================================================ */

/* ============ 七板 tile 五行徽记 ============ */
.board-element-mark { position: absolute; top: 1.4rem; right: 1.6rem; opacity: .75; transition: opacity .6s, transform .8s var(--ease-lux); }
.board-tile:hover .board-element-mark { opacity: 1; transform: rotate(20deg) scale(1.08); }
.board-element-mark .svg-element { width: 3.4rem; height: 3.4rem; }

/* ============ 玉语跑马灯 ============ */
.marquee { padding: 1.25rem 0; }
.marquee-track { gap: 4rem; padding-left: 2rem; }
.marquee-item { gap: 4rem; font-size: 1.2rem; }
.marquee-item .zh { font-family: var(--zh); letter-spacing: .34em; color: var(--gold-soft); font-size: .92em; }
.marquee-item .en { font-style: italic; color: var(--muted-2); font-size: .82em; letter-spacing: .1em; }
.marquee-item::after { content: "◆"; font-size: .55rem; color: var(--gold-dim); }

/* ============ 玉印（印章组件） ============ */
.seal {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .8rem;
  width: 7rem; opacity: 0; transform: scale(1.25) rotate(-4deg);
  transition: opacity 1.1s var(--ease-lux), transform 1.3s var(--ease-slow);
}
.seal.in { opacity: 1; transform: scale(1) rotate(-2deg); }
/* 无 JS 时强制可见（不影响 reduced-motion 与 html.js 门控） */
html:not(.js) .seal { opacity: 1; transform: none; }
.seal-disc {
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201,168,108,.55);
  background:
    radial-gradient(60% 60% at 36% 28%, rgba(232,214,171,.16), rgba(63,92,74,.1) 45%, rgba(12,10,8,0) 75%),
    radial-gradient(70% 70% at 64% 70%, rgba(201,168,108,.1), transparent 60%),
    rgba(19,16,9,.7);
  box-shadow: 0 0 30px rgba(201,168,108,.12), inset 0 0 20px rgba(201,168,108,.06);
  position: relative;
}
.seal-disc::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px dashed rgba(201,168,108,.28);
}
.seal-char {
  font-family: var(--zh); font-size: 2.6rem; color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(232,214,171,.35);
  letter-spacing: .1em; line-height: 1;
}
.seal-caption {
  font-family: var(--zh); font-size: var(--fs-micro); letter-spacing: .4em;
  color: var(--gold-dim); white-space: nowrap;
}
.seal-red .seal-disc { border-color: rgba(200,80,50,.55); background: radial-gradient(60% 60% at 36% 28%, rgba(230,120,90,.18), rgba(90,30,20,.2) 45%, rgba(12,10,8,0) 75%), rgba(24,10,7,.7); box-shadow: 0 0 30px rgba(200,80,50,.12); }
.seal-red .seal-char { color: #d08a6e; text-shadow: 0 0 18px rgba(200,80,50,.3); }

/* ============ 手风琴（词典/养玉/FAQ） ============ */
.acc { border-top: 1px solid var(--line-soft); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.25rem 0; text-align: left; cursor: pointer;
  color: var(--ink-text);
}
.acc-head:hover .acc-zh { color: var(--gold-soft); }
.acc-zh { font-family: var(--zh); font-size: 1.15rem; letter-spacing: .22em; color: var(--gold); transition: color .4s; min-width: 3.2rem; }
.acc-en { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); letter-spacing: .04em; }
.acc-caret { margin-left: auto; color: var(--gold-dim); transition: transform .6s var(--ease-lux); font-size: .8rem; }
.acc-item.open .acc-caret { transform: rotate(90deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-lux); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-body-inner p { padding: 0 0 1.4rem 4.4rem; color: var(--muted); font-size: var(--fs-small); max-width: 40rem; }

/* ============ 藏家寄语轮播 ============ */
.collectors { position: relative; overflow: hidden; }
.collector-slide { display: none; }
.collector-slide.on { display: block; animation: collector-in 1.1s var(--ease-lux) both; }
@keyframes collector-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.collector-card { text-align: center; max-width: 44rem; margin: 0 auto; }
.collector-quote-mark { font-family: var(--serif); font-size: 3.4rem; line-height: .5; color: var(--gold-dim); opacity: .7; margin-bottom: 1.6rem; }
.collector-text { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.8rem); color: var(--gold-soft); line-height: 1.5; }
.collector-zh { margin-top: 1.1rem; font-family: var(--zh); letter-spacing: .24em; color: var(--muted); font-size: var(--fs-small); }
.collector-by { margin-top: 1.3rem; font-size: var(--fs-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--muted-2); }
.collector-dots { display: flex; gap: .6rem; justify-content: center; margin-top: 1.8rem; }
.collector-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all .4s; }
.collector-dots i.on { background: var(--gold); box-shadow: 0 0 10px rgba(201,168,108,.7); }

/* ============ 玉之五德 ============ */
.virtues-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (max-width: 860px) { .virtues-grid { grid-template-columns: repeat(2, 1fr); } .virtues-grid .virtue:last-child { grid-column: span 2; } }
@media (max-width: 560px) { .virtues-grid { grid-template-columns: 1fr; } .virtues-grid .virtue:last-child { grid-column: auto; } }
.virtue { background: var(--bg); padding: clamp(1.6rem, 3vw, 2.6rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .7rem; position: relative; overflow: hidden; transition: background .7s var(--ease-lux); }
.virtue:hover { background: var(--bg-2); }
.virtue-char { font-family: var(--zh); font-size: 2.6rem; color: var(--gold-soft); text-shadow: 0 0 22px rgba(201,168,108,.3); line-height: 1; }
.virtue-en { font-size: var(--fs-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dim); }
.virtue p { color: var(--muted); font-size: var(--fs-small); }
.virtue::before { content: ""; position: absolute; top:0;right:0;bottom:0;left:0; background: radial-gradient(80% 60% at 50% 0%, rgba(201,168,108,.1), transparent 60%); opacity: 0; transition: opacity .7s; }
.virtue:hover::before { opacity: 1; }

/* ============ 五行体系表（board 页） ============ */
.elements-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.elements-table th { text-align: left; font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.elements-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.elements-table td:first-child { font-family: var(--zh); color: var(--gold-soft); font-size: 1.2rem; width: 3.4rem; }
.elements-table tr:hover td { color: var(--ink-text); }

/* ============ 四角金框 ============ */
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after { content: ""; position: absolute; width: 2.2rem; height: 2.2rem; pointer-events: none; opacity: .8; }
.corner-frame::before { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.corner-frame::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* ============ 玉璧分隔符 ============ */
.jade-divider { display: flex; align-items: center; gap: 1.4rem; margin: 0 auto; max-width: 26rem; }
.jade-divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.jade-divider .mark { font-family: var(--zh); color: var(--gold-dim); letter-spacing: .3em; font-size: 1rem; }

/* ============ 云纹 / 回纹边饰 ============ */
.lattice {
  position: relative; overflow: hidden;
}
.lattice::before {
  content: ""; position: absolute; top:0;right:0;bottom:0;left:0; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><path d='M8 8h24v24H8zM64 8h24v24H64zM8 64h24v24H8zM64 64h24v24H64z' fill='none' stroke='%23c9a86c' stroke-width='1'/><path d='M32 8h8v8h-8zM56 8h8v8h-8zM8 32h8v8H8zM80 32h8v8h-8zM32 80h8v8h-8zM56 80h8v8h-8zM8 56h8v8H8zM80 56h8v8h-8z' fill='%23c9a86c' opacity='0.5'/></svg>");
  background-size: 96px 96px;
}

/* ============ 电影感媒体帧 ============ */
.film-frame { position: relative; overflow: hidden; }
.film-frame .ken { animation-duration: 32s; }
.film-bars::before, .film-bars::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  height: clamp(1.5rem, 5vh, 4rem); background: var(--bg);
}
.film-bars::before { top: 0; }
.film-bars::after { bottom: 0; }
.film-caption {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(2rem, 7vh, 5rem);
  text-align: center; pointer-events: none;
}
.film-caption .zh { font-family: var(--zh); letter-spacing: .5em; color: var(--gold-soft); font-size: var(--fs-micro); text-indent: .5em; }
.film-caption .en { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--fs-small); margin-top: .4rem; letter-spacing: .06em; }

/* ============ 观卦玉语（fortune 前置） ============ */
.ff-maxim { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; color: var(--gold-dim); }
.ff-maxim .zh { font-family: var(--zh); letter-spacing: .3em; color: var(--gold-soft); font-size: var(--fs-small); }
.ff-maxim .en { font-style: italic; font-size: var(--fs-micro); letter-spacing: .08em; }
.ff-maxim .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ============ 大师手记（atelier 信件体） ============ */
.master-letter { position: relative; }
.master-letter .letter-copy { max-width: 40rem; }
.master-letter .letter-copy p { color: var(--muted); margin-bottom: 1.2rem; line-height: 1.9; }
.master-letter .letter-copy .dropcap::first-letter { font-family: var(--serif); font-size: 3.4em; float: left; line-height: .8; color: var(--gold); padding-right: .4rem; }
.master-sign { margin-top: 1.8rem; display: flex; align-items: center; gap: 1.4rem; }
.master-sign .name { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-soft); }
.master-sign .role { font-size: var(--fs-micro); letter-spacing: .28em; text-transform: uppercase; color: var(--muted-2); }

/* ============ 卡片玉面 hover 斜光（新增层） ============ */
.editorial-card { position: relative; overflow: hidden; }
.editorial-card::after {
  content: ""; position: absolute; top:-60%;right:0;bottom:-60%;left:0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(232,214,171,.1) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease-slow);
}
.editorial-card:hover::after { transform: translateX(120%); }

/* ============ 空态玉语（业务页） ============ */
.empty-maxim { font-family: var(--zh); letter-spacing: .3em; color: var(--gold-dim); font-size: var(--fs-small); }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .collector-slide.on, .seal, .editorial-card::after { animation: none !important; transition: none !important; }
  .seal { opacity: 1; transform: none; }
  .acc-body { grid-template-rows: 0fr; }
  .acc-item.open .acc-body { grid-template-rows: 1fr; }
}

/* ============================================================
   内容 x3：玉史 / 玉种 / 形制 / 纹样 / 四时 / FAQ / 引言轮播
   ============================================================ */

/* ---- 玉史编年（纵向时间线） ---- */
.history { position: relative; }
.history::before { content: ""; position: absolute; left: 7.5rem; top: .4rem; bottom: .4rem; width: 1px; background: linear-gradient(var(--gold-dim), var(--line-soft), var(--gold-dim)); }
@media (max-width: 700px) { .history::before { left: 1.4rem; } }
.hist-row { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: 2rem; padding: .8rem 0; }
@media (max-width: 700px) { .hist-row { grid-template-columns: 2.2rem 1fr; gap: 1rem; } }
.hist-row::before { content: ""; position: absolute; left: 7.2rem; top: 1.5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(201,168,108,.8); }
@media (max-width: 700px) { .hist-row::before { left: 1.05rem; } }
.hist-era { font-family: var(--serif); color: var(--gold); letter-spacing: .06em; font-size: .92rem; text-align: right; padding-top: .2rem; }
@media (max-width: 700px) { .hist-era { text-align: left; font-size: .8rem; } }
.hist-main h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.hist-main .zh { color: var(--gold); letter-spacing: .3em; margin-right: .5em; font-size: .85em; }
.hist-main p { color: var(--muted); font-size: var(--fs-small); max-width: 34rem; }

/* ---- 玉种百科 ---- */
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.kind-card { position: relative; background: var(--bg); padding: 2rem; min-height: 220px; display: flex; flex-direction: column; gap: .5rem; overflow: hidden; transition: background .7s var(--ease-lux); }
.kind-card:hover { background: var(--bg-2); }
.kind-zh { font-family: var(--zh); font-size: 1.5rem; color: var(--gold-soft); letter-spacing: .3em; }
.kind-en { font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim); }
.kind-origin { font-size: var(--fs-micro); color: var(--jade); letter-spacing: .18em; text-transform: uppercase; }
.kind-card p { color: var(--muted); font-size: var(--fs-small); }

/* ---- 吉祥纹样 ---- */
.motif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.motif-cell { position: relative; background: var(--bg); padding: 1.8rem 2rem; min-height: 180px; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; transition: background .7s var(--ease-lux); }
.motif-cell:hover { background: var(--bg-2); }
.motif-zh { font-family: var(--zh); font-size: 2rem; color: var(--gold-soft); text-shadow: 0 0 20px rgba(201,168,108,.25); }
.motif-en { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.motif-cell p { color: var(--muted); font-size: var(--fs-small); }

/* ---- 形制百科 ---- */
.size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.size-cell { position: relative; background: var(--bg); padding: 1.8rem 2rem; min-height: 170px; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; transition: background .7s var(--ease-lux); }
.size-cell:hover { background: var(--bg-2); }
.size-zh { font-family: var(--zh); font-size: 1.6rem; color: var(--gold-soft); letter-spacing: .28em; }
.size-en { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.size-cell p { color: var(--muted); font-size: var(--fs-small); }

/* ---- 四时玉语 ---- */
.solstice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.solstice-cell { background: var(--bg); padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .4rem; transition: background .7s var(--ease-lux); }
.solstice-cell:hover { background: var(--bg-2); }
.solstice-zh { font-family: var(--zh); font-size: 1.5rem; color: var(--gold); letter-spacing: .24em; }
.solstice-en { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.solstice-cell p { color: var(--muted); font-size: var(--fs-small); }

/* ---- 引言轮播（quote-rotator） ---- */
.quote-rotator { position: relative; }
.quote-rotator .qslide { display: none; }
.quote-rotator .qslide.on { display: block; animation: collector-in 1.1s var(--ease-lux) both; }
.quote-rotator .qdots { margin-top: 2rem; }

/* ---- 每板之玉 guide strip（board 页） ---- */
.board-guide { border: 1px solid var(--line); background: var(--bg-2); padding: clamp(1.6rem,3vw,2.4rem); display: grid; gap: 1.2rem; }
.board-guide .guide-line { display: flex; gap: 1rem; align-items: baseline; }
.board-guide .guide-k { font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dim); flex: none; min-width: 7rem; }
.board-guide .guide-v { color: var(--muted); font-size: var(--fs-small); }

/* ---- 问卦礼仪（fortune / seek） ---- */
.ritual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.ritual-cell { background: var(--bg); padding: 1.7rem 1.9rem; display: flex; flex-direction: column; gap: .45rem; transition: background .7s var(--ease-lux); }
.ritual-cell:hover { background: var(--bg-2); }
.ritual-zh { font-family: var(--zh); font-size: 1.5rem; color: var(--gold-soft); letter-spacing: .28em; }
.ritual-en { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.ritual-cell p { color: var(--muted); font-size: var(--fs-small); }