/* Landing — 独立的一屏极简名片
   不渲染站点 header/footer；除联系方式的悬浮高亮、复制提示与 thinking 结束后的统一淡入外，
   名片内容无动画与过渡。 */

/* .landing-reveal 是姓名以外的内容：thinking 阶段隐藏，结束后淡入，
   因此需要豁免下面的"无动画"总规则 */
.landing-card *:not(.landing-contact-link):not(.landing-copy-status):not(.landing-reveal),
.landing-card *:not(.landing-contact-link):not(.landing-copy-status):not(.landing-reveal)::before,
.landing-card *:not(.landing-contact-link):not(.landing-copy-status):not(.landing-reveal)::after {
  animation: none !important;
  transition: none !important;
}

/* 小字灰：纸色上对比度约 6.1:1，满足 WCAG AA；
   --grey-3 只有 4.34:1，12px 的标签与正文不够用 */
body.landing-page {
  --landing-muted: #5c5c5c;
}

/* 内容在整屏内垂直居中；底部预留备案号的空间，
   否则矮视口（如横屏手机）居中后备案号会压到联系方式上 */
body.landing-page main {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--sp-6) + 1.4rem);
  padding-bottom: calc(var(--sp-6) + 1.4rem + env(safe-area-inset-bottom, 0px));
}

.landing-card {
  width: 100%;
  padding: var(--sp-6) 0;
  /* 用 auto 外边距居中：视口过矮、自由空间为负时自动退化为顶部对齐，内容可滚动 */
  margin: auto 0;
}

/* ---------- 姓名入场动画：thinking → 乱码解码（hero-decode.js） ---------- */

/* JS 可用时姓名默认隐藏，由脚本从 thinking 淡入接管，避免首帧闪现最终文案 */
.js body.landing-page .landing-name {
  opacity: 0;
}

/* 姓名以外的内容：thinking 阶段整块隐藏（仍占位，不产生布局跳动），
   解码开始时由脚本给 body 加 is-revealed，与姓名同步淡入。
   隐藏时一并关掉 visibility，避免不可见的内容被键盘聚焦或被读屏念出 */
.js body.landing-page .landing-reveal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}

.js body.landing-page.is-revealed .landing-reveal {
  opacity: 1;
  visibility: visible;
}

/* thinking 阶段：文字内部一层朦胧光带，由 JS 驱动从左到右匀速扫过。
   用双类选择器压过下方 .landing-name 的 color / padding 声明，
   否则文字会被不透明的 --ink 盖住，光带完全看不见 */
.landing-name.landing-name--shine {
  background-image: linear-gradient(
    90deg,
    var(--ink) 32%,
    #5c5c5c 44%,
    #b0b0b0 50%,
    #5c5c5c 56%,
    var(--ink) 68%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  /* 原样保留行高与 .155em 的下内边距；背景裁剪需要 .25em 的绘制区，
     多出的 .095em 用负 margin 抵消，与下方副标的间距保持不变 */
  padding-bottom: 0.25em;
  margin-bottom: -0.095em;
}

.landing-eyebrow {
  margin-bottom: var(--sp-7);
  color: var(--landing-muted);
}

.landing-name {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(4rem, 10.5vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  /* 动画期间乱码字符宽度不定，禁止换行（与旧首页 .hero-heading 一致） */
  white-space: nowrap;
  /* 行高 0.9 会让字形下溢约 .155em（Inter 升部+降部为 1.21em），
     补等量下内边距，与副标的视觉间距才回到 --sp-6 */
  padding-bottom: 0.155em;
}

.landing-tagline {
  margin-top: var(--sp-6);
  max-width: 34ch;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--landing-muted);
}

.landing-rule {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--ink);
  margin: var(--sp-9) 0 var(--sp-7);
}

.landing-contact {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-9);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--landing-muted);
}

.landing-contact-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.landing-contact-label {
  color: var(--landing-muted);
}

/* 值本身是按钮：点击复制而不是唤起邮件 / 电话应用；
   重置按钮默认外观，保持与相邻文字同一基线、同一字距 */
.landing-contact-link {
  position: relative;
  isolation: isolate;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--grey-2);
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--landing-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* 悬浮高亮：浅灰块从下缘向上铺满，盖掉默认下划线；
   绝对定位 + 负 z-index，不占位、不推动任何文字（CLS = 0） */
.landing-contact-link::before {
  content: "";
  position: absolute;
  inset: -2px -4px -3px;
  z-index: -1;
  background: var(--grey-2);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.landing-contact-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* 鼠标专属：触屏不触发悬浮高亮，避免点击后高亮粘住 */
@media (hover: hover) and (pointer: fine) {
  .landing-contact-link:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  .landing-contact-link:hover::before {
    transform: scaleY(1);
  }
}

.landing-contact-link:focus-visible::before {
  transform: scaleY(1);
}

/* 复制反馈：紧贴联系方式下方的一行系统提示——
   无边框、无底色，沿用 PLAYER PROFILE 的等宽小字与字距；
   absolute 定位不占位，出现与消失都不推动任何文字（CLS = 0） */
.landing-copy-status {
  position: absolute;
  top: calc(100% + var(--sp-6));
  left: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--landing-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.landing-copy-status[data-visible] {
  opacity: 1;
}

/* 放在上述规则之后，确保能覆盖各处的 transition 声明 */
@media (prefers-reduced-motion: reduce) {
  .landing-contact-link,
  .landing-contact-link::before,
  .landing-copy-status,
  .landing-reveal {
    transition: none;
  }
}

/* 备案号：贴底左对齐，与名片文字左缘同一条竖线，不参与名片的居中布局 */
.landing-legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-6);
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  padding-left: var(--sp-7);
  padding-right: var(--sp-7);
  padding-left: max(var(--sp-7), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-7), env(safe-area-inset-right, 0px));
  text-align: left;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--landing-muted);
}

.landing-legal a {
  color: #6b6b6b;
  border-bottom: none;
  white-space: nowrap;
}

.landing-legal a:hover,
.landing-legal a:focus-visible {
  color: var(--ink);
}