/* styles.css */

/* 基础设置：重置所有元素的默认外边距和内边距，并启用边框盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* 全局样式：设置页面字体、文本颜色和背景色，确保html和body占满整个视口 */
  body, html {
    font-family: "Microsoft YaHei", sans-serif;
    color: #fff;
    background: #1d1616;
    height: 100%;
  }
  
  /* 头部 Banner 区域：设置相对定位，使其高度占满整个视口，并隐藏溢出内容 */
  header {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  
  /* 导航栏样式：固定在页面顶部，使用flex布局居中显示，设置背景透明度、内边距和模糊效果 */
  nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    z-index: 10; /* 确保导航栏在其他内容之上 */
    backdrop-filter: blur(6px); /* 背景模糊效果 */
  }
  
  /* 导航链接样式：移除下划线，设置文字颜色和粗细，添加过渡效果 */
  nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s, transform 0.2s; /* 颜色和缩放的过渡效果 */
  }
  
  /* 导航链接悬停效果：改变颜色为金色，并稍微放大 */
  nav a:hover {
    color: #ffd700; /* 金色 */
    transform: scale(1.1); /* 放大1.1倍 */
  }

  /* 动态背景元素样式：固定在视口左上角，占满整个屏幕 */
  #dynamicBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
  
  /* Banner 中心内容样式：使用flex布局垂直居中和水平居中内容，设置高度为100%，文本居中 */
  .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 0 1rem; /* 左右内边距 */
    z-index: 2;
  }
  
  /* Banner 主标题样式：设置大字体、超粗字重，添加淡入向下的动画和文本阴影 */
  .banner h1 {
    font-size: 3rem;
    font-weight: 900;
    animation: fadeInDown 2s ease; /* 淡入向下动画，持续2秒，匀速 */
    text-shadow: 0 4px 10px rgba(0,0,0,0.6); /* 文本阴影 */
  }
  
  /* 淡入向下动画的关键帧定义 */
  @keyframes fadeInDown {
    from {opacity: 0; transform: translateY(-50px);} /* 起始状态：透明且向下偏移50px */
    to {opacity: 1; transform: translateY(0);} /* 结束状态：完全不透明且在原位 */
  }
  
  /* 简介区块样式：使用flex布局，允许换行，居中对齐，设置间距、内边距和背景色 */
  .sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1rem;
    background: #111; /* 深灰色背景 */
  }
  
  /* 简介卡片样式：设置flex属性，最大宽度，半透明白色背景，内边距，圆角，居中文本，添加过渡效果 */
  .section-card {
    flex: 1 1 280px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 280px */
    max-width: 320px;
    background: rgba(255,255,255,0.1); /* 半透明白色背景 */
    padding: 2rem;
    border-radius: 12px; /* 圆角 */
    text-align: center;
    transition: transform 0.3s, background 0.3s; /* transform和background的过渡效果 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    z-index: 3;
  }
  
  /* 简介卡片悬停效果：向上移动并改变背景 */
  .section-card:hover {
    transform: translateY(-10px); /* 向上移动10px */
    background: rgba(255,255,255,0.2); /* 背景变亮 */
  }
  
  /* 简介卡片标题样式：设置底部外边距、字体大小和颜色 */
  .section-card h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #ffd700; /* 金色 */
  }
  
  /* 简介卡片段落样式：设置字体大小和行高 */
  .section-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ddd; /* 浅灰色 */
  }
  
  /* 关于我们页面样式：设置最大宽度，居中显示，设置外边距和内边距，半透明背景，圆角和阴影 */
  main.about {
    max-width: 800px;
    margin: 4rem auto 2rem auto; /* 调整顶部外边距以适应固定导航栏 */
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05); /* 半透明背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影效果 */
  }
  
  /* 关于我们页面主标题样式：设置大字体、金色、居中显示，添加文本阴影 */
  main.about h1 {
    font-size: 2.5rem;
    color: #ffd700; /* 金色 */
    text-align: center;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4); /* 文本阴影 */
  }
  
  /* 关于我们页面段落样式：设置字体大小、行高和底部外边距，文本两端对齐 */
  main.about p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify; /* 两端对齐 */
  }
  
  /* 关于我们页面内部分区样式：设置顶部外边距、内边距和上边框 */
  main.about section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 半透明白色边框 */
  }
  
  /* 关于我们页面第一个分区样式：移除顶部边框和内边距 */
  main.about section:first-of-type {
    border-top: none;
    padding-top: 0;
  }
  
  /* 关于我们页面二级标题样式：设置字体大小、金色和底部外边距，文本居中 */
  main.about h2 {
    font-size: 2rem;
    color: #ffd700; /* 金色 */
    margin-bottom: 1rem;
    text-align: center;
  }
  
  /* 关于我们页面无序列表样式：移除列表样式和内边距 */
  main.about ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  
  /* 关于我们页面列表项样式：设置字体大小、行高和底部外边距，添加左侧内边距和相对定位 */
  main.about ul li {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
  }
  
  /* 列表项前置内容（项目符号）：使用emoji作为项目符号，绝对定位 */
  main.about ul li::before {
    content: '✨'; /* 使用emoji作为微妙的项目符号 */
    position: absolute;
    left: 0;
    color: #ffd700; /* 金色 */
  }
  
  /* 联系方式列表项前置内容：使用不同的emoji */
  main.about .contact ul li::before {
    content: '➡️'; /* 联系方式列表使用不同的emoji */
  }
  
  /* 关于我们页面链接样式：设置独特的链接颜色，移除下划线，添加过渡效果 */
  main.about a {
    color: #00bfff; /* 独特的链接颜色 */
    text-decoration: none;
    transition: color 0.3s; /* 颜色过渡效果 */
  }
  
  /* 关于我们页面链接悬停效果：改变颜色并添加下划线 */
  main.about a:hover {
    color: #87cefa; /* 淡蓝色 */
    text-decoration: underline; /* 添加下划线 */
  }
  
  /* 响应式布局：针对屏幕宽度小于等于768px的设备进行样式调整 */
  @media (max-width: 768px) {
    /* Banner 主标题字体大小调整 */
    .banner h1 {
      font-size: 2rem;
    }
  
    /* 导航栏布局调整：允许换行，减小间距 */
    nav {
      flex-wrap: wrap;
      gap: 1rem;
    }
  
    /* 简介卡片宽度调整：使其占满整个宽度 */
    .section-card {
      flex: 1 1 100%;
    }
  
    /* 关于我们页面布局调整：增加顶部外边距以适应可能换行的导航栏，减小内边距 */
    main.about {
      margin-top: 6rem; /* 屏幕较小时导航栏可能换行，需要调整 */
      padding: 1rem;
    }
  
    /* 关于我们页面主标题字体大小调整 */
    main.about h1 {
      font-size: 2rem;
    }
  
    /* 关于我们页面二级标题字体大小调整 */
    main.about h2 {
      font-size: 1.5rem;
    }
  
    /* 关于我们页面段落和列表项字体大小调整 */
    main.about p, main.about ul li {
      font-size: 1rem;
    }
  }