/* 全局样式 */
:root {
  --primary-color: #ff69b4;
  --secondary-color: #00bfff;
  --accent-color: #7b68ee;
  --bg-color: #0a0a1a;
  --text-color: #ffffff;
  --card-bg: rgba(20, 20, 40, 0.7);
  --glow-color: rgba(255, 105, 180, 0.7);
}

/* 加载动画 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.loading-container {
    text-align: center;
    position: relative;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: breathe 2s infinite ease-in-out;
    position: relative;
}

.loading-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

/* 添加旋转边框 */
.loading-content::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
    box-sizing: border-box;
    animation: rotateBorder 2s linear infinite;
    z-index: 0;
    box-shadow: 0 0 15px var(--glow-color);
}

.loading-text {
    color: var(--primary-color);
    font-size: 1.5rem;
    letter-spacing: 3px;
    text-shadow: 0 0 8px var(--glow-color);
}

/* 同步的呼吸动画 */
@keyframes breathe {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

/* 边框旋转动画 */
@keyframes rotateBorder {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background-color: var(--bg-color);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* 粒子背景 */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 主容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 16rem;
  position: relative;
  z-index: 2;
}

/* 头部样式 */
.header {
  text-align: center;
  margin-bottom: 0rem;
  position: relative;
}

/* 适用于最大宽度为768px的设备 */
@media (max-width: 768px) {
.header {
  text-align: center;
  margin-bottom: 0rem;
  margin-top: 3rem;
  position: relative;
}
}


/* 头像样式 */
.avatar-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.avatar {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
  box-shadow: 0 0 15px var(--glow-color);
  animation: pulse 2s infinite;
  transition: transform 0.3s ease;
}

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

.avatar-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--glow-color) 0%,
    rgba(255, 105, 180, 0) 70%
  );
  z-index: -1;
  animation: glow 3s infinite alternate;
}

/* 标题样式 */
.title {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-color),
    var(--primary-color)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
  animation: 
    /*textGlow 3s infinite alternate,*/
    titleGradientFlow 8s linear infinite;
}

@keyframes textGlow {
  0% {
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 105, 180, 0.8);
  }
}

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



/* 副标题样式 */
.subtitle {
  /*margin-bottom: 1.5rem;*/
}

.subtitle p {
  /*margin-bottom: 0.5rem;*/
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 动态元素 */
.dynamic-element {
  position: relative;
  /* height: 150px; */
  width: 220px;
  margin: 0.8rem auto 0rem auto; 
  perspective: 1000px;
}

.cyber-hexagon {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(123, 104, 238, 0.1) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid var(--secondary-color);
  box-shadow: 0 0 20px var(--secondary-color), inset 0 0 10px var(--secondary-color);
  animation: rotate3D 15s linear infinite;
  z-index: 1;
}

.anime-character {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23ff69b4" d="M50 10 C70 10 85 25 85 50 C85 75 70 90 50 90 C30 90 15 75 15 50 C15 25 30 10 50 10 Z M35 40 C38 40 40 42 40 45 C40 48 38 50 35 50 C32 50 30 48 30 45 C30 42 32 40 35 40 Z M65 40 C68 40 70 42 70 45 C70 48 68 50 65 50 C62 50 60 48 60 45 C60 42 62 40 65 40 Z M35 65 C35 65 50 75 65 65"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: float 5s ease-in-out infinite;
  opacity: 0.9;
  z-index: 3;
}

.tech-lines {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed var(--accent-color);
  animation: rotate-reverse 20s linear infinite;
  z-index: 2;
}

.tech-lines::before, .tech-lines::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.tech-lines::before {
  width: 140px;
  height: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--primary-color);
  animation: rotate 15s linear infinite;
}

.tech-lines::after {
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--secondary-color);
  animation: rotate-reverse 25s linear infinite;
}

