/* ==========================================================================
   MpDesign — 效果展示页
   复用 styles.css 的令牌与基础件，这里只放「展示真效果」需要的东西。

   排版思路：图版式，不是 widget 式。
   每个效果是一「版」：上面是编号 + 名称 + 一句说明，下面是占满整栏的图。
   不用卡片盒子、不用圆角边框、不加投影——图和文字之间靠留白分开，
   像杂志里的图版。隔版换一次左右边距，制造栏位的节奏。
   ========================================================================== */

/* ---------- 演示容器 ----------
   skill 吐出来的产物有两类，尺寸处理完全不同：

   ① SVG 型（swipe / tap / reveal / flip）
      全部按 width=677 authoring（那是公众号正文的宽度），高度写在属性上、
      由 SMIL 动画驱动。**不能**用 width:100% + height:auto 去拉它——
      那样高度会跟着 width/height 属性的比值走，SVG 被拍扁；
      而 reveal 的折叠态恰恰靠「盒子比 viewBox 矮 + slice 裁切」实现，
      拉高了就等于一开始就展开完，点击动画也没了。

      正确做法是保持 677 的原始坐标系，整体缩放（见 main.js 的 fitDemos，
      用 zoom——它连布局一起缩放，SMIL 的 height 动画也跟着缩，
      演示行为和公众号里一致）。

   ② HTML 型（drag-carousel）
      外层写死了 width:677px !important，但内层全是百分比，
      所以把外层改成 100% 就能整体等比缩小，不影响拖动。 */
.demo {
  position: relative;
  overflow: hidden;
  /* 只留一道发丝线和一点内白，不搞卡片感。
     左上加一道 sheen —— 面被照亮，而不是被填满。 */
  border: 1px solid var(--line);
  background:
    linear-gradient(150deg, var(--sheen) 0%, transparent 38%),
    var(--surface);
}
/* SVG 保持原始尺寸，缩放交给 JS 设的 zoom */
.demo svg { display: block; }
.demo > section[style*="width:677px"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- 效果：一版一版地排 ---------- */
.showcase { display: grid; gap: clamp(52px, 7vw, 92px); }

.show { display: grid; gap: clamp(16px, 2.2vw, 24px); }

.show__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
}
/* 编号是真的有序——这五种效果是按「从最常见到最少见」排的，
   所以用编号承载顺序信息，不是装饰。 */
.show__no {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--accent);
  grid-row: span 2;
  align-self: start;
  padding-top: 6px;
}
.show__name {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}
.show__desc {
  font-size: 14.5px;
  line-height: 1.76;
  color: var(--ink-2);
  max-width: 44em;
}

/* 版位：奇数版左对齐占满，偶数版整体右移一档——
   让五版不排在一条竖线上，像图版的错落栏位。 */
@media (min-width: 900px) {
  .show:nth-child(even) .show__head { padding-left: clamp(0px, 6vw, 88px); }
  .show:nth-child(even) .show__demo { margin-left: clamp(0px, 10vw, 148px); }
  .show:nth-child(odd) .show__demo { margin-right: clamp(0px, 4vw, 56px); }
}

/* ---------- 边界清单 ---------- */
.facts {
  border-top: 1px solid var(--line);
  display: grid;
}
.fact {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.fact::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  margin-top: 9px;
}