/* ============================================================
   home.css · 首页专用
   首屏大标题 / 圆形 Main Reel / 首屏内容入口 / 精选作品编排
   ------------------------------------------------------------
   页面背景不在此文件定义：全站唯一背景色是 tokens.css 的 --c-paper。
   ============================================================ */

/* ---------- 首屏：标题垂直居中，内容入口落在底部 ---------- */
.hero {
  position: relative;
  /* 导航已在普通文档流中占约 98px，首屏只占视口剩余高度，
     否则两个内容入口会被推到视口外。上限供长图截图使用。 */
  min-height: 85vh;
  min-height: min(85svh, 900px);
}
.hero__inner {
  min-height: inherit;
  display: flex; flex-direction: column;
  padding-block: clamp(18px, 2.4vh, 32px) clamp(40px, 7vh, 84px);
}
.hero__eyebrow { color: var(--c-mid); }
.hero__title-wrap {
  flex: 1;
  display: flex; align-items: center;
  padding-block: clamp(36px, 7vh, 90px);
}
.hero__title {
  width: 100%;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}
.hero__line { display: block; }
.hero__line--indent { padding-left: var(--indent); }
.hero__line--last { white-space: normal; }
/* 仅在窄屏生效的断行点：避免长行贴到右边缘被裁，桌面保持整行 */
.br-mobile { display: none; }

/* ---------- 按住拖动标题：颜色扫掠（参考站录屏） ----------
   .hero__ink 是每行文字的内层包裹；::after 复制同一行文字并染成中灰，
   用 clip-path 只显示扫过的左侧部分。--wipe 由 home.js 按指针位置写入，
   按行错开形成斜向扫掠；松手加 .is-restoring 让 clip-path 平滑归零。 */
.hero__ink { position: relative; display: inline-block; }
.hero__ink::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  white-space: pre;
  color: var(--c-mid);
  clip-path: inset(0 calc(100% - var(--wipe, 0%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--wipe, 0%)) 0 0);
  pointer-events: none;
}
.hero__title.is-restoring .hero__ink::after { transition: clip-path .5s var(--ease), -webkit-clip-path .5s var(--ease); }
.hero__title.is-dragging { user-select: none; -webkit-user-select: none; cursor: ew-resize; }

/* ---------- 圆形 Main Reel：紧跟标题末行 ---------- */
.reel {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: clamp(58px, 5.4vw, 78px);
  height: clamp(58px, 5.4vw, 78px);
  margin-left: .16em;
  flex: none;
}
.reel__surface {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  cursor: pointer;
}
/* 圆形媒体层：仅用中性灰 + 细线几何 + 半透明灰遮罩，不含任何图片/视频 */
.reel__media {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-placeholder);
  transform: scale(1);
  transition: transform .55s var(--ease);
  will-change: transform;
}
.reel__surface:hover .reel__media { transform: scale(1.09); }
.reel__fill { position: absolute; inset: 0; background: var(--c-placeholder); }
.reel__ring {
  position: absolute; inset: 17%;
  border: 1px solid rgba(22, 22, 22, .22);
  border-radius: 50%;
}
.reel__ring::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(22, 22, 22, .14);
}
.reel__ring::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(22, 22, 22, .14);
}
.reel__scrim {
  position: absolute; inset: 0;
  background: rgba(58, 58, 56, .46);   /* 半透明灰色遮罩 */
}
/* 圆形播放按钮：统一使用 --c-play（#f8f8f8），靠描边与三角形建立层级 */
.reel__play {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: 44%;
  margin: -22% 0 0 -22%;
  display: grid; place-items: center;
  border: 1px solid rgba(22, 22, 22, .28);
  border-radius: 50%;
  background: var(--c-play);
  transition: transform .55s var(--ease);
  will-change: transform;
}
.reel__play svg { width: 12px; height: 14px; fill: var(--c-ink); }
.reel__surface:hover .reel__play { transform: scale(1.08); }
/* 占位标注：默认不抢视觉，hover 时出现在圆下方 */
.reel__tip {
  position: absolute; left: 50%; top: calc(100% + 12px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 2px 4px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: 9px; letter-spacing: .06em;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
/* 文案用伪元素生成，避免占位提示被算进 h1 的文本内容 */
.reel__tip::before { content: "Main Reel · 豆浆油条变身"; }
.reel__surface:hover .reel__tip,
.reel__surface:focus-visible .reel__tip { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 首屏下方偏右的两个内容入口 ---------- */
.hero__jumps { align-items: start; row-gap: 28px; }
.jump--featured { grid-column: 7 / 10; }
.jump--process  { grid-column: 10 / 13; }
.jump {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 12px;
  width: fit-content;
}
.jump__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease),
              transform var(--dur-s) var(--ease);
}
.jump__icon svg { width: 12px; height: 12px; }
/* 反色必须落在 <path> 上：path 自带 stroke="currentColor" 呈现属性，
   只给 <svg> 设 stroke 会被子元素覆盖，黑底时箭头仍是近黑 → 视觉上消失。 */
.jump__icon svg path {
  stroke: var(--c-ink);
  transition: stroke var(--dur-s) var(--ease);
}
.jump:hover .jump__icon,
.jump:focus-visible .jump__icon { border-color: var(--c-feedback); background: var(--c-feedback); }
.jump:hover .jump__icon svg path,
.jump:focus-visible .jump__icon svg path { stroke: var(--c-paper); }
.jump--featured:hover .jump__icon,
.jump--featured:focus-visible .jump__icon { transform: translateY(3px); }
.jump--process:hover .jump__icon,
.jump--process:focus-visible .jump__icon { transform: translateX(3px); }
.jump__text { font-size: var(--fs-small); line-height: 1.45; letter-spacing: .005em; }

/* ---------- 精选作品：严格对齐参考站的 12 列错落编排 ----------
   第一行：左 1–7（6 列，宽）/ 右 10–13（3 列，窄），中间空 3 列，底边对齐。
   第二行：左 4–7（3 列，窄）/ 右 7–13（6 列，宽），左宽右窄互换，顶边对齐。
   所有格子统一 1:1 正方形（由 projects.js 的 ratio 驱动）。
   仅改变媒体框高度，栅格列位、底边/顶边对齐、标签位置与左右宽度互换关系均保持不变。
   ------------------------------------------------------------------ */
.featured { padding-top: clamp(56px, 7vw, 108px); scroll-margin-top: 24px; }

/* 首页专属：精选作品尾部 → 页脚留白收紧。
   原为 .section 的 padding-bottom(158px) + .footer margin-top(158px)
   + footer padding-top(86px) ≈ 403px；上一版收到 86/72/64 ≈ 222px 仍偏空，
   本轮再收到 54/40/43 ≈ 137px。home.css 仅首页加载，其它页面节奏不变。 */
.featured.section { padding-bottom: clamp(36px, 3.8vw, 54px); }
.footer {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(28px, 3vw, 44px);
}
.featured__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-bottom: clamp(48px, 6vw, 92px);
}
.featured__row:last-child { margin-bottom: 0; }
.featured__row--a { align-items: end; }   /* 左右底边对齐 → 右格自然下沉 */
.featured__row--b { align-items: start; } /* 左右顶边对齐 */

