/*
 * 作品集首页样式：动力学构成主义。
 * 做什么：米白纸底上只用圆、三角、方、粗斜条与弧五种图元，红、群青、金黄三原色加暖墨；
 *         图元沿轴运动，首屏只有红色圆盘公转一组主导运动，作品卡的行进方块只在悬停或聚焦时运动。
 * 怎么用：site/index.html 引用本文件，作品卡结构由 scripts/build.mjs 的 card() 生成，类名须与之对应。
 * 从哪里改：颜色、字号、间距只改 :root 令牌；禁止加入第四种颜色、圆角、阴影、渐变、模糊，
 *          动画只改 transform，并保留文末的 prefers-reduced-motion 降级。设计说明见 docs/design/portfolio.md。
 */
:root {
  color-scheme: light;

  /* 颜色：页面底、文字和三原色，不得新增第四种颜色。 */
  --color-bone-paper: #efe9dc;
  --color-warm-ink: #17130e;
  --color-red: #e0231b;
  --color-ultramarine: #1c4a87;
  --color-chrome-yellow: #f4b301;

  /* 字体：Inter 不外链加载，保证离线双击可用；中文落到系统黑体粗体。 */
  --font-sans: "Inter", "Arial Black", Helvetica, "Microsoft YaHei", "PingFang SC", sans-serif;
  --text-display: 72px;
  --text-heading: 48px;
  --text-subheading: 32px;
  --text-body-lg: 22px;
  --text-body: 16px;
  --text-label: 13px;
  --tracking-display: -0.03em;
  --tracking-label: 0.08em;

  /* 间距：以 8px 为基准。 */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --page-max-width: 1200px;
  --section-gap: 96px;

  /* 运动曲线：入场 expo-out，钟摆近似正弦。 */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-warm-ink);
  background: var(--color-bone-paper);
}
* { box-sizing: border-box; }
body { margin: 0; }

/* 图元允许溢出容器，但在页面边缘裁掉，避免横向滚动；clip 不会像 hidden 那样产生纵向滚动容器。 */
.frame { overflow-x: hidden; overflow-x: clip; }
.masthead, main {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

.label {
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- 刊头：一条暖墨硬线，左右两枚标签。 ---------- */
.masthead {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-top: var(--spacing-24);
}
.masthead .label { padding-bottom: var(--spacing-16); border-bottom: 4px solid var(--color-warm-ink); flex: 1; }
.masthead .label:last-child { flex: 0 0 auto; }

/* ---------- 首屏：字块与几何构图并列。 ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-48);
  padding: var(--spacing-64) 0 var(--section-gap);
}
.hero-copy { position: relative; z-index: 1; }
/* 中文标题只有五个字，放大到 112px 让字块本身成为一块几何体。 */
h1 {
  margin: 0;
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}
/* 标题逐行从遮罩下方升起：外层裁切，内层只改 transform。 */
.reveal { display: block; overflow: hidden; padding-bottom: 0.06em; }
.reveal > span { display: block; animation: rise 0.8s var(--ease-expo-out) both; }
.reveal + .reveal > span { animation-delay: 0.08s; }
.lead {
  max-width: 18em;
  margin: var(--spacing-32) 0 0;
  padding-left: var(--spacing-16);
  border-left: 8px solid var(--color-red);
  font-size: var(--text-body-lg);
  line-height: 1.4;
}

/* 构图画布：子图元都按画布百分比定位，窄屏时等比缩小。 */
.composition {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  justify-self: center;
}
.composition > * { position: absolute; display: block; }

/* 粗斜条：最强的构图轴，静态；只在入场时沿自身方向展开，并溢出到页面右缘。 */
.bar {
  left: -15%;
  top: calc(58% - 16px);
  width: 160%;
  height: 32px;
  background: var(--color-warm-ink);
  transform: rotate(-30deg);
  transform-origin: 0 50%;
  animation: bar-in 0.9s var(--ease-expo-out) both;
}
/* 弧：只保留圆环右上四分之一。圆环描边是图元本体，不是装饰性边框。 */
.arc {
  right: 2%;
  top: 2%;
  width: 46%;
  aspect-ratio: 1;
  border: 16px solid var(--color-warm-ink);
  border-radius: 999px;
  clip-path: inset(0 0 50% 50%);
}
.triangle {
  left: 22%;
  top: 24%;
  width: 56%;
  aspect-ratio: 1 / 0.9;
  background: var(--color-ultramarine);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.block {
  left: 8%;
  bottom: 10%;
  width: 11%;
  aspect-ratio: 1;
  background: var(--color-chrome-yellow);
}
/* 公转圆盘：外层隐形轨道正转，内层圆盘反转以保持自身直立。 */
.orbit {
  inset: 10%;
  border-radius: 999px;
  animation: spin 18s linear infinite;
}
.disc {
  position: absolute;
  top: 0;
  left: 50%;
  width: 23%;
  aspect-ratio: 1;
  margin: -11.5% 0 0 -11.5%;
  border-radius: 999px;
  background: var(--color-red);
  animation: spin 18s linear infinite reverse;
}

/* ---------- 作品区 ---------- */
.works-section { padding-bottom: var(--section-gap); }
.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-16);
  margin: 0 0 var(--spacing-32);
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.section-title .label { color: var(--color-red); letter-spacing: var(--tracking-label); }
.works { display: grid; gap: var(--spacing-48); }
.works article { animation: rise-card 0.8s var(--ease-expo-out) 0.15s both; }

.project {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  min-height: clamp(340px, 31vw, 420px);
  color: inherit;
  text-decoration: none;
  background: var(--color-bone-paper);
  border: 4px solid var(--color-warm-ink);
}
.project:focus-visible { outline: 4px solid var(--color-ultramarine); outline-offset: 6px; }
.caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--spacing-32);
}
.caption .label { color: var(--color-ultramarine); }
h3 {
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.caption p { max-width: 22em; margin: var(--spacing-16) 0 var(--spacing-32); }
.cta { display: flex; align-items: center; gap: var(--spacing-24); }

/* 硬按钮：红底米白字，悬停硬切群青，按下用位移表示压入。 */
.play {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-16);
  min-height: 44px;
  padding: 12px 28px;
  color: var(--color-bone-paper);
  background: var(--color-red);
  font-weight: 900;
  letter-spacing: var(--tracking-label);
}
.project:hover .play, .project:focus-visible .play { background: var(--color-ultramarine); }
.project:active .play { transform: translate(2px, 2px); }

