/* 1. 页面整体布局 */
.about-container {
  padding: 30px 0; /* 设置上下内边距为30px，左右为0 */
}
.about-card {
  background-color: var(--color-rice-white-dark); /* 设置背景颜色为深米白色变量 */
  border: 1px solid var(--color-border); /* 设置1像素实线边框，颜色使用边框变量 */
  border-radius: 8px; /* 设置边框圆角为8px */
  box-shadow: var(--shadow); /* 设置阴影效果，使用阴影变量 */
  padding: 40px; /* 设置内边距为40px */
  position: relative; /* 设置相对定位，作为子元素绝对定位的参考点 */
  /* 卷轴背景纹理 */
  background-image: 
    linear-gradient(rgba(242, 237, 232, 0.98), rgba(242, 237, 232, 0.98)),
    url("../images/scroll-texture.png"); /* 设置背景图片：线性渐变叠加卷轴纹理图 */
  background-size: cover; /* 设置背景图片覆盖整个容器 */
}

/* 2. 印章装饰（绝对定位，古风点缀） */
.seal-1 {
  position: absolute; /* 设置绝对定位 */
  top: -20px; /* 距离顶部-20px */
  right: -20px; /* 距离右侧-20px */
  width: 100px; /* 设置宽度为100px */
  height: 100px; /* 设置高度为100px */
  background-image: url("../images/seal-red.png"); /* 设置背景图片为红色印章 */
  background-size: contain; /* 设置背景图片自适应容器大小 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  opacity: 0.7; /* 设置透明度为0.7 */
  z-index: 1; /* 设置层级为1 */
}
.seal-2 {
  position: absolute; /* 设置绝对定位 */
  bottom: -15px; /* 距离底部-15px */
  left: -15px; /* 距离左侧-15px */
  width: 80px; /* 设置宽度为80px */
  height: 80px; /* 设置高度为80px */
  background-image: url("../images/seal-cyan.png"); /* 设置背景图片为青黛色印章 */
  background-size: contain; /* 设置背景图片自适应容器大小 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  opacity: 0.6; /* 设置透明度为0.6 */
  z-index: 1; /* 设置层级为1 */
}

/* 3. 左侧头像区域 */
.sidebar-column {
  background-image: url("../images/ink-texture.png"); /* 使用水墨纹理 */
  background-size: cover;
  background-position: center;
  border-radius: 8px; /* 圆角 */
  padding: 40px 20px; /* 内边距 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影增加层次感 */
  position: relative;
  overflow: hidden;
}

/* 增加一层半透明遮罩，确保文字清晰（可选，视背景图深浅而定） */
.sidebar-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3); /* 浅色遮罩 */
  z-index: 0;
}

.avatar-section {
  display: flex; /* 设置为弹性盒子布局 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
  align-items: center; /* 设置交叉轴居中对齐 */
  margin-bottom: 0; /* 修改：移除下外边距，由父容器padding控制 */
  position: relative; /* 确保在遮罩之上 */
  z-index: 1;
}
.avatar-frame {
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

/* 动画光环 1：内圈墨韵 */
.avatar-frame::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 使用锥形渐变模拟墨迹旋转 */
  background: conic-gradient(from 0deg, transparent 0%, rgba(44, 76, 84, 0.1) 20%, rgba(44, 76, 84, 0.4) 50%, rgba(44, 76, 84, 0.1) 80%, transparent 100%);
  animation: rotate-ink 8s linear infinite;
  z-index: 1;
  /* 添加模糊滤镜，使边缘柔和如墨晕 */
  filter: blur(4px);
  transform: scale(1.1); /* 稍微放大一点 */
}

/* 动画光环 2：外圈灵气（极简线条） */
.avatar-frame::after {
  content: "";
  position: absolute;
  width: 115%;
  height: 115%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4); /* 极细的白线 */
  border-top-color: transparent;
  border-bottom-color: transparent;
  opacity: 0.8;
  animation: rotate-circle-reverse 15s linear infinite;
  z-index: 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* 淡淡的白光 */
}

/* 头像图片 */
.avatar-img {
  width: 82%; /* 稍微缩小头像，留出更多呼吸空间 */
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.8); /* 纯白细边框 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 柔和阴影 */
  transition: transform 0.5s ease;
}

.avatar-frame:hover .avatar-img {
  transform: scale(1.05);
}