.slot-a1 { grid-column: 1 / 7; }
.slot-a2 { grid-column: 10 / 13; }
.slot-b1 { grid-column: 4 / 7; position: relative; }
.slot-b2 { grid-column: 7 / 13; }

/* 参考站第二行左格：标题右对齐，挂在媒体框左下方外侧 */
.work-card__lockup--outside {
  position: absolute;
  right: calc(100% + clamp(14px, 1.6vw, 26px));
  bottom: 2px;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.featured__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: clamp(64px, 9vw, 140px);
  padding-top: 20px;                   /* 上方 1px 区隔线已删除 */
}

/* ---------- 平板：保留错位，外侧标签回收为普通下方标签 ---------- */
@media (max-width: 1199px) {
  .slot-a1 { grid-column: 1 / 7; }
  .slot-a2 { grid-column: 8 / 13; }
  .slot-b1 { grid-column: 3 / 7; }
  .slot-b2 { grid-column: 7 / 13; }
  .work-card__lockup--outside {
    position: static; text-align: left; white-space: normal;
    margin: 14px 0 0;
  }
}

/* ---------- 手机：单列、标签统一置于占位框上方 ---------- */
@media (max-width: 767px) {
  .hero { min-height: 80vh; min-height: min(80svh, 720px); }
  .hero__title { font-size: clamp(31px, 8.4vw, 42px); letter-spacing: -.035em; }
  .br-mobile { display: initial; }
  .hero__title-wrap { padding-block: 32px; }
  .reel { width: 46px; height: 46px; }
  .reel__tip { font-size: 8px; }
  /* 窄屏文字会换行，复制层无法逐行对齐 → 关闭扫掠（JS 也只对精确指针生效） */
  .hero__ink::after { display: none; }
  .hero__jumps { row-gap: 20px; }
  .jump--featured { grid-column: 1 / 7; }
  .jump--process  { grid-column: 7 / 13; }
  .jump__text { font-size: 12px; }

  .featured { padding-top: 44px; }
  .featured__row { row-gap: 44px; margin-bottom: 0; }
  .featured__row--a, .featured__row--b { align-items: start; }
  .slot-a1, .slot-a2, .slot-b1, .slot-b2 { grid-column: 1 / 13; }
  .work-card { display: flex; flex-direction: column; }
  .work-card__lockup--below,
  .work-card__lockup--outside { order: -1; margin: 0 0 14px; }
  .featured__foot { margin-top: 56px; }
}

/* 减弱动效：跟随与放大由 JS 跳过，此处也关闭 CSS 兜底放大 */
@media (prefers-reduced-motion: reduce) {
  .reel__surface:hover .reel__media,
  .reel__surface:hover .reel__play { transform: none; }
  /* 减弱动效下不循环播放视频，圆形回到原有的中性图层 */
  .reel__video { display: none; }
  .hero__ink::after { display: none; }
  .hero__title.is-restoring .hero__ink::after { transition: none; }
}