/* 行进方块：静止时作为骨架，悬停或聚焦卡片时错峰 120ms 行进，绝不同时移动。 */
.march { display: flex; gap: var(--spacing-8); }
.march i { width: 24px; height: 24px; background: var(--color-red); }
.march i:nth-child(3n + 2) { background: var(--color-ultramarine); }
.march i:nth-child(3n) { background: var(--color-chrome-yellow); }
.project:hover .march i, .project:focus-visible .march i { animation: march 1.6s linear infinite; }
.project:hover .march i:nth-child(2), .project:focus-visible .march i:nth-child(2) { animation-delay: 0.12s; }
.project:hover .march i:nth-child(3), .project:focus-visible .march i:nth-child(3) { animation-delay: 0.24s; }
.project:hover .march i:nth-child(4), .project:focus-visible .march i:nth-child(4) { animation-delay: 0.36s; }

/* 封面：实机截图以斜切硬边嵌入，静止时灰度避免抢三原色，悬停或聚焦时硬切回原色。 */
.poster-frame {
  display: block;
  min-height: 0;
  background: var(--color-warm-ink);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  image-rendering: pixelated;
  filter: grayscale(1) contrast(1.1);
}
.project:hover .poster, .project:focus-visible .poster { filter: none; }

/* ---------- 关键帧：全部只改 transform。 ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes rise-card { from { transform: translateY(48px); } }
@keyframes bar-in { from { transform: rotate(-30deg) scaleX(0); } }
@keyframes march {
  0%, 30%, 100% { transform: translateX(0); }
  15% { transform: translateX(16px); }
}

/* ---------- 窄屏：单列，构图缩小到标题下方。 ---------- */
@media (max-width: 720px) {
  .masthead, main { padding: 0 var(--spacing-16); }
  .masthead { padding-top: var(--spacing-16); }
  .hero { grid-template-columns: 1fr; gap: var(--spacing-32); padding: var(--spacing-48) 0 var(--spacing-64); }
  .lead { font-size: 18px; }
  .composition { max-width: 340px; }
  .section-title { font-size: var(--text-subheading); }
  .works-section { padding-bottom: var(--spacing-64); }
  .project { grid-template-columns: 1fr; min-height: 0; }
  .poster-frame { grid-row: 1; aspect-ratio: 1.85; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .caption { padding: var(--spacing-24); }
  h3 { font-size: var(--text-subheading); }
  .caption p { margin: var(--spacing-8) 0 var(--spacing-24); }
  .cta { flex-wrap: wrap; gap: var(--spacing-16); }
}

/* 减少动态效果：停掉公转、行进与入场，所有图元直接停在最终位置。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}