/* ==========================================================================
   EndlessLoop · 关于页样式（Bento Grid 多卡片版）
   --------------------------------------------------------------------------
   依赖 custom.css 的设计令牌（--el-*）。
   结构写在 source/about/index.md：外层 .el-about 是一个 CSS Grid，
   内含 7 张玻璃卡片（个人信息 / 标签 / 格言 / MBTI / 正在做 / 兴趣 / 关于本站）。
   桌面端两列错落 Bento，移动端单列重排。
   ========================================================================== */

/* ==========================================================================
   0. Bento Grid 容器
   ========================================================================== */

.el-about {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  grid-template-areas:
    'profile mbti'
    'tags    mbti'
    'motto   doing'
    'likes   doing'
    'site    site';
  gap: 20px;
  align-items: stretch;
}

.el-about-profile { grid-area: profile; }
.el-about-tags    { grid-area: tags; }
.el-about-motto   { grid-area: motto; }
.el-mbti          { grid-area: mbti; }
.el-about-doing   { grid-area: doing; }
.el-about-likes   { grid-area: likes; }
.el-site          { grid-area: site; }

/* ==========================================================================
   1. 共享玻璃卡基类（个人信息 / 标签 / 格言 / 正在做 / 兴趣 通用）
   ========================================================================== */

.el-about-card {
  position: relative;
  border: 1px solid var(--el-glass-border);
  border-radius: var(--el-radius-xl);
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--el-shadow-3), inset 0 1px 0 var(--el-liquid-inset);
  overflow: hidden;
}

.el-about-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--el-liquid-sheen);
  opacity: 0.6;
  pointer-events: none;
}

.el-about-card > * {
  position: relative;
  z-index: 1;
}

/* 卡头小标题 */
.el-about-card__head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--el-accent-ink);
  margin-bottom: 14px;
}

/* ==========================================================================
   2. 个人信息卡
   ========================================================================== */

.el-about-profile {
  padding: 26px 28px;
}

.el-about-profile__top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.el-about-profile__avatar {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 3px;
  border-radius: 50%;
  box-sizing: border-box;
  background: conic-gradient(
    from 0deg,
    hsl(var(--accent-hue), 100%, 81%),
    hsl(calc(var(--accent-hue) - 37), 92%, 76%),
    hsl(calc(var(--accent-hue) - 74), 100%, 72%),
    hsl(calc(var(--accent-hue) - 110), 77%, 64%),
    hsl(var(--accent-hue), 100%, 81%)
  );
  box-shadow: 0 8px 22px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.34);
}

.el-about-profile__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--el-glass-bg-strong);
}

.el-about-profile__body {
  min-width: 0;
}

.el-about-profile__name {
  margin: 0 0 4px;
  font-family: 'Space Grotesk', 'DM Sans', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--el-text);
}

.el-about-profile__sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--el-text-soft);
}

.el-about-profile__loc {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--el-text-mute);
}

.el-about-profile__loc i {
  margin-right: 5px;
  color: var(--el-sakura-deep);
}

.el-about-card__social {
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   3. 身份与技术标签卡
   ========================================================================== */

.el-about-tags {
  padding: 24px 26px;
}

.el-about-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.el-about-tag {
  padding: 5px 13px;
  border: 1px solid var(--el-glass-border-dim);
  border-radius: 999px;
  background: hsla(var(--accent-hue), 100%, 81%, 0.1);
  color: var(--el-accent-ink);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.25s var(--el-ease), color 0.25s var(--el-ease),
    transform 0.25s var(--el-ease-back);
}

.el-about-tag:hover {
  background: var(--el-grad-main);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   4. 个人格言卡
   ========================================================================== */

.el-about-motto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
}

.el-about-motto__mark {
  flex: 0 0 auto;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  background: var(--el-grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-about-motto__text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--el-text);
}

/* ==========================================================================
   5. 社交图标
   ========================================================================== */

.el-about-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--el-glass-border);
  border-radius: 50%;
  background: var(--el-glass-bg-soft);
  box-shadow: inset 0 1px 0 var(--el-liquid-inset);
  color: var(--el-text-soft);
  font-size: 1.05rem;
  transition: transform 0.3s var(--el-ease-back), background 0.3s var(--el-ease),
    color 0.3s var(--el-ease), box-shadow 0.3s var(--el-ease);
}

