/* ============================================================
   封面.css —— 封面页专属样式
   黑色背景 + 居中大字 + 半透明罗马时钟
   ============================================================ */

.cover-body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;                 /* 纯黑背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* ---- 背景时钟层（占满整屏，默认 30% 透明度；鼠标形成“手电筒光晕”） ---- */
.cover-clock {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;             /* 不拦截点击，点击始终落在文字上 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 手电筒效果：mask 的 alpha 即最终透明度
     基础 30% → 鼠标中心 55% → 边缘平滑过渡回 30%
     --mx / --my 由 JS 在鼠标移动时更新；默认在屏幕外 → 全屏均匀 30% */
  -webkit-mask-image: radial-gradient(
    circle var(--mr, 28vmin) at var(--mx, -9999px) var(--my, -9999px),
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.42) 68%,
    rgba(0, 0, 0, 0.30) 86%,
    rgba(0, 0, 0, 0.30) 100%
  );
  mask-image: radial-gradient(
    circle var(--mr, 28vmin) at var(--mx, -9999px) var(--my, -9999px),
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.42) 68%,
    rgba(0, 0, 0, 0.30) 86%,
    rgba(0, 0, 0, 0.30) 100%
  );
}

/* 时钟尺寸：等比例缩放并完整显示
   以视口较小边为基准（85vmin），任意屏幕比例（16:9 / 16:10 / 3:2…）
   都能完整入画、不裁切、不变形，四周保留呼吸空间、不贴边 */
.cover-clock svg {
  width: 85vmin;
  height: 85vmin;
  flex: 0 0 auto;
}

/* ---- 前景文字层 ---- */
.cover-stage {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cover-title {
  display: block;
  font-family: var(--font-serif);   /* 衬线字体：古典、轻盈 */
  /* 字号上限策略：在“屏幕宽度 16:1（6.25vw）”基础上，
     同时以视口较小边封顶（10vmin），并由 JS 在标题超出
     时钟时通过 --title-fs 进一步缩小，保证任何屏幕上都落在时钟内 */
  font-size: min(6.25vw, 10vmin, var(--title-fs, 100vw));
  font-weight: 300;                 /* 细体，避免粗体 */
  letter-spacing: 0.5em;            /* 字间距：更舒展的呼吸感与高级感 */
  text-indent: 0.5em;               /* 抵消末尾字间距，保持视觉居中 */
  line-height: 1;
  white-space: nowrap;              /* 单行不换行 */
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  /* 轻微扁平化：宽度略大于高度，横向舒展；
     笔画起落与收尾保持锋利、干脆的切割感 */
  transform: scaleX(1.06);
  transition: text-shadow 0.5s ease, color 0.5s ease;
}

/* 「Embodied Cognition」小字：绝对定位于大标题正上方、不占文档流 →
   「具身认知」自身精确居中（其正中心与钟表表盘中心同一条水平线） */
.cover-caption {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 2.2vmin));
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(11px, 1.6vmin, 17px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;            /* 抵消末尾字距，保持视觉居中 */
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  user-select: none;
}

/* 悬停：淡淡的光晕提示可点击 */
.cover-title:hover,
.cover-title:focus-visible {
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.35),
    0 0 60px rgba(255, 255, 255, 0.18);
  outline: none;
}

/* 悬停时浮现的「点击进入」小提示：绝对定位在标题正下方、不占文档流；
   保持水平居中，垂直下移（较此前略收紧，避免过低下沉）并与标题保持适当距离 */
.cover-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4.5vh);
  margin-top: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: rgba(255, 255, 255, 0.35);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cover-stage:hover .cover-hint,
.cover-stage:focus-within .cover-hint {
  opacity: 1;
}