.floating-symbols {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.floating-symbols::before, .floating-symbols::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.floating-symbols::before {
  top: 20%;
  left: 15%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300bfff" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
  animation: float-symbol 4s ease-in-out infinite alternate;
}

.floating-symbols::after {
  bottom: 20%;
  right: 15%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff69b4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
  animation: float-symbol 5s ease-in-out 1s infinite alternate;
}

/* 格言样式 */
/*.quote {*/
/*  font-style: italic;*/
  /* margin: 1.5rem 0; */
  /* padding: 1rem; */
/*  max-width: 80%;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*  background: linear-gradient(*/
/*    to right,*/
/*    var(--accent-color),*/
/*    var(--primary-color),*/
/*    var(--secondary-color)*/
/*  );*/
/*  background-size: 200% 100%;*/
/*  -webkit-background-clip: text;*/
/*  background-clip: text;*/
/*  color: transparent;*/
/*  animation: gradientFlow 10s ease infinite;*/
/*}*/


.quote {
  font-style: italic;
  font-weight: bold;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(
    to right,
    var(--accent-color),
    var(--primary-color),
    var(--secondary-color)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 6s ease infinite;
}

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

/* 如果需要，可以添加引用块内部的段落样式 */
.quote p {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.6;
}


/* 全局蒙版 */
.global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 26, 0.6);
  backdrop-filter: blur(5px);
  z-index: 0;
}

/* 主要内容区域 */
main {
  display: flex;
  flex-direction: column;
  /* gap: 2rem; */
  position: relative;
  z-index: 1;
}

section {
  padding: 2rem;
  transition: transform 0.3s ease;
}

section:hover {
  transform: translateY(-5px);
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
  text-align: center;
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 3px;
}

/* 链接容器 */
.links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

/* 导航按钮 */
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(255, 105, 180, 0.2),
    rgba(0, 191, 255, 0.2)
  );
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-btn::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-color),
    var(--primary-color)
  );
  z-index: -1;
  border-radius: 14px;
  background-size: 400%;
  animation: borderGlow 12s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-btn:hover::before {
  opacity: 1;
}

.nav-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    135deg,
    rgba(255, 105, 180, 0.3),
    rgba(0, 191, 255, 0.3)
  );
}

.nav-btn i {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  color: var(--secondary-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-btn:hover i {
  transform: scale(1.2);
  color: var(--primary-color);
}

.nav-btn span {
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-btn:hover span {
  color: var(--primary-color);
}

/* 社交媒体按钮 */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  border-radius: 50%;
}

.social-btn:hover::before {
  opacity: 1;
}

.social-btn i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.social-btn:hover i {
  transform: scale(1.2);
  color: white;
}

/* 页脚样式 */
footer {
  text-align: center;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  opacity: 0.7;
}

footer p {
  margin-bottom: 0.5rem;
}

/* 动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 10px var(--glow-color);
  }
  50% {
    box-shadow: 0 0 20px var(--glow-color), 0 0 30px var(--glow-color);
  }
  100% {
    box-shadow: 0 0 10px var(--glow-color);
  }
}

@keyframes glow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes float-symbol {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes rotate3D {
  0% { transform: translate(-50%, -50%) rotate3d(1, 1, 1, 0deg); }
  100% { transform: translate(-50%, -50%) rotate3d(1, 1, 1, 360deg); }
}

@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.3);
  }
  100% {
    text-shadow: 0 0 15px rgba(255, 105, 180, 0.7),
      0 0 20px rgba(0, 191, 255, 0.5);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

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

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }

  .title {
    font-size: 2.5rem;
  }

  .avatar-container {
    width: 120px;
    height: 120px;
  }

  .nav-btn {
    width: 100px;
    height: 100px;
  }

  .nav-btn i {
    font-size: 2rem;
  }

  .quote {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }

  .avatar-container {
    width: 100px;
    height: 100px;
  }

  .links-container {
    gap: 1rem;
  }

  .nav-btn {
    width: 60px;
    height: 80px;
  }

  .nav-btn i {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  .nav-btn span {
    font-size: 0.9rem;
  }

  .social-btn {
    width: 35px;
    height: 35px;
  }

  .social-btn i {
    font-size: 1.3rem;
  }

  section {
    padding: 1rem;
  }
}

/* 自定义BiliBili图标 */
.fa-bilibili:before {
  content: "\e3d3";
}