.el-about-social:hover {
  transform: translateY(-4px) scale(1.08);
  background: var(--el-grad-main);
  color: #fff;
  box-shadow: 0 10px 22px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.35);
}

.el-about-social i.el-icon-xhs {
  font-size: 1.12em;
  vertical-align: -0.12em;
}

/* ==========================================================================
   6. 列表（正在做 / 兴趣 通用）
   ========================================================================== */

.el-about-doing,
.el-about-likes {
  padding: 24px 26px;
}

.el-about-list {
  display: grid;
  gap: 12px;
}

.el-about-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--el-glass-border);
  border-radius: var(--el-radius-md);
  background: var(--el-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--el-shadow-1);
  transition: transform 0.3s var(--el-ease), box-shadow 0.3s var(--el-ease),
    border-color 0.3s var(--el-ease);
}

.el-about-item:hover {
  transform: translateY(-3px);
  border-color: hsla(var(--accent-hue), 100%, 81%, 0.5);
  box-shadow: var(--el-shadow-2);
}

.el-about-item > i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--el-grad-main);
  color: #fff;
  font-size: 1rem;
}

.el-about-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.el-about-item__text strong {
  color: var(--el-text);
  font-size: 0.98rem;
}

.el-about-item__text span {
  color: var(--el-text-mute);
  font-size: 0.86rem;
}

/* 兴趣：更轻量的胶囊，图标不套渐变底 */
.el-about-list--likes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.el-about-list--likes .el-about-item {
  padding: 10px 18px;
  border-radius: 999px;
}

.el-about-list--likes .el-about-item:hover {
  transform: translateY(-3px);
}

.el-about-list--likes .el-about-item > i {
  width: auto;
  height: auto;
  background: none;
  color: var(--el-sakura-deep);
  font-size: 1rem;
}

.el-about-list--likes .el-about-item > span {
  color: var(--el-text-soft);
  font-size: 0.92rem;
}

/* ==========================================================================
   7. MBTI 人格档案（RPG 角色属性面板 / 人物档案 HUD 感）
   ========================================================================== */

.el-mbti {
  position: relative;
  margin: 0;
  padding: 30px 32px 26px;
  border: 1px solid var(--el-glass-border);
  border-radius: var(--el-radius-xl);
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--el-shadow-3), inset 0 1px 0 var(--el-liquid-inset);
  overflow: hidden;
}

.el-mbti::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--el-liquid-sheen);
  opacity: 0.6;
  pointer-events: none;
}

.el-mbti > * {
  position: relative;
  z-index: 1;
}

.el-mbti__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.el-mbti__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-accent-ink);
}

.el-mbti__label-zh {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--el-text-mute);
}

.el-mbti__head-line {
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
  background: var(--el-hairline);
}

.el-mbti__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 24px;
  margin-bottom: 26px;
}

.el-mbti__type {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.el-mbti__code {
  font-size: clamp(3rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--el-grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 26px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.32));
}

.el-mbti__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--el-text);
}

.el-mbti__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--el-text-mute);
}

.el-mbti__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.el-mbti__kw {
  padding: 5px 14px;
  border: 1px solid var(--el-glass-border-dim);
  border-radius: 999px;
  background: hsla(var(--accent-hue), 100%, 81%, 0.1);
  color: var(--el-accent-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--el-ease), color 0.25s var(--el-ease),
    transform 0.25s var(--el-ease-back);
}

.el-mbti__kw:hover {
  background: var(--el-grad-main);
  color: #fff;
  transform: translateY(-2px);
}

.el-mbti__dims {
  display: grid;
  gap: 8px;
}

.el-mbti-dim {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--el-radius-md);
  transition: background 0.3s var(--el-ease);
}

.el-mbti-dim:hover {
  background: hsla(var(--accent-hue), 100%, 81%, 0.08);
}

