/* 流动宣纸：收藏区改成一张会呼吸的纸，写下的字像墨点浮在上面 */
.ink-paper {
  display: block;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: min(90vh, 880px);
  margin-top: 28px;
  background: #f7f1e2;
  overflow: hidden;
  isolation: isolate;
}

/* 底层：封面水墨图，缓慢推移 */
.ink-paper::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: url(hero.webp) center / cover no-repeat;
  filter: blur(2.5px) saturate(.82) brightness(1.04);
  opacity: .55;
  animation: coverDrift 48s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

/* 上层：纸色薄纱 + 纤维纹，压住水墨让字迹清楚 */
.ink-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, #f9f3e7c4 0%, #f7f0e0cc 48%, #efe6d2d6 100%),
    repeating-linear-gradient(94deg, #8a7a5f0a 0 2px, transparent 2px 7px),
    repeating-linear-gradient(4deg, #8a7a5f08 0 2px, transparent 2px 9px);
  animation: fiberShift 60s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes coverDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.6%, 1.2%, 0) scale(1.06); }
}
@keyframes fiberShift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 140px 90px, -90px 60px; }
}

/* 纸上的字 */
.ink-paper .art-card {
  position: absolute;
  width: var(--s, 88px);
  height: var(--s, 88px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: wordDrift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite alternate;
  z-index: 1;
  will-change: transform;
  opacity: .92;
  transition: opacity .3s, z-index 0s;
}
.ink-paper .art-card:hover { opacity: 1; z-index: 5; }

.ink-paper .art-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.9);
}

@keyframes wordDrift {
  from { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
  to   { transform: translate(calc(-50% + 6px), calc(-50% - 7px)) rotate(calc(var(--rot, 0deg) + 1.6deg)); }
}

/* 新落的一笔：墨点化开 */
.ink-paper .art-card.is-new img {
  animation: inkBloom 1.5s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes inkBloom {
  0%   { opacity: 0; transform: scale(.45); filter: blur(10px) saturate(.4); }
  55%  { opacity: .95; filter: blur(1.5px) saturate(.9); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(.9); }
}

/* 题款：默认收起，指向才浮出 */
.ink-paper .art-card .card-meta,
.ink-paper .art-card p {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 100%);
  margin: 0;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #6b5a44;
  background: #fbf6e9e6;
  border: 1px solid #e0d4bb;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 2;
}
.ink-paper .art-card .card-meta { bottom: 0; }
.ink-paper .art-card p { bottom: -26px; max-width: 220px; white-space: normal; }

.ink-paper .art-card:hover .card-meta,
.ink-paper .art-card:hover p {
  opacity: 1;
  transform: translate(-50%, 100%) translateY(2px);
}

/* 兜底提示 */
.ink-paper-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: SimSun, serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: #9c8f77;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 760px) {
  .ink-paper { height: min(82vh, 680px); }
  .ink-paper::before { background-image: url(hero-900.webp); }
  .ink-paper .art-card { width: var(--s, 64px); height: var(--s, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .ink-paper::before, .ink-paper::after,
  .ink-paper .art-card, .ink-paper .art-card.is-new img, .ink-seed { animation: none !important; }
}

/* 作品层与底纹层 */
.ink-items { position: absolute; inset: 0; z-index: 2; }
.ink-seed-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ink-seed {
  position: absolute;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: center / contain no-repeat;
  mix-blend-mode: multiply;
  filter: grayscale(.35) sepia(.12) contrast(.95);
  animation: seedBreathe 26s ease-in-out infinite alternate;
}
@keyframes seedBreathe {
  from { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
  to   { transform: translate(calc(-50% + 3px), calc(-50% - 4px)) rotate(calc(var(--rot, 0deg) + 1deg)) scale(1.02); }
}

/* 页间薄幕：跳转用淡入淡出，不是快速下滑 */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #f7f1e2;
  opacity: 0;
  transition: opacity .46s ease;
  pointer-events: none;
}
.page-veil.on { opacity: 1; pointer-events: auto; }

/* 落款区块：写完才展开 */
/* 落款区块：写字纸下方，写完才展开 */
.signature-block {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .85s cubic-bezier(.22,.9,.24,1), opacity .7s ease, margin .85s ease, padding .85s ease;
  margin: 0;
  padding: 0 2px;
}
.signature-block.is-open {
  max-height: 460px;
  opacity: 1;
  margin: 18px 0 4px;
  padding-top: 18px;
  border-top: 1px dashed rgba(150, 138, 110, .38);
}
.signature-lead {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: #8a7f66;
}
.signature-lead::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  margin-right: 9px;
  vertical-align: middle;
  background: #cbbfa4;
}
.signature-block .field {
  display: block;
  margin-bottom: 12px;
}
.signature-block .field:last-child { margin-bottom: 0; }
.signature-block input,
.signature-block textarea {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .signature-block.is-open { margin-top: 14px; padding-top: 14px; }
}

/* 长卷点字：作品详情 */
.work-view {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 32, 28, .34);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease;
}
.work-view.on { opacity: 1; pointer-events: auto; }
.work-view-inner {
  position: relative;
  width: min(460px, 92vw);
  padding: 30px 28px 26px;
  border-radius: 4px;
  background:
    radial-gradient(120% 100% at 50% 0%, #fdfaf1 0%, #f7f1e2 58%, #f2ead8 100%);
  box-shadow: 0 30px 70px rgba(20, 30, 26, .28);
  transform: translateY(10px) scale(.98);
  transition: transform .42s cubic-bezier(.22,.9,.24,1);
  text-align: center;
}
.work-view.on .work-view-inner { transform: translateY(0) scale(1); }
.work-view-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  border: 0; background: none;
  font-size: 20px; line-height: 1;
  color: #8a8168;
  cursor: pointer;
}
.work-view-ink {
  display: block;
  width: min(240px, 60%);
  margin: 4px auto 18px;
  mix-blend-mode: multiply;
}
.work-view-name {
  margin: 0;
  font-size: 17px;
  letter-spacing: .1em;
  color: #1e3a31;
}
.work-view-time {
  margin: 5px 0 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: #a2977d;
}
.work-view-msg {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(160, 145, 115, .28);
  font-size: 14px;
  line-height: 1.9;
  color: #4a5a52;
  word-break: break-word;
}
@media (max-width: 760px) {
  .work-view-inner { padding: 26px 22px 22px; }
  .work-view-ink { width: 52%; }
}