/* 「与 AI 共舞」右侧：杂志式版面 + 众声气泡 + 关键词云 + 打字机正文 */
:root { --ai: #5CFFB0; --ai-dim: rgba(92, 255, 176, .55); }
canvas#c { z-index: 1; }

/* ---------- 关键词云：铺满整屏，在人像后面，很淡 ---------- */
.kwcloud { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 2.5s ease; }
.kwcloud.on { opacity: 1; }
.kwcloud { transition: opacity 2.5s ease, filter 2.5s ease; }
.kwcloud.dim { opacity: .5; }
.kwcloud.quiet { opacity: .22; filter: blur(3px); }
.kw {
  position: absolute; white-space: nowrap; transform: translate(-50%, -50%);
  font: 900 calc(var(--s) * 7px + 10px)/1 var(--serif-cn); letter-spacing: .02em;
  color: var(--ai); opacity: calc(.025 + var(--s) * .006);
  animation: kwdrift var(--d) ease-in-out var(--dl) infinite alternate;
}
.kw.en { font: 500 calc(var(--s) * 4.5px + 9px)/1 var(--mono); letter-spacing: .18em; }
.kw.hit { animation: kwdrift var(--d) ease-in-out var(--dl) infinite alternate, kwhit 2.4s ease-out; }
@keyframes kwdrift { from { translate: 0 -14px; } to { translate: 0 14px; } }
@keyframes kwhit { 0% { opacity: .5; text-shadow: 0 0 24px rgba(92,255,176,.6); } 100% { text-shadow: none; } }

/* ---------- 右侧版面 ---------- */
.mz {
  position: fixed; z-index: 2; top: 0; bottom: 0; left: 54vw; right: var(--gutter);
  display: grid; grid-template-rows: auto 1fr auto; pointer-events: none;
}
.mz-head, .mz-foot {
  display: flex; align-items: baseline; gap: 18px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.mz-head { padding: 30px 0 14px; border-bottom: 1px solid var(--hairline); }
.mz-no { color: var(--gold-lit); }
.mz-title { font: 600 13px/1 var(--serif-cn); letter-spacing: .12em; color: var(--dim); text-transform: none; }
.mz-title i { font: italic 400 14px/1 var(--serif-en, serif); letter-spacing: .02em; margin-left: 8px; color: var(--faint); }
.mz-sec { margin-left: auto; color: var(--ai-dim); transition: color .6s; }
.s-doubt .mz-sec { color: var(--gold-lit); }
.mz-foot { grid-row: 3; padding: 14px 0 26px; border-top: 1px solid var(--hairline); justify-content: space-between; }
.mz-skip { letter-spacing: .12em; text-transform: none; }

/* ---------- 众声：荧光绿气泡，亮起、上飘、熄灭 ---------- */
.mz-stream { position: absolute; inset: 70px 0 60px; overflow: hidden; transition: opacity 2s ease; }
.s-rise .mz-stream { opacity: .35; }
.mz-v {
  position: absolute; left: var(--x); top: var(--y); max-width: 46%;
  padding: 9px 14px 10px; border: 1px solid rgba(92, 255, 176, .45); border-radius: 16px;
  background: rgba(92, 255, 176, .04); color: var(--ai);
  text-shadow: 0 0 12px rgba(92, 255, 176, .45);
  animation: voice var(--life) cubic-bezier(.2, .7, .3, 1) forwards;
}
.mz-v--l { border-bottom-left-radius: 3px; }
.mz-v--r { border-bottom-right-radius: 3px; }
.mz-v p { margin: 0; font: 400 15px/1.5 var(--sans); letter-spacing: .03em; }
.mz-v.en p { font: 400 13px/1.5 var(--mono); letter-spacing: .02em; }
@keyframes voice {
  0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); }
  12% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); box-shadow: 0 0 28px rgba(92,255,176,.25); }
  40% { opacity: .75; box-shadow: none; }
  100% { opacity: 0; transform: translateY(-200px) scale(.94); filter: blur(2px); }
}

/* ---------- 对话：两个大气泡，亮在中间，再升到上方变淡 ---------- */
.mz-dialog {
  position: absolute; left: 0; right: 0; top: 34%; display: grid; gap: 18px;
  transform-origin: 0 0; transition: transform 1.6s var(--ease-out), opacity 1.6s ease, top 1.6s var(--ease-out);
}
.s-rise .mz-dialog { top: 84px; transform: scale(.6); opacity: .38; }
.mz-q {
  position: relative; max-width: 78%; padding: 16px 22px 18px; border-radius: 22px;
  border: 1px solid rgba(243, 237, 228, .28); background: rgba(243, 237, 228, .035);
  opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1.2s var(--ease-out);
}
.mz-q--l { justify-self: start; border-bottom-left-radius: 4px; }
.mz-q--r { justify-self: end; border-bottom-right-radius: 4px; text-align: right; }
.s-q1 .mz-q--l, .s-q2 .mz-q--r { opacity: 1; transform: none; }
.mz-who { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; color: var(--ai-dim); margin-bottom: 10px; }
.mz-q p { margin: 0; font: 600 clamp(20px, 1.9vw, 28px)/1.45 var(--serif-cn); letter-spacing: .03em; color: var(--text); }