.el-mbti-dim__side {
  flex: 0 0 auto;
  min-width: 58px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--el-text-soft);
}

.el-mbti-dim__side--main {
  color: var(--el-accent-ink);
}

.el-mbti-dim__pct {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.72;
}

.el-mbti-dim__side--main .el-mbti-dim__pct {
  opacity: 1;
}

.el-mbti-dim__track {
  flex: 1 1 auto;
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: hsla(var(--accent-hue), 20%, 70%, 0.16);
}

.el-mbti-dim__seg {
  display: block;
  width: 0;
  height: 100%;
  background: hsla(var(--accent-hue), 20%, 60%, 0.32);
  transition: width 1.1s var(--el-ease);
}

.el-mbti-dim__seg--main {
  background: var(--el-grad-main);
  box-shadow: 0 0 10px hsla(var(--accent-hue), 100%, 81%, 0.45);
}

/* ==========================================================================
   8. 关于本站（技术栈 + 时间线 + 运行时间）
   ========================================================================== */

.el-site {
  position: relative;
  margin: 0;
  padding: 30px 32px 26px;
  border: 1px solid var(--el-glass-border);
  border-radius: var(--el-radius-xl);
  background: var(--el-glass-bg-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--el-shadow-3), inset 0 1px 0 var(--el-liquid-inset);
  overflow: hidden;
}

.el-site::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--el-liquid-sheen);
  opacity: 0.6;
  pointer-events: none;
}

.el-site > * {
  position: relative;
  z-index: 1;
}

.el-site__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.el-site__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-accent-ink);
}

.el-site__label-zh {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--el-text-mute);
}

.el-site__head-line {
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
  background: var(--el-hairline);
}

.el-site__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.el-site__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--el-glass-border);
  border-radius: 999px;
  background: var(--el-glass-bg-soft);
  color: var(--el-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--el-ease-back), border-color 0.3s var(--el-ease),
    color 0.3s var(--el-ease), box-shadow 0.3s var(--el-ease);
}

.el-site__chip i {
  color: var(--el-sakura-deep);
  font-size: 0.95rem;
}

.el-site__chip:hover {
  transform: translateY(-3px);
  border-color: hsla(var(--accent-hue), 100%, 81%, 0.55);
  color: var(--el-text);
  box-shadow: var(--el-shadow-2);
}

.el-site__timeline {
  margin-bottom: 6px;
}

.el-site-tl {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 13px 0;
}

.el-site-tl::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--el-hairline);
}

.el-site-tl:first-child::before {
  top: 20px;
}

.el-site-tl:last-child::before {
  bottom: calc(100% - 20px);
}

.el-site-tl__dot {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--el-grad-main);
  box-shadow: 0 0 0 4px hsla(var(--accent-hue), 100%, 81%, 0.16);
}

.el-site-tl__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.el-site-tl__date {
  font-size: 12px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--el-text-mute);
}

.el-site-tl__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--el-text);
}

.el-site-tl__desc {
  font-size: 0.86rem;
  color: var(--el-text-mute);
}

.el-site__uptime {
  padding-top: 18px;
  border-top: 1px solid var(--el-hairline);
  font-size: 0.92rem;
  color: var(--el-text-soft);
}

.el-site__uptime-value {
  margin-left: 4px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--el-accent-ink);
}

/* ==========================================================================
   10. 此刻的我 · 悬挂语录挂件（头像卡片左侧的装饰彩蛋）
   ========================================================================== */

