/* 第一屏「关于我」：SUKI → 一句话 → 个性 → 长处与短板 */
.hero--about {
  min-height: 100svh;
  padding: 150px 24px 90px;
}

.hero--about::before {
  top: 46%;
}

/* 首屏扩散球（参考 Musashino Art University diffusion）：
   实色圆角方块 + 大半径高斯模糊 = 中心饱和、边缘柔化；外圈叠一层相邻色光晕 */
.hero--about .hero-dot {
  --k: 1;
  --s: calc(var(--base) * var(--k));
  width: var(--s);
  height: calc(var(--s) * 1.08);
  border-radius: 44% 44% 42% 42% / 46% 46% 44% 44%;
  background: currentColor;
  box-shadow: 0 0 calc(var(--s) * 0.24) calc(var(--s) * 0.1) color-mix(in srgb, var(--halo) 45%, transparent);
  filter: blur(calc(var(--s) * 0.14));
  opacity: 0.68;
  /* 原地呼吸（缩放）用 CSS 动画；淡入淡出与换位由 interactions.js 控制，球本身不移动 */
  animation: breathe 6.5s ease-in-out infinite;
  will-change: scale, opacity;
}

/* 有 JS 时球默认隐身，由脚本逐个淡入；无 JS 时按上面的静态位置和透明度显示 */
.js .hero--about .hero-dot {
  opacity: 0;
}

.hero--about .hero-dot::after {
  content: none;
}

.hero--about .dot--coral { --halo: var(--accent-orange); }
.hero--about .dot--blue { --halo: var(--accent-purple); }
.hero--about .dot--green { --halo: var(--accent-blue); }
.hero--about .dot--orange { --halo: var(--accent-coral); }
.hero--about .dot--purple { --halo: var(--accent-blue); }

.hero--about .dot-one { --base: 132px; top: 17%; left: 9%; animation-duration: 6.5s; animation-delay: 0s; }
.hero--about .dot-two { --base: 96px; top: 12%; left: 64%; animation-duration: 5.4s; animation-delay: -2.1s; }
.hero--about .dot-three { --base: 118px; top: 38%; right: 7%; animation-duration: 7.2s; animation-delay: -4.3s; }
.hero--about .dot-four { --base: 78px; top: 76%; left: 20%; animation-duration: 5.9s; animation-delay: -1.2s; }
.hero--about .dot-five { --base: 104px; top: 52%; left: 4%; animation-duration: 6.8s; animation-delay: -5.6s; }

@keyframes breathe {
  0%, 100% { scale: 0.88; }
  50% { scale: 1.12; }
}

.hero .hero-name {
  margin: 18px 0 0;
  font-family: var(--font-fraunces);
  font-size: clamp(72px, 12vw, 148px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  line-height: 0.95;
  text-indent: 0.12em;
}

.hero-meta {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-label);
}

.hero-sub {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
  text-wrap: balance;
}

.hero-sub .sep {
  margin: 0 0.4em;
  color: var(--color-text-subtle);
}

/* 个性、长短处：各占一屏，内容垂直居中；两屏之间发丝线分隔 */
.about-me {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 120px 0;
}

.about-me + .about-me {
  border-top: 1px solid var(--color-border-subtle);
}

.about-block-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 44px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-border-strong);
}

.about-block-head .idx {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
}

.about-block-head h2 {
  margin: 0;
  font-family: var(--font-fraunces);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
}

.about-block-head .label {
  margin-left: auto;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

/* 个性：不对称杂志版式——左侧最强特质巨字锚点，右侧七条紧凑量表 */
.trait-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
}

.trait-hero-num {
  display: block;
  font-family: var(--font-fraunces);
  font-size: clamp(120px, 15vw, 208px);
  font-weight: var(--fw-light);
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.trait-hero-name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 22px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: var(--fw-semibold);
}

.trait-hero-name em {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: var(--ls-label);
}

.trait-hero .meter {
  margin-top: 16px;
}

.trait-hero .trait-source {
  margin-top: 30px;
}

.trait-meters {
  row-gap: 0;
}

.trait-meter {
  padding: 15px 0 17px;
  border-top: 1px solid var(--color-border-subtle);
}

.trait-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

.trait-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: var(--fw-medium);
}

.trait-num {
  font-family: var(--font-fraunces);
  font-size: 26px;
  font-weight: var(--fw-light);
  line-height: 1;
}

.trait-num em {
  margin-left: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: var(--ls-label);
}

.trait-meter .meter__fill,
.trait-hero .meter__fill {
  width: 0;
  background: var(--tone, var(--color-text-default));
  transition: width var(--dur-slower) var(--ease-out);
}

.reveal.in .trait-meter .meter__fill,
.reveal.in .trait-hero .meter__fill {
  width: var(--w);
}

.trait-source {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

/* 长处与短板：田字格杂志网格（发丝线分割，无卡片底）+ 短板页脚带 */
.sg-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sg-row {
  padding: 30px clamp(28px, 4vw, 48px) 36px 0;
  border-top: 1px solid var(--color-border-subtle);
}

.sg-row:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(28px, 4vw, 48px);
}