/* ---------- 我的看法 ---------- */
.mz-view { position: absolute; left: 0; right: 0; top: 26%; }
.mz-doubt {
  margin: 0; font: 400 clamp(15px, 1.25vw, 18px)/1.6 var(--serif-cn); letter-spacing: .12em; color: var(--dim);
  opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1.2s var(--ease-out);
}
.s-doubt .mz-doubt { opacity: 1; transform: none; }
.mz-pull { position: relative; margin: 14px 0 0; font: 900 clamp(36px, 4.1vw, 66px)/1.16 var(--serif-cn); letter-spacing: .01em; color: var(--text); }
.mz-pull .ln { display: block; overflow: hidden; padding-bottom: .05em; }
.mz-pull .ln > span { display: inline-block; transform: translateY(108%); transition: transform 1.3s var(--ease-out); }
.mz-pull .ln + .ln > span { transition-delay: .16s; }
.s-partner .mz-pull .ln > span { transform: none; }
.mz-pull em { font-style: normal; color: var(--gold-lit); }
.mz-mark {
  position: absolute; left: -.62em; top: .02em; font: 400 2.2em/1 var(--serif-cn); color: var(--gold-lit);
  opacity: 0; transition: opacity 1.4s ease .3s;
}
.s-partner .mz-mark { opacity: .22; }

/* 正文：小字两栏，打字机点亮 */
.mz-body {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline);
  columns: 2; column-gap: 34px; column-rule: 1px solid var(--hairline);
  font: 400 13px/1.95 var(--sans); letter-spacing: .05em; color: var(--dim);
  opacity: 0; transition: opacity .6s ease;
}
.s-body .mz-body { opacity: 1; }
.mz-body p { margin: 0 0 .9em; break-inside: avoid; }
.mz-body p:first-child::first-letter { font: 900 2.4em/1 var(--serif-cn); float: left; margin: .12em .18em 0 0; color: var(--text); }
.mz-body .c { font-style: normal; opacity: 0; transition: opacity .25s ease; }
.mz-body .c.on { opacity: 1; }
.mz-body .k-ai { color: var(--ai); }
.mz-body .k-me { color: var(--fire-5); }
.mz-body .k-gold { color: var(--gold-lit); }
.mz-caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ai); animation: caret .9s steps(1) infinite; }
.s-done .mz-caret { opacity: 0; }
@keyframes caret { 50% { opacity: 0; } }
.mz-sign {
  margin: 18px 0 0; display: flex; justify-content: space-between; align-items: baseline;
  font: 600 15px/1 var(--serif-cn); letter-spacing: .12em; color: var(--text);
  opacity: 0; transition: opacity 1.2s ease;
}
.mz-sign span { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }
.s-done .mz-sign { opacity: 1; }

/* 窄屏：版面放到下半屏 */
@media (max-width: 760px) {
  .mz { left: var(--gutter); top: 48vh; }
  .mz-head { padding-top: 12px; }
  .mz-body { columns: 1; }
}

/* 杂志式边注：竖排章名 + 幕次 */
.mz-margin {
  position: fixed; z-index: 2; top: 0; bottom: 0; left: calc(54vw - 52px); width: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; pointer-events: none;
}
.mz-margin::before, .mz-margin::after { content: ""; width: 1px; flex: 0 0 64px; background: var(--hairline); }
.mz-vert { writing-mode: vertical-rl; font: 600 12px/1 var(--serif-cn); letter-spacing: .5em; color: var(--faint); }
.mz-acts { display: grid; gap: 12px; font: 400 13px/1 var(--serif-en, serif); font-style: italic; color: var(--faint); text-align: center; }
.mz-acts span { transition: color .6s ease; }
.mz-acts span.on { color: var(--gold-lit); }
@media (max-width: 760px) { .mz-margin { display: none; } }

/* 矮屏（如 1280×800、桌面里的浏览器窗口）：收紧纵向 */
@media (max-height: 860px) and (min-width: 761px) {
  .s-partner .mz-dialog { opacity: .22; top: 74px; transform: scale(.52); }
  .mz-view { top: 22%; }
  .mz-pull { font-size: clamp(30px, 3.4vw, 50px); }
  .mz-body { margin-top: 16px; padding-top: 12px; font-size: 12.5px; line-height: 1.85; }
  .mz-body p { margin-bottom: .6em; }
  .mz-sign { margin-top: 10px; }
  .mz-foot { padding-bottom: 18px; }
}