/* 墨韵旋转动画 */
@keyframes rotate-ink {
  from { transform: rotate(0deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* 旋转动画 */
@keyframes rotate-circle-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
.cultivation-level {
  margin-top: 15px; /* 设置上外边距为15px */
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif; /* 设置字体族 */
  font-size: 1.2rem; /* 设置字体大小为1.2rem */
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  letter-spacing: 2px; /* 设置字间距为2px */
  background-color: rgba(242, 237, 232, 0.8); /* 设置背景颜色为半透明米白色 */
  padding: 5px 20px; /* 设置内边距：上下5px，左右20px */
  border-radius: 20px; /* 设置边框圆角为20px */
  border: 1px dashed var(--color-cyan-gray-light); /* 设置1像素虚线边框，颜色为浅青灰色变量 */
}

/* 4. 右侧信息区域（卷轴式排版） */
.info-section {
  padding-left: 40px; /* 增加左内边距 */
  border-left: 1px dashed var(--color-cyan-gray-light); /* 修改：改为虚线，更柔和 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-title {
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif; /* 设置字体族 */
  font-size: 1.8rem; /* 设置字体大小为1.8rem */
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  margin-bottom: 20px; /* 设置下外边距为20px */
  padding-bottom: 10px; /* 设置下内边距为10px */
  border-bottom: 1px solid var(--color-border); /* 设置下边框为1像素实线 */
  letter-spacing: 3px; /* 设置字间距为3px */
}
/* 身份介绍 */
.identity-desc {
  font-size: 1.1rem; /* 设置字体大小为1.1rem */
  line-height: 2; /* 设置行高为2倍 */
  margin-bottom: 30px; /* 设置下外边距为30px */
  text-indent: 2em; /* 设置首行缩进2字符 */
}
/* 擅长功法 */
.skills-list {
  list-style: none; /* 去除列表默认样式 */
  padding: 0; /* 设置内边距为0 */
  margin-bottom: 30px; /* 设置下外边距为30px */
}
.skills-list li {
  margin-bottom: 12px; /* 设置下外边距为12px */
  font-size: 1.1rem; /* 设置字体大小为1.1rem */
  display: flex; /* 设置为弹性盒子布局 */
  align-items: center; /* 设置交叉轴居中对齐 */
}
.skills-list li::before {
  content: "✧"; /* 设置伪元素内容为符号 */
  color: var(--color-cyan-gray); /* 设置颜色为青灰色变量 */
  margin-right: 10px; /* 设置右外边距为10px */
  font-size: 1.2rem; /* 设置字体大小为1.2rem */
}
/* 座右铭 */
.motto-box {
  background-color: rgba(74, 111, 124, 0.05); /* 设置背景颜色为淡青色 */
  border-left: 3px solid var(--color-cyan-gray); /* 设置左边框为3像素实线 */
  padding: 20px; /* 设置内边距为20px */
  margin-bottom: 30px; /* 设置下外边距为30px */
  border-radius: 0 4px 4px 0; /* 设置右侧圆角为4px */
}
.motto-text {
  font-family: "Noto Serif SC", serif; /* 设置字体族 */
  font-size: 1.1rem; /* 设置字体大小为1.1rem */
  line-height: 1.8; /* 设置行高为1.8倍 */
  color: var(--color-text-dark); /* 设置字体颜色为深色文本变量 */
  font-style: italic; /* 设置字体样式为斜体 */
}
.motto-source {
  text-align: right; /* 设置文本右对齐 */
  margin-top: 10px; /* 设置上外边距为10px */
  color: var(--color-text-light); /* 设置字体颜色为浅色文本变量 */
  font-size: 0.9rem; /* 设置字体大小为0.9rem */
}
/* 联系方式 */
.contact-list {
  list-style: none; /* 去除列表默认样式 */
  padding: 0; /* 设置内边距为0 */
}
.contact-list li {
  margin-bottom: 15px; /* 设置下外边距为15px */
  font-size: 1.1rem; /* 设置字体大小为1.1rem */
  display: flex; /* 设置为弹性盒子布局 */
  align-items: center; /* 设置交叉轴居中对齐 */
}
.contact-icon {
  width: 36px; /* 设置宽度为36px */
  height: 36px; /* 设置高度为36px */
  background-color: var(--color-cyan-gray); /* 设置背景颜色为青灰色变量 */
  color: var(--color-rice-white); /* 设置字体颜色为米白色变量 */
  border-radius: 50%; /* 设置边框圆角为50% */
  display: flex; /* 设置为弹性盒子布局 */
  align-items: center; /* 设置交叉轴居中对齐 */
  justify-content: center; /* 设置主轴居中对齐 */
  margin-right: 15px; /* 设置右外边距为15px */
  font-size: 1.2rem; /* 设置字体大小为1.2rem */
}
.contact-link {
  color: var(--color-cyan-gray); /* 设置字体颜色为青灰色变量 */
  transition: all 0.3s ease; /* 设置颜色过渡效果 */
}
.contact-link:hover {
  color: var(--color-cyan-gray-light); /* 设置悬停时颜色为浅青灰色变量 */
  text-decoration: none; /* 去除下划线 */
}

/* 5. 响应式适配（移动端堆叠布局） */
@media (max-width: 768px) {
  .about-card {
    padding: 20px; /* 设置内边距为20px */
  }
  .info-section {
    padding-left: 0; /* 设置左内边距为0 */
    border-left: none; /* 去除左边框 */
    border-top: 1px solid var(--color-border); /* 设置上边框为1像素实线 */
    padding-top: 30px; /* 设置上内边距为30px */
    margin-top: 20px; /* 设置上外边距为20px */
  }
  .seal-1 {
    width: 80px; /* 设置宽度为80px */
    height: 80px; /* 设置高度为80px */
    top: -10px; /* 距离顶部-10px */
    right: -10px; /* 距离右侧-10px */
  }
  .seal-2 {
    width: 60px; /* 设置宽度为60px */
    height: 60px; /* 设置高度为60px */
    bottom: -10px; /* 距离底部-10px */
    left: -10px; /* 距离左侧-10px */
  }
}

/* 6. 暗色主题适配 */
:root[data-theme="dark"] .about-card {
  background-color: rgba(12, 18, 24, 0.92); /* 设置暗色主题背景颜色 */
  border-color: rgba(255, 255, 255, 0.08); /* 设置暗色主题边框颜色 */
  background-image:
    linear-gradient(rgba(12, 18, 24, 0.92), rgba(12, 18, 24, 0.92)),
    url("../images/scroll-texture.png"); /* 设置暗色主题背景图片 */
}

:root[data-theme="dark"] .info-section {
  border-color: rgba(255, 255, 255, 0.08); /* 设置暗色主题边框颜色 */
}

:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .skills-list li::before,
:root[data-theme="dark"] .contact-link,
:root[data-theme="dark"] .cultivation-level {
  color: var(--color-cyan-gray-light); /* 设置暗色主题字体颜色 */
}

:root[data-theme="dark"] .identity-desc,
:root[data-theme="dark"] .skills-list li,
:root[data-theme="dark"] .motto-text,
:root[data-theme="dark"] .contact-list li {
  color: var(--color-text-dark); /* 设置暗色主题字体颜色 */
}

:root[data-theme="dark"] .motto-box {
  background-color: rgba(155, 213, 255, 0.08); /* 设置暗色主题背景颜色 */
  border-left-color: var(--color-cyan-gray-light); /* 设置暗色主题左边框颜色 */
}

:root[data-theme="dark"] .motto-source {
  color: var(--color-text-light); /* 设置暗色主题字体颜色 */
}

:root[data-theme="dark"] .contact-icon {
  background-color: rgba(155, 213, 255, 0.2); /* 设置暗色主题背景颜色 */
  color: var(--color-cyan-gray-light); /* 设置暗色主题字体颜色 */
}

:root[data-theme="dark"] .contact-link:hover {
  color: var(--color-cyan-gray); /* 设置暗色主题悬停颜色 */
}

:root[data-theme="dark"] .avatar-frame::before {
  /* 暗色模式下，墨韵改为淡淡的灵光 */
  background: conic-gradient(from 0deg, transparent 0%, rgba(100, 255, 218, 0.05) 20%, rgba(100, 255, 218, 0.2) 50%, rgba(100, 255, 218, 0.05) 80%, transparent 100%);
}
:root[data-theme="dark"] .avatar-frame::after {
  border-color: rgba(100, 255, 218, 0.3);
  border-top-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.1);
}
:root[data-theme="dark"] .avatar-img {
  border-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .cultivation-level {
  background-color: rgba(155, 213, 255, 0.08); /* 设置暗色主题背景颜色 */
  border-color: rgba(155, 213, 255, 0.4); /* 设置暗色主题边框颜色 */
}

:root[data-theme="dark"] .skills-list li::before {
  color: var(--color-cyan-gray-light); /* 设置暗色主题字体颜色 */
}

:root[data-theme="dark"] .sidebar-column::before {
  background-color: rgba(0, 0, 0, 0.5); /* 暗色模式下遮罩变暗 */
}