/* About 页装饰：Shape Physics 形状层。
   类名不含 postid，便于以后同类型组件复用；桌面与移动断点在此同步定义。
   形状层铺满整个内容区：上沿 = 顶部导航下方，下沿 = 版权行上方，
   形状从顶部生成后自由落体，最终堆积在底部。
   层级：本层 z-index:0 位于文字（.about-grid z-index:1）下一层；
   文字元素自行接收指针以便复制，其余空白区穿透到本层画布以便拖动。 */
.about-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;          /* = 页面内容区宽度（桌面 1024px） */
  height: 100%;         /* = 导航下方到版权行上方的整段高度 */
  margin: 0;
  padding: 0;
  z-index: 0;           /* 位于文字 / 舷窗层之下 */
  background: transparent;
  overflow: visible;
  pointer-events: none; /* 由画布自行接收指针事件 */
}
/* 占位块：形状层脱离文档流后，用它维持原有页面高度与页脚位置 */
.about-shapes-slot {
  --about-shapes-height: 160px;
  --about-shapes-lift: 46px;
  width: 100%;
  height: var(--about-shapes-height);
  margin: calc(-1 * var(--about-shapes-lift)) auto -44px;
  padding: 0;
  pointer-events: none;
}
.about-shapes > .shape-physics {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.about-shapes canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;   /* 允许 hover / 拖动形状 */
  touch-action: pan-y;    /* 移动端保留纵向滚动 */
  cursor: default;
}
/* hover 到形状上变抓手，按下拖动时变握拳，松开恢复 */
.about-shapes canvas[data-hover-shape="true"] { cursor: grab; }
.about-shapes canvas[data-dragging="true"],
.about-shapes canvas[data-dragging="true"]:active { cursor: grabbing; }
.about-shapes canvas:focus-visible {
  outline: 2px solid #5279df;
  outline-offset: -4px;
}
@media (max-width: 767px) {
  .about-shapes-slot {
    --about-shapes-height: 240px;
    --about-shapes-lift: 30px;
  }
}
@media (max-width: 380px) {
  .about-shapes-slot { --about-shapes-height: 290px; }
}