/* ============================================================
   Scene: ink · 留白 —— 东方水墨生成艺术
   色板纪律：宣纸米色 / 水墨黑白 / 一点朱砂红，无第四色。
   ============================================================ */

.scene-ink {
  --ink: #1a1a1a;
  --ink-soft: rgba(26, 26, 26, 0.66);
  --ink-faint: rgba(26, 26, 26, 0.42);
  --paper: #f5f1e8;
  --cinnabar: #a43424;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif SC', serif;
}

.scene-ink__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 流场水墨画布（初始透明，由 JS 入场时淡入） */
.scene-ink__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* 宣纸颗粒：内联 SVG 噪点，multiply 融进纸底 */
.scene-ink__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 旧纸晕边：四角微微泛黄发暗 */
.scene-ink__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(70, 58, 40, 0.10) 100%);
}

/* 竖排书法区：整列置于画面右上的留白里 */
.scene-ink__script {
  position: absolute;
  top: clamp(2.5rem, 9vh, 6rem);
  right: clamp(1.4rem, 12vw, 11rem);
  writing-mode: vertical-rl;
  pointer-events: none;
  user-select: none;
}

.scene-ink__title {
  margin: 0;
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: clamp(3rem, 13vh, 7.5rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: var(--ink);
}

.scene-ink__char {
  display: inline;
  will-change: transform, opacity;
}

/* 落款小字：题在正文左侧（竖排的下一列） */
.scene-ink__colophon {
  margin: 0;
  margin-block-start: clamp(1.4rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 6vh, 4rem);
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: clamp(0.75rem, 2.1vh, 1.05rem);
  letter-spacing: 0.5em;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* 左上角小注：一行英文，克制得像画角的铅笔字 */
.scene-ink__mark {
  position: absolute;
  top: clamp(1.4rem, 4vh, 2.6rem);
  left: clamp(1.4rem, 4vw, 3rem);
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(0.58rem, 1.3vw, 0.78rem);
  letter-spacing: 0.42em;
  color: var(--ink-faint);
  pointer-events: none;
  user-select: none;
}

/* 朱砂方印：压在右下角，与字列对齐 */
.scene-ink__seal {
  position: absolute;
  right: clamp(1.4rem, 12vw, 11rem);
  bottom: clamp(1.6rem, 8vh, 5rem);
  width: clamp(3.1rem, 7.5vh, 4.6rem);
  aspect-ratio: 1 / 1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.scene-ink__seal svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .scene-ink__script {
    top: 2.2rem;
    right: 2.8rem;
  }

  .scene-ink__title {
    font-size: clamp(2.3rem, 11vh, 4rem);
    letter-spacing: 0.22em;
  }

  .scene-ink__colophon {
    margin-block-start: 1.1rem;
    padding-top: 1.2rem;
    letter-spacing: 0.4em;
  }

  .scene-ink__mark {
    letter-spacing: 0.3em;
  }

  .scene-ink__seal {
    right: 1.15rem;
    bottom: 1.4rem;
    width: 2.7rem;
  }
}