/* ======================================================
 * 文件: banner.css
 * 职责: Banner组件样式
 * 可修改性: 可修改Banner外观、颜色、布局
 * 可删除性: 可删除，Banner组件依赖此样式
 * 学习知识点: CSS渐变、动画、Flexbox、响应式
 * ====================================================== */

/* ==================== Banner基础样式 ==================== */
.banner {
  padding: var(--spacing-20) var(--spacing-4) var(--spacing-16); /* 上下内边距 */
  margin-top: 60px;                   /* 为固定导航栏留出空间 */
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg-primary) 100%); /* 渐变背景 */
  position: relative;                 /* 相对定位，用于装饰元素 */
  overflow: hidden;                   /* 裁剪溢出的装饰元素 */
}

/* ==================== Banner内容区域 ==================== */
.banner__content {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  align-items: center;                /* 水平居中 */
  text-align: center;                 /* 文本居中 */
  position: relative;                 /* 相对定位，在装饰元素之上 */
  z-index: 1;                         /* 层级高于装饰元素 */
}

/* ==================== 头像样式 ==================== */
.banner__avatar {
  margin-bottom: var(--spacing-6);    /* 底部间距 */
}

.avatar-img {
  width: 150px;                       /* 头像宽度 */
  height: 150px;                      /* 头像高度 */
  border-radius: 50%;                 /* 圆形头像 */
  border: 4px solid var(--color-primary); /* 主色边框 */
  box-shadow: var(--shadow-lg);       /* 阴影效果 */
  transition: transform var(--transition-normal); /* 过渡动画 */
}

.avatar-img:hover {
  transform: scale(1.05);             /* 悬停时放大5% */
}

/* ==================== 文本内容样式 ==================== */
.banner__text {
  max-width: 600px;                   /* 最大宽度 */
}

.banner__title {
  font-size: var(--font-size-4xl);    /* 超大号字体 */
  font-weight: var(--font-weight-bold); /* 粗体 */
  color: var(--color-text-primary);   /* 主要文字颜色 */
  margin-bottom: var(--spacing-3);    /* 底部间距 */
}

.banner__bio {
  font-size: var(--font-size-lg);     /* 大号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
}

/* ==================== 欢迎语样式 ==================== */
.banner__greeting {
  font-size: var(--font-size-xl);     /* 大号字体 */
  color: var(--color-accent);         /* 使用辅助色 */
  margin-bottom: var(--spacing-6);    /* 底部间距 */
  min-height: 1.5em;                 /* 最小高度，防止跳动 */
}

.greeting-text {
  font-weight: var(--font-weight-medium); /* 中等粗细 */
}

/* ==================== CTA按钮样式 ==================== */
.banner__cta {
  margin-top: var(--spacing-2);       /* 顶部间距 */
}

/* ==================== 社交链接样式 ==================== */
.banner__social {
  display: flex;                      /* 弹性布局 */
  gap: var(--spacing-4);              /* 链接间距 */
  margin-top: var(--spacing-8);       /* 顶部间距 */
}

.social-link {
  display: inline-flex;               /* 内联弹性布局 */
  align-items: center;                /* 垂直居中 */
  justify-content: center;            /* 水平居中 */
  width: 48px;                        /* 宽度 */
  height: 48px;                       /* 高度 */
  font-size: var(--font-size-xl);     /* 大号字体 */
  background-color: var(--color-bg-primary); /* 白色背景 */
  border-radius: 50%;                 /* 圆形 */
  box-shadow: var(--shadow-sm);       /* 轻微阴影 */
  transition: all var(--transition-normal); /* 过渡动画 */
}

.social-link:hover {
  transform: translateY(-3px);        /* 悬停时上移 */
  box-shadow: var(--shadow-md);       /* 悬停时阴影变大 */
  background-color: var(--color-primary); /* 悬停时背景变为主色 */
}

/* ==================== 装饰元素样式 ==================== */
.banner__decoration {
  position: absolute;                 /* 绝对定位 */
  top: 0;                             /* 距离顶部0 */
  left: 0;                            /* 距离左侧0 */
  right: 0;                           /* 距离右侧0 */
  bottom: 0;                          /* 距离底部0 */
  overflow: hidden;                   /* 裁剪溢出 */
  z-index: 0;                         /* 最低层级 */
  pointer-events: none;               /* 不响应鼠标事件 */
}

.decoration-circle {
  position: absolute;                 /* 绝对定位 */
  border-radius: 50%;                 /* 圆形 */
  opacity: 0.3;                       /* 半透明 */
}

.decoration-circle--1 {
  width: 300px;                       /* 宽度 */
  height: 300px;                      /* 高度 */
  background-color: var(--color-primary); /* 主色 */
  top: -100px;                        /* 距离顶部 */
  right: -100px;                      /* 距离右侧 */
  animation: float 6s ease-in-out infinite; /* 浮动动画 */
}

.decoration-circle--2 {
  width: 200px;                       /* 宽度 */
  height: 200px;                      /* 高度 */
  background-color: var(--color-accent); /* 辅助色 */
  bottom: -50px;                      /* 距离底部 */
  left: -50px;                        /* 距离左侧 */
  animation: float 8s ease-in-out infinite reverse; /* 反向浮动动画 */
}

.decoration-circle--3 {
  width: 150px;                       /* 宽度 */
  height: 150px;                      /* 高度 */
  background-color: var(--color-success); /* 成功色 */
  top: 50%;                           /* 垂直居中 */
  left: 10%;                          /* 距离左侧10% */
  animation: float 10s ease-in-out infinite; /* 浮动动画 */
}

/* ==================== 浮动动画 ==================== */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg); /* 初始位置 */
  }
  50% {
    transform: translateY(-20px) rotate(5deg); /* 中间位置：上移并旋转 */
  }
}

/* ==================== 响应式调整 ==================== */
@media (max-width: var(--breakpoint-md)) {
  /* 移动端减小Banner内边距 */
  .banner {
    padding: var(--spacing-12) var(--spacing-4) var(--spacing-10);
  }
  
  /* 移动端减小头像大小 */
  .avatar-img {
    width: 120px;
    height: 120px;
  }
  
  /* 移动端减小标题字体 */
  .banner__title {
    font-size: var(--font-size-3xl);
  }
  
  /* 移动端减小社交链接大小 */
  .social-link {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }
}