.sg-row:nth-child(odd) {
  border-right: 1px solid var(--color-border-subtle);
}

.sg-row-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.sg-idx {
  color: var(--accent-coral);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-label);
}

.sg-row-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: var(--fw-semibold);
}

.sg-row .sg-source {
  margin: 10px 0 0;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
}

.sg-row > p:last-child {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
}

.sg-subhead {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

.sg-subhead--gap {
  margin-top: 42px;
}

/* 短板带：2px 粗规则线起头，两栏降调展示 */
.sg-gaps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding-top: 24px;
  border-top: 2px solid var(--color-border-strong);
}

.sg-gaps h3 {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: var(--fw-medium);
}

.sg-gaps p {
  margin: 7px 0 0;
  color: var(--color-text-subtle);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.7;
}

/* 暗面皮肤：参考「巨字数字 + 小标签」深底版式——纯明度对比，无彩色强调，小圆点刻度 */
.about-me {
  background: var(--color-bg-inverse);
}

.about-me + .about-me {
  border-top: 1px solid var(--color-border-inverse);
}

.about-me .about-block-head {
  border-bottom: 1px solid var(--color-border-inverse);
}

.about-me .about-block-head .idx,
.about-me .about-block-head .label {
  color: var(--color-text-inverse-muted);
}

.about-me .about-block-head h2 {
  color: var(--color-text-inverse);
}

.about-me .trait-hero-num {
  color: var(--color-text-inverse);
}

.about-me .trait-hero-name {
  color: var(--color-text-inverse);
}

.about-me .trait-hero-name em,
.about-me .trait-source {
  color: var(--color-text-inverse-muted);
}

.about-me .trait-meter {
  border-top: 1px solid var(--color-border-inverse);
}

.about-me .trait-name {
  color: var(--color-text-inverse-muted);
}

.about-me .trait-num {
  color: var(--color-text-inverse);
}

.about-me .trait-num em {
  color: var(--color-text-inverse-muted);
}

/* 刻度线：暗面轨道 + 米白刻度（覆盖 --tone 彩色）+ 起点小圆点标记 */
.about-me .meter__track {
  background: var(--color-border-inverse);
}

.about-me .trait-meter .meter__fill,
.about-me .trait-hero .meter__fill {
  background: var(--color-text-inverse);
  opacity: 0.85;
}

.about-me .trait-top::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-blue);
  margin-left: 12px;
  align-self: center;
}

/* 长短处：暗面田字格 */
.about-me .sg-row {
  border-top: 1px solid var(--color-border-inverse);
}

.about-me .sg-row:nth-child(odd) {
  border-right: 1px solid var(--color-border-inverse);
}

.about-me .sg-row-head h3 {
  color: var(--color-text-inverse);
}

.about-me .sg-idx,
.about-me .sg-row .sg-source,
.about-me .sg-subhead {
  color: var(--color-text-inverse-muted);
}

.about-me .sg-row > p:last-child {
  color: var(--color-text-inverse-muted);
}

.about-me .sg-gaps {
  border-top: 1px solid var(--color-border-inverse);
}

.about-me .sg-gaps h3 {
  color: var(--color-text-inverse-muted);
}

.about-me .sg-gaps p {
  color: var(--color-text-inverse-muted);
  opacity: 0.78;
}

@media (max-width: 860px) {
  /* 手机：球只放在文字上方和下方的留白区，不压正文 */
  .hero--about .hero-dot {
    --k: 0.58;
  }

  .hero--about .dot-one { top: 8%; left: -5%; }
  .hero--about .dot-two { top: 9%; left: auto; right: 4%; }
  .hero--about .dot-three { top: 84%; right: -4%; }
  .hero--about .dot-four { top: 90%; left: 34%; }
  .hero--about .dot-five { top: 82%; left: -6%; }

  .hero--about {
    padding: 120px 20px 60px;
  }

  .hero .hero-name {
    font-size: clamp(64px, 20vw, 96px);
  }

  .about-me {
    padding: 88px 0;
  }

  .about-block-head {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .about-block-head .label {
    flex-basis: 100%;
    margin-left: 0;
  }

  .trait-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .trait-hero-num {
    font-size: clamp(96px, 26vw, 140px);
  }

  .trait-meter {
    padding: 13px 0 15px;
  }

  .trait-num {
    font-size: 24px;
  }

  .sg-list {
    grid-template-columns: 1fr;
  }

  .sg-row,
  .sg-row:nth-child(even) {
    padding: 22px 0 26px;
  }

  .sg-row:nth-child(odd) {
    border-right: 0;
  }

  .sg-subhead--gap {
    margin-top: 30px;
  }

  .sg-gaps {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* 首屏联系方式：纯文本，单击即整段选中，方便复制 */
.hero-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 34px 0 0;
}

.hero-contact > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero-contact dt {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

.hero-contact dd,
.selectable {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  user-select: all;
  -webkit-user-select: all;
}

@media (max-width: 860px) {
  .hero-contact {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}