/**
 * 主页样式文件
 * 包含主页布局、导航栏、英雄区域、页脚等样式
 * 以及背景网格和波浪动画容器的样式定义
 */

/* 
  全局样式：设置整个页面的基础样式
  这些样式会应用到页面的所有元素上
*/
body {
    /* 隐藏滚动条，防止页面内容超出时出现滚动条 */
    overflow: hidden;
    
    /* 设置页面背景颜色为浅蓝色 */
    background: #e6f2ff;
    
    /* 设置页面高度为视口高度的100% */
    height: 100vh;
    
    /* 设置鼠标光标为默认样式 */
    cursor: default;
    
    /* 移除默认的外边距 */
    margin: 0;
    
    /* 移除默认的内边距 */
    padding: 0;
    
    /* 设置字体，优先使用系统字体，确保在不同系统上都有良好的显示效果 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 
  波浪动画容器样式
  这个容器用于放置canvas元素，绘制波浪动画
*/
.wave-container {
    /* 绝对定位，相对于最近的已定位祖先元素定位 */
    position: absolute;
    
    /* 距离顶部0像素 */
    top: 0;
    
    /* 距离左侧0像素 */
    left: 0;
    
    /* 宽度为100% */
    width: 100%;
    
    /* 高度为100% */
    height: 100%;
    
    /* 层级为1，决定元素的堆叠顺序，数字越大越在上层 */
    z-index: 1;
}

/* 
  网格背景样式
  用于显示背景网格效果
*/
.grid-bg {
    /* 绝对定位 */
    position: absolute;
    
    /* 距离顶部0像素 */
    top: 0;
    
    /* 距离左侧0像素 */
    left: 0;
    
    /* 宽度为100% */
    width: 100%;
    
    /* 高度为100% */
    height: 100%;
    
    /* 使用渐变创建网格背景 */
    /* linear-gradient创建线性渐变，这里创建了两条1像素宽的线，颜色为半透明蓝色 */
    background-image: 
        linear-gradient(rgba(22, 119, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 119, 255, 0.05) 1px, transparent 1px);
    
    /* 背景大小为40像素×40像素，即网格的大小 */
    background-size: 40px 40px;
    
    /* 层级为0，在最底层 */
    z-index: 0;
    
    /* 背景位置过渡动画，1秒内完成，缓动效果 */
    transition: background-position 1s ease;
}

/* 
  主内容容器样式
  包含导航栏、英雄区域和页脚
*/
.content {
    /* 相对定位，作为子元素的定位参考 */
    position: relative;
    
    /* 层级为10，在最上层 */
    z-index: 10;
    
    /* 文字颜色为深灰色 */
    color: #262626;
    
    /* 内边距：上下4rem，左右5rem */
    padding: 4rem 5rem;
    
    /* 高度为100% */
    height: 100%;
    
    /* 使用flex布局 */
    display: flex;
    
    /* flex方向为列，元素垂直排列 */
    flex-direction: column;
    
    /* 元素之间平均分布空间 */
    justify-content: space-between;
}

/* 
  导航栏样式
*/
.navbar {
    /* 使用flex布局 */
    display: flex;
    
    /* 元素两端对齐 */
    justify-content: space-between;
    
    /* 元素垂直居中 */
    align-items: center;
}

/* 
  品牌标志样式
*/
.brand {
    /* 字体大小为1.8rem */
    font-size: 1.8rem;
    
    /* 字体粗细为600 */
    font-weight: 600;
    
    /* 字间距为0.5像素 */
    letter-spacing: 0.5px;
    
    /* 颜色为蓝色 */
    color: #1677ff;
}

/* 
  导航链接区域样式
*/
.nav-links {
    /* 使用flex布局 */
    display: flex;
    
    /* 元素之间的间距为3rem */
    gap: 3rem;
}

/* 
  导航链接样式
*/
.nav-links a {
    /* 颜色为灰色 */
    color: #8c8c8c;
    
    /* 移除下划线 */
    text-decoration: none;
    
    /* 字体大小为1rem */
    font-size: 1rem;
    
    /* 颜色过渡动画，0.3秒内完成，缓动效果 */
    transition: color 0.3s ease;
}

/* 
  导航链接悬停样式
  当鼠标悬停在链接上时应用
*/
.nav-links a:hover {
    /* 颜色变为蓝色 */
    color: #1677ff;
}

/* 
  英雄区域样式
*/
.hero {
    /* 最大宽度为800像素 */
    max-width: 800px;
    
    /* 上外边距为8rem */
    margin-top: 8rem;
}

/* 
  英雄标题样式
*/
.hero-title {
    /* 字体大小为5rem */
    font-size: 5rem;
    
    /* 字体粗细为800 */
    font-weight: 800;
    
    /* 行高为1.1 */
    line-height: 1.1;
    
    /* 下外边距为2rem */
    margin-bottom: 2rem;
}

/* 
  标题渐变样式
  用于对标题中的部分文字应用渐变色
*/
.title-gradient {
    /* 线性渐变背景，从深蓝色到浅蓝色，角度为135度 */
    background: linear-gradient(135deg, #1677ff 0%, #40a9ff 100%);
    
    /* WebKit浏览器的背景裁剪为文字，使文字显示背景渐变 */
    -webkit-background-clip: text;
    
    /* 标准的背景裁剪为文字 */
    background-clip: text;
    
    /* 文字颜色为透明，这样背景渐变就会显示出来 */
    color: transparent;
}

/* 
  英雄描述样式
*/
.hero-desc {
    /* 字体大小为1.3rem */
    font-size: 1.3rem;
    
    /* 颜色为白色 */
    color: #ffffff;
    
    /* 行高为1.8 */
    line-height: 1.8;
    
    /* 下外边距为3rem */
    margin-bottom: 3rem;
}

/* 
  按钮样式
*/
.action-btn {
    /* 内边距：上下1.2rem，左右3rem */
    padding: 1.2rem 3rem;
    
    /* 线性渐变背景，从深蓝色到更深的蓝色，角度为135度 */
    background: linear-gradient(135deg, #1677ff 0%, #0d47a1 100%);
    
    /* 移除边框 */
    border: none;
    
    /* 圆角为50像素，使按钮变成椭圆形 */
    border-radius: 50px;
    
    /* 文字颜色为白色 */
    color: white;
    
    /* 字体大小为1.1rem */
    font-size: 1.1rem;
    
    /* 字体粗细为600 */
    font-weight: 600;
    
    /* 鼠标光标为手型 */
    cursor: pointer;
    
    /* 所有属性过渡动画，0.3秒内完成，缓动效果 */
    transition: all 0.3s ease;
    
    /* 阴影效果，蓝色半透明 */
    box-shadow: 0 10px 30px rgba(22, 119, 255, 0.3);
}

/* 
  按钮悬停样式
*/
.action-btn:hover {
    /* 向上移动5像素 */
    transform: translateY(-5px);
    
    /* 阴影效果更明显 */
    box-shadow: 0 15px 40px rgba(22, 119, 255, 0.5);
}

/* 
  按钮内的链接样式
*/
.action-btn a {
    /* 文字颜色为白色 */
    color: white;
    
    /* 移除下划线 */
    text-decoration: none;
}

/* 
  页脚样式
*/
.footer {
    /* 使用flex布局 */
    display: flex;
    
    /* 元素两端对齐 */
    justify-content: space-between;
    
    /* 元素垂直居中 */
    align-items: center;
    
    /* 颜色为半透明灰色 */
    color: rgba(140, 140, 140, 0.6);
    
    /* 字体大小为0.9rem */
    font-size: 0.9rem;
}

/* 
  响应式设计：当屏幕宽度小于等于900像素时应用
*/
@media (max-width: 900px) {
    /* 英雄标题字体变小 */
    .hero-title {
        font-size: 3.5rem;
    }
    
    /* 主内容容器内边距变小 */
    .content {
        padding: 2rem 3rem;
    }
    
    /* 导航链接间距变小 */
    .nav-links {
        gap: 1.5rem;
    }
}