/* 板块内容页顶部：3D 水墨入场首屏（叠在现有 .ink-canvas 水墨着色器之上）。
   一屏大标题，往下滚即是该板块完整内容。 */
.board-hero {
  position: relative;
  z-index: 1;
  overflow: hidden; /* 裁掉 3D 画布的亚像素外溢,避免移动端横向滚动 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
}
.board-hero h1 {
  margin: 0;
  font-family: "Chakra Petch", "Noto Sans SC", sans-serif;
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink, #20242f);
  text-shadow: 0 2px 26px rgba(244, 241, 234, 0.88), 0 0 8px rgba(244, 241, 234, 0.85);
  text-wrap: balance;
}
.board-hero .be-en {
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: var(--soft, #5e6373);
}
.board-hero .be-down {
  margin-top: 46px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--soft, #5e6373);
}
@media (prefers-reduced-motion: no-preference) {
  .board-hero .be-down { animation: be-bob 1.8s ease-in-out infinite; }
}
@keyframes be-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 返回 3D 导航（固定左下，不挡页面 header） */
.board-back {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink, #20242f); text-decoration: none;
  background: rgba(244, 241, 234, 0.72); padding: 8px 14px; border-radius: 22px;
  backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(20, 24, 40, 0.1);
}
.board-back:hover { color: #000; }
.board-back:focus-visible { outline: 2px solid var(--accent, #2f6fd0); outline-offset: 3px; }

/* 空板块占位（如平面设计，内容待补） */
.board-empty {
  position: relative; z-index: 1; min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px 120px;
}
.board-empty h2 {
  font-family: "Chakra Petch", "Noto Sans SC", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink, #20242f); margin: 0 0 14px;
}
.board-empty p { color: var(--soft, #5e6373); max-width: 46ch; line-height: 1.7; margin: 0 0 26px; }
.board-empty-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px;
  border-radius: 40px; border: 1.5px solid var(--accent, #2f6fd0);
  color: var(--ink, #20242f); text-decoration: none; font-weight: 600;
}
.board-empty-cta:hover { background: var(--accent, #2f6fd0); color: #fff; }

/* 电影级首屏（浅色：线框球 + 悬浮作品屏，漂在和内容页同一张水墨背景上） */
.board-hero.is-cine { background: transparent; }
.board-hero.is-cine .board-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  /* 上下渐隐:让 3D 场景柔和淡入/淡出,融进连续的水墨背景,无硬边界、无裁切分界线 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 100%); }
.board-hero.is-cine h1 { position: relative; z-index: 2; color: var(--ink, #15181f); text-shadow: 0 2px 26px rgba(244, 241, 234, 0.85), 0 0 8px rgba(244, 241, 234, 0.8); }
.board-hero.is-cine .be-en, .board-hero.is-cine .be-down { position: relative; z-index: 2; color: var(--soft, #5e6373); }
/* 左下旋转光圈 + 底部滚动箭头 */
.board-hero.is-cine .board-cue { position: absolute; left: 30px; bottom: 28px; z-index: 4; width: 34px; height: 34px; border: 1px solid rgba(20, 24, 40, 0.3); border-radius: 50%; }
.board-hero.is-cine .board-cue::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(20, 24, 40, 0.7); border-top-color: transparent; }
.board-hero.is-cine .board-chev { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; color: rgba(20, 24, 40, 0.55); font-size: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .board-hero.is-cine .board-cue::before { animation: cue-spin 2.4s linear infinite; }
  .board-hero.is-cine .board-chev { animation: chev-bob 1.8s ease-in-out infinite; }
}
@keyframes cue-spin { to { transform: rotate(360deg); } }
@keyframes chev-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* 钻镜头「钻出」端：落地时首屏从模糊放大态涌现 */
@media (prefers-reduced-motion: no-preference) {
  .board-hero { animation: board-emerge 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes board-emerge {
  from { opacity: 0; transform: scale(1.14); filter: blur(14px); }
  to { opacity: 1; transform: none; filter: none; }
}