:root {
  font-size: 0.9vw; /* 字体自适应核心：随屏幕宽度缩放 */
}

/* ===== 全局 ===== */
body {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", sans-serif;
  background: #f5f7fa;
  color: #333;
  overflow: hidden; /* 不出现滚动条 */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== 背景星云粒子 ===== */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 0.25vw;
  height: 0.25vw;
  background: rgba(0, 150, 255, 0.7);
  border-radius: 50%;
  animation: float 8s infinite ease-in-out;
  filter: blur(0.1vw);
}

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-6vh) scale(1.4);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
}

/* ===== 左右能量流 ===== */
.energy {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 10vw;
  pointer-events: none;
  z-index: 1;
}

.left {
  left: 0;
}
.right {
  right: 0;
}

.beam {
  position: absolute;
  width: 0.2vw;
  height: 12vh;
  background: linear-gradient(180deg, transparent, #00eaff, transparent);
  opacity: 0.6;
  animation: beamMove 4s infinite linear;
  filter: blur(0.1vw);
}

@keyframes beamMove {
  0% {
    transform: translateY(120%);
  }
  100% {
    transform: translateY(-120%);
  }
}

/* ===== 中央光晕 ===== */
.glow {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 32vw;
  height: 32vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(0, 150, 255, 0.22),
    transparent 70%
  );
  filter: blur(4vw);
  z-index: 0;
}

/* ===== 主体内容 ===== */
.content {
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4vh;
}

/* 头像 */
.avatar {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  object-fit: cover;
  border: 0.3vw solid #fff;
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.18);
  transition: 0.4s;
}
.avatar:hover {
  transform: scale(1.08) rotate(2deg);
}

/* 名字 */
h1 {
  margin: 1vh 0 0.5vh;
  font-size: 3vw;
  font-weight: 900;
  background: linear-gradient(90deg, #007bff, #00c6ff, #00eaff);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
}

/* 简介 */
.bio {
  text-align: center;
  font-size: 1.1vw;
  color: #555;
  max-width: 40vw;
  line-height: 1.6;
}

/* ===== 链接卡片 ===== */
.links {
  width: 80vw;
  height: 45vh; /* 3 行固定高度 */
  margin-top: 4vh;

  display: grid;
  grid-template-rows: repeat(3, 1fr); /* 固定 3 行 */
  grid-template-columns: repeat(
    auto-fill,
    minmax(16vw, 1fr)
  ); /* 自动列数 */
  gap: 2vw;

  align-content: space-between; /* 行距均匀 */
}

.card-title {
  font-size: 1.3vw;
  font-weight: 700;
  margin-bottom: 0.5vh;
}

.card-desc {
  font-size: 0.9vw;
  color: #666;
  white-space: nowrap; /* 只显示一行 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 超出显示 ... */
  line-height: 1.2;
}

/* 霓虹流光按钮 */
.card {
  position: relative;
  padding: 1.2vw;
  border-radius: 1.2vw;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1.3vw;
  font-weight: 700;

  background: rgba(255, 255, 255, 0.8);
  border: 0.05vw solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(1vw);

  transition: 0.35s;
  overflow: hidden;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.1);
}

/* 外圈能量流光 */
.card::before {
  content: "";
  position: absolute;
  inset: -0.2vw;
  border-radius: 1.3vw;
  background: linear-gradient(120deg, #00eaff, #007bff, #00c6ff, #00eaff);
  background-size: 300% 300%;
  animation: neonFlow 4s infinite ease;
  z-index: -1;
  opacity: 0;
  transition: 0.4s;
}

@keyframes neonFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 内层玻璃 */
.card::after {
  content: "";
  position: absolute;
  inset: 0.2vw;
  border-radius: 1vw;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.8vw);
  z-index: -1;
}

/* 悬浮效果 */
.card:hover {
  transform: translateY(-0.6vw) scale(1.05);
  box-shadow: 0 1.2vw 2.4vw rgba(0, 0, 0, 0.18);
}
.card:hover::before {
  opacity: 1;
}

/* ===== 页脚 ===== */
footer {
  text-align: center;
  padding: 1vh 0;
  font-size: 0.9vw;
  color: #999;
}