.el-now-me {
  position: absolute;
  top: 0;
  right: 100%;        /* 挂在 .el-about 左侧（头像卡片那一侧） */
  margin-right: 24px;
  z-index: 5;
  width: 150px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 挂点：墙上的小圆钉 */
.el-now-me__pin {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, hsl(calc(var(--accent-hue) - 37), 72%, 72%));
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 吊绳 + 吊牌一起绕挂点摆动 */
.el-now-me__swing {
  display: block;
  transform-origin: 50% 0;
  animation: el-nowme-sway 6.5s ease-in-out infinite;
}

/* 细吊绳 */
.el-now-me__rope {
  display: block;
  width: 2px;
  height: 16px;
  margin: 0 auto;
  background: linear-gradient(180deg, hsla(calc(var(--accent-hue) - 37), 70%, 72%, 0.95), hsla(calc(var(--accent-hue) - 37), 70%, 82%, 0.5));
}

/* 吊牌主体：半透明磨砂玻璃 + 紫蓝渐变 + 柔光 */
.el-now-me__card {
  position: relative;
  display: block;
  padding: 13px 14px 11px;
  border: 1px solid var(--el-glass-border);
  border-radius: 14px;
  background: linear-gradient(160deg, hsla(calc(var(--accent-hue) - 20), 72%, 88%, 0.72), hsla(calc(var(--accent-hue) - 62), 80%, 80%, 0.6));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--el-shadow-2), 0 0 22px hsla(calc(var(--accent-hue) - 37), 92%, 76%, 0.32),
    inset 0 1px 0 var(--el-liquid-inset);
  transition: box-shadow 0.4s var(--el-ease), filter 0.4s var(--el-ease);
}

/* 镜面高光 */
.el-now-me__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--el-liquid-sheen);
  opacity: 0.5;
  pointer-events: none;
}

.el-now-me__card > * {
  position: relative;
  z-index: 1;
}

.el-now-me__title {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--el-grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-now-me__quote {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--el-text);
  word-break: break-word;
}

.el-now-me__sign {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  text-align: right;
  color: var(--el-text-mute);
}

/* 悬停：摆动增强 + 柔光增强，移开平滑恢复 */
.el-now-me:hover .el-now-me__swing {
  animation-name: el-nowme-sway-strong;
  animation-duration: 3.2s;
}

.el-now-me:hover .el-now-me__card {
  box-shadow: var(--el-shadow-3), 0 0 34px hsla(var(--accent-hue), 100%, 81%, 0.55),
    inset 0 1px 0 var(--el-liquid-edge);
  filter: brightness(1.03);
}

.el-now-me:focus-visible {
  outline: none;
}

.el-now-me:focus-visible .el-now-me__card {
  outline: 2px solid hsl(var(--accent-hue), 72%, 46%);
  outline-offset: 2px;
}

@keyframes el-nowme-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1.8deg);
  }
  75% {
    transform: rotate(-1.8deg);
  }
}

@keyframes el-nowme-sway-strong {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3.4deg);
  }
  75% {
    transform: rotate(-3.4deg);
  }
}

/* 深色模式：紫蓝渐变换深一点的底色，避免泛白 */
[data-theme='dark'] .el-now-me__card {
  background: linear-gradient(160deg, hsla(calc(var(--accent-hue) - 20), 55%, 34%, 0.8), hsla(calc(var(--accent-hue) - 62), 58%, 40%, 0.72));
}

/* 窄桌面 / 平板：左侧留白不足，挂件移到右上角悬挂 */
@media screen and (max-width: 1399px) {
  .el-now-me {
    top: -6px;
    right: 22px;
    margin-right: 0;
    width: 126px;
  }
}

/* 移动端：再缩小一点 */
@media screen and (max-width: 900px) {
  .el-now-me {
    right: 14px;
    width: 112px;
  }
}

/* 减少动效：关掉摆动 */
@media (prefers-reduced-motion: reduce) {
  .el-now-me__swing {
    animation: none;
  }
}

/* ==========================================================================
   9. 响应式
   ========================================================================== */

@media screen and (max-width: 900px) {
  .el-about {
    grid-template-columns: 1fr;
    grid-template-areas:
      'profile'
      'tags'
      'motto'
      'mbti'
      'doing'
      'likes'
      'site';
  }

  .el-about-profile__top {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .el-about-card__social {
    justify-content: center;
  }

  .el-mbti__hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .el-mbti-dim {
    gap: 10px;
    padding: 10px 8px;
  }

  .el-mbti-dim__side {
    min-width: 46px;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-about-item,
  .el-about-social,
  .el-about-tag,
  .el-mbti-dim__seg,
  .el-mbti__kw,
  .el-site__chip {
    transition: none;
  }
}