/* ===== 主样式文件 ===== */
/* 全局重置样式 - 清除所有元素的默认边距和内边距 */
* {
    margin: 0; /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 设置盒模型为border-box，包含边框和内边距在宽高内 */
}

/* ===== CSS变量定义 ===== */
/* 根元素变量定义 - 定义整个网站的设计系统变量 */
:root {
    /* 主色调 - 可爱粉色系，用于网站的主要品牌色彩 */
    --primary-color: #ff6b9d; /* 主要粉色 - 用于按钮、链接、重要元素 */
    --primary-light: #ffb3d1; /* 浅粉色 - 用于悬停状态和装饰 */
    --primary-dark: #e55a87; /* 深粉色 - 用于按钮按下状态和强调 */
    
    /* 辅助色 - 清新色彩，用于丰富页面色彩层次 */
    --secondary-color: #a8e6cf; /* 薄荷绿 - 用于次要按钮和装饰元素 */
    --accent-color: #ffd93d; /* 明黄色 - 用于突出显示和警告信息 */
    --purple-light: #c7ceea; /* 淡紫色 - 用于渐变和装饰背景 */
    --blue-light: #87ceeb; /* 天蓝色 - 用于信息提示和装饰 */
    
    /* 背景色系统 - 定义各种背景颜色 */
    --bg-primary: #ffffff; /* 主背景色 - 纯白色，用于卡片和主要内容区域 */
    --bg-secondary: #fef7f7; /* 次要背景色 - 淡粉色，用于页面整体背景 */
    --bg-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); /* 渐变背景 - 用于英雄区域 */
    --bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 - 半透明白色，用于卡片组件 */
    
    /* 文字颜色系统 - 定义文本的层次颜色 */
    --text-primary: #2d3748; /* 主要文字色 - 深灰色，用于标题和重要文本 */
    --text-secondary: #4a5568; /* 次要文字色 - 中灰色，用于正文内容 */
    --text-light: #718096; /* 浅色文字 - 浅灰色，用于辅助信息和说明文字 */
    --text-white: #ffffff; /* 白色文字 - 用于深色背景上的文字 */
    
    /* 阴影系统 - 定义不同层次的阴影效果 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); /* 小阴影 - 用于轻微的层次感 */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* 中等阴影 - 用于卡片和按钮 */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* 大阴影 - 用于悬浮效果 */
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* 超大阴影 - 用于模态框和重要元素 */
    --shadow-pink: 0 8px 25px rgba(255, 107, 157, 0.3); /* 粉色阴影 - 用于主色调元素的特殊阴影 */
    
    /* 圆角系统 - 定义统一的圆角规范 */
    --radius-sm: 8px; /* 小圆角 - 用于按钮和小元素 */
    --radius-md: 12px; /* 中等圆角 - 用于输入框和中等元素 */
    --radius-lg: 16px; /* 大圆角 - 用于卡片和容器 */
    --radius-xl: 20px; /* 超大圆角 - 用于特殊容器 */
    --radius-full: 50%; /* 完全圆形 - 用于头像和圆形按钮 */
    
    /* 间距系统 - 定义统一的间距规范 */
    --spacing-xs: 4px; /* 超小间距 - 用于紧密排列的元素 */
    --spacing-sm: 8px; /* 小间距 - 用于相关元素之间 */
    --spacing-md: 16px; /* 中等间距 - 用于段落和组件间距 */
    --spacing-lg: 24px; /* 大间距 - 用于区块之间 */
    --spacing-xl: 32px; /* 超大间距 - 用于主要区域间距 */
    --spacing-2xl: 48px; /* 2倍大间距 - 用于页面区域间距 */
    --spacing-3xl: 64px; /* 3倍大间距 - 用于页面主要分割 */
    
    /* 字体大小系统 - 定义文字大小层次 */
    --font-xs: 0.75rem; /* 超小字体 - 用于标签和辅助信息 */
    --font-sm: 0.875rem; /* 小字体 - 用于说明文字 */
    --font-base: 1rem; /* 基础字体 - 用于正文内容 */
    --font-lg: 1.125rem; /* 大字体 - 用于副标题 */
    --font-xl: 1.25rem; /* 超大字体 - 用于小标题 */
    --font-2xl: 1.5rem; /* 2倍大字体 - 用于中等标题 */
    --font-3xl: 1.875rem; /* 3倍大字体 - 用于大标题 */
    --font-4xl: 2.25rem; /* 4倍大字体 - 用于主标题 */
    --font-5xl: 3rem; /* 5倍大字体 - 用于超大标题 */
    
    /* 过渡动画系统 - 定义动画时长 */
    --transition-fast: 0.15s ease; /* 快速过渡 - 用于即时反馈 */
    --transition-normal: 0.3s ease; /* 正常过渡 - 用于一般交互 */
    --transition-slow: 0.5s ease; /* 慢速过渡 - 用于复杂动画 */
}

/* ===== 基础样式 ===== */
/* 页面主体样式 - 设置整个页面的基础外观 */
body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 字体族 - 优先使用思源黑体，回退到系统字体 */
    line-height: 1.6; /* 行高 - 设置文本行间距为1.6倍，提高可读性 */
    color: var(--text-primary); /* 文字颜色 - 使用主要文字色变量 */
    background: var(--bg-secondary); /* 背景色 - 使用次要背景色变量 */
    overflow-x: hidden; /* 水平溢出隐藏 - 防止水平滚动条出现 */
}

/* 容器样式 - 页面内容的主要容器 */
.container {
    max-width: 1200px; /* 最大宽度 - 限制内容区域最大宽度为1200px */
    margin: 0 auto; /* 居中对齐 - 水平居中显示 */
    padding: 0 var(--spacing-lg); /* 内边距 - 左右使用大间距变量 */
}

/* ===== 导航栏样式 ===== */
/* 主导航栏 - 固定在页面顶部的导航容器 */
.navbar {
    position: fixed; /* 固定定位 - 导航栏固定在页面顶部 */
    top: 0; /* 顶部位置 - 距离页面顶部0像素 */
    left: 0; /* 左侧位置 - 距离页面左侧0像素 */
    right: 0; /* 右侧位置 - 距离页面右侧0像素，实现全宽 */
    background: rgba(255, 255, 255, 0.98); /* 背景色 - 半透明白色，营造毛玻璃效果 */
    backdrop-filter: blur(20px); /* 背景模糊 - 对背后内容进行20px模糊处理 */
    border-bottom: 2px solid rgba(255, 107, 157, 0.15); /* 底部边框 - 淡粉色边框分割导航栏和内容 */
    z-index: 1000; /* 层级 - 确保导航栏在所有内容之上 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 - 平滑的状态变化动画 */
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.1); /* 阴影 - 淡粉色阴影增加层次感 */
}

/* 导航栏滚动状态 - 页面滚动时的导航栏样式 */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95); /* 背景色 - 滚动时背景更不透明 */
    box-shadow: 0 8px 32px rgba(255, 107, 157, 0.15); /* 阴影 - 滚动时阴影更明显 */
}

/* 导航栏内容容器 - 导航栏内部的布局容器 */
.navbar .container {
    display: flex; /* 弹性布局 - 使用flex布局排列导航元素 */
    align-items: center; /* 垂直居中 - 导航元素垂直居中对齐 */
    justify-content: space-between; /* 水平分布 - 导航元素两端对齐 */
    height: 80px; /* 高度 - 导航栏固定高度80px */
    position: relative; /* 相对定位 - 为子元素提供定位参考 */
}

/* 导航品牌 - 网站Logo和品牌名称 */
.nav-brand {
    display: flex; /* 弹性布局 - 使用flex排列品牌元素 */
    align-items: center; /* 垂直居中 - 品牌元素垂直居中对齐 */
    gap: var(--spacing-sm); /* 间距 - 品牌元素之间的小间距 */
    text-decoration: none; /* 文本装饰 - 移除链接下划线 */
    color: var(--primary-color); /* 文字颜色 - 使用主色调 */
    font-weight: 700; /* 字体粗细 - 粗体显示增强品牌识别 */
    font-size: var(--font-xl); /* 字体大小 - 使用超大字体变量 */
    position: relative; /* 相对定位 - 为子元素提供定位参考 */
    z-index: 2; /* 层级 - 确保品牌在其他元素之上 */
    transition: all var(--transition-normal); /* 过渡动画 - 平滑的悬停效果 */
}

/* 导航品牌悬停效果 - 鼠标悬停时的样式变化 */
.nav-brand:hover {
    transform: translateY(-2px); /* 变换 - 向上移动2px创造浮起效果 */
    color: var(--accent-color); /* 文字颜色 - 悬停时变为强调色 */
}

/* Logo图标样式 - 品牌图标的样式设置 */
.logo-icon {
    font-size: 1.8rem; /* 字体大小 - 图标大小设置 */
    animation: heartbeat 2s ease-in-out infinite; /* 动画 - 无限循环的心跳动画 */
    filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.3)); /* 滤镜 - 添加粉色投影效果 */
}

/* 品牌文字样式 - 品牌名称的文字效果 */
.brand-text {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* 背景 - 渐变色背景 */
    -webkit-background-clip: text; /* 背景裁剪 - 将背景裁剪为文字形状 */
    -webkit-text-fill-color: transparent; /* 文字填充 - 设置文字为透明显示背景 */
    background-clip: text; /* 背景裁剪 - 标准属性 */
    font-family: 'Dancing Script', cursive; /* 字体族 - 使用手写风格字体 */
    font-size: 1.5rem; /* 字体大小 - 品牌文字大小 */
}

/* 导航菜单样式 */
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.8);
    padding: var(--spacing-sm);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 157, 0.2);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.15);
}

/* 导航链接 - 主要导航菜单项的样式 */
.nav-link {
    display: flex; /* 弹性布局 - 使用flex排列链接内容 */
    align-items: center; /* 垂直居中 - 链接内容垂直居中 */
    gap: var(--spacing-xs); /* 间距 - 链接内容之间的极小间距 */
    padding: 12px 20px; /* 内边距 - 上下12px，左右20px */
    text-decoration: none; /* 文本装饰 - 移除链接下划线 */
    color: var(--text-secondary); /* 文字颜色 - 使用次要文字色 */
    border-radius: 20px; /* 圆角 - 20px圆角创造胶囊形状 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 - 平滑的悬停效果 */
    position: relative; /* 相对定位 - 为伪元素提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏动画元素溢出 */
    font-weight: 500; /* 字体粗细 - 中等粗细 */
    font-size: 0.95rem; /* 字体大小 - 略小于基础字体 */
}

/* 导航链接光效 - 悬停时的光线扫过效果 */
.nav-link::before {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于父元素定位 */
    top: 0; /* 顶部位置 - 从顶部开始 */
    left: -100%; /* 左侧位置 - 初始位置在左侧外部 */
    width: 100%; /* 宽度 - 与父元素同宽 */
    height: 100%; /* 高度 - 与父元素同高 */
    background: linear-gradient(90deg, transparent, rgba(255, 107, 157, 0.1), transparent); /* 背景 - 透明到粉色的渐变光效 */
    transition: left 0.5s ease; /* 过渡动画 - 光效移动动画 */
}

/* 导航链接悬停光效 - 悬停时光效扫过 */
.nav-link:hover::before {
    left: 100%; /* 左侧位置 - 悬停时光效从左扫到右 */
}

/* 导航链接悬停效果 - 鼠标悬停时的样式变化 */
.nav-link:hover {
    color: var(--primary-color); /* 文字颜色 - 悬停时变为主色调 */
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 107, 157, 0.05)); /* 背景 - 渐变粉色背景 */
    transform: translateY(-2px) scale(1.05); /* 变换 - 向上移动并轻微放大 */
    box-shadow: 0 8px 20px rgba(255, 107, 157, 0.2); /* 阴影 - 粉色阴影增强悬浮感 */
}

.nav-link.active {
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 8px 20px rgba(255, 107, 157, 0.4);
    transform: translateY(-1px);
}

.nav-link.active::before {
    display: none;
}

/* 导航链接图标 - 导航菜单项中的图标样式 */
.nav-link i {
    font-size: 1rem; /* 字体大小 - 图标大小设置 */
    transition: transform 0.3s ease; /* 过渡动画 - 平滑的变换效果 */
}

/* 导航链接图标悬停效果 - 悬停时图标的变化 */
.nav-link:hover i {
    transform: scale(1.2) rotate(5deg); /* 变换 - 悬停时图标放大并轻微旋转 */
}

/* 移动端菜单按钮 - 小屏幕设备上的汉堡菜单按钮 */
.nav-toggle {
    display: none; /* 显示 - 默认隐藏，仅在移动端显示 */
    flex-direction: column; /* 弹性方向 - 垂直排列按钮线条 */
    gap: 4px; /* 间距 - 线条之间4px间距 */
    cursor: pointer; /* 光标 - 鼠标悬停时显示手型光标 */
    padding: var(--spacing-sm); /* 内边距 - 小间距增加点击区域 */
    border-radius: var(--radius-sm); /* 圆角 - 小圆角 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的状态变化 */
}

/* 菜单按钮悬停效果 - 鼠标悬停时的背景变化 */
.nav-toggle:hover {
    background: rgba(255, 107, 157, 0.1); /* 背景色 - 悬停时显示淡粉色背景 */
}

/* 菜单按钮线条 - 汉堡菜单的三条横线 */
.nav-toggle span {
    width: 28px; /* 宽度 - 线条宽度28px */
    height: 3px; /* 高度 - 线条高度3px */
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)); /* 背景 - 渐变色线条 */
    border-radius: 2px; /* 圆角 - 线条轻微圆角 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 - 平滑的变换动画 */
}

/* 菜单按钮激活状态 - 第一条线旋转45度 */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px); /* 变换 - 旋转并移动形成X形状的上半部分 */
}

/* 菜单按钮激活状态 - 第二条线隐藏 */
.nav-toggle.active span:nth-child(2) {
    opacity: 0; /* 透明度 - 中间线条完全透明 */
}

/* 菜单按钮激活状态 - 第三条线旋转-45度 */
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px); /* 变换 - 旋转并移动形成X形状的下半部分 */
}

/* ===== 主要内容区域 ===== */
/* 主内容区域 - 页面的主要内容容器 */
.main-content {
    margin-top: 70px; /* 上外边距 - 为固定导航栏留出空间 */
}

/* ===== 英雄区域样式 ===== */
.hero-section {
    min-height: 100vh;
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 浮动装饰元素 - 英雄区域的装饰性浮动图标容器 */
.floating-elements {
    position: absolute; /* 绝对定位 - 相对于英雄区域定位 */
    top: 0; /* 顶部位置 - 覆盖整个英雄区域 */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    width: 100%; /* 宽度 - 覆盖整个宽度 */
    height: 100%; /* 高度 - 覆盖整个高度 */
    pointer-events: none; /* 指针事件 - 不阻挡用户交互 */
    z-index: 1; /* 层级 - 在背景之上，内容之下 */
}

/* 浮动元素通用样式 - 所有装饰图标的基础样式 */
.floating-elements > div {
    position: absolute; /* 绝对定位 - 在容器内自由定位 */
    font-size: var(--font-2xl); /* 字体大小 - 使用2倍大字体变量 */
    opacity: 0.7; /* 透明度 - 半透明效果不干扰主内容 */
    animation: float 6s ease-in-out infinite; /* 动画 - 6秒浮动循环动画 */
}

/* 爱心装饰 - 左上角浮动的爱心图标 */
.floating-heart {
    top: 20%; /* 顶部位置 - 距离顶部20% */
    left: 10%; /* 左侧位置 - 距离左侧10% */
    animation-delay: 0s; /* 动画延迟 - 立即开始动画 */
}

/* 星星装饰 - 右上角浮动的星星图标 */
.floating-star {
    top: 30%; /* 顶部位置 - 距离顶部30% */
    right: 15%; /* 右侧位置 - 距离右侧15% */
    animation-delay: 1s; /* 动画延迟 - 1秒后开始动画 */
}

/* 花朵装饰 - 左下角浮动的花朵图标 */
.floating-flower {
    bottom: 30%; /* 底部位置 - 距离底部30% */
    left: 20%; /* 左侧位置 - 距离左侧20% */
    animation-delay: 2s; /* 动画延迟 - 2秒后开始动画 */
}

/* 蝴蝶装饰 - 右中部浮动的蝴蝶图标 */
.floating-butterfly {
    top: 60%; /* 顶部位置 - 距离顶部60% */
    right: 25%; /* 右侧位置 - 距离右侧25% */
    animation-delay: 3s; /* 动画延迟 - 3秒后开始动画 */
}

/* 音乐装饰 - 右下角浮动的音乐图标 */
.floating-music {
    bottom: 20%; /* 底部位置 - 距离底部20% */
    right: 10%; /* 右侧位置 - 距离右侧10% */
    animation-delay: 4s; /* 动画延迟 - 4秒后开始动画 */
}

/* 书本装饰 - 左下角浮动的书本图标 */
.floating-book {
    top: 80%; /* 顶部位置 - 距离顶部80% */
    left: 30%; /* 左侧位置 - 距离左侧30% */
    animation-delay: 5s; /* 动画延迟 - 5秒后开始动画 */
}

/* 英雄内容 - 英雄区域的主要文字内容 */
.hero-content {
    text-align: center; /* 文本对齐 - 内容居中对齐 */
    max-width: 800px; /* 最大宽度 - 限制内容宽度提高可读性 */
    z-index: 2; /* 层级 - 确保内容在装饰元素之上 */
    position: relative; /* 相对定位 - 为层级设置提供参考 */
    padding: var(--spacing-2xl); /* 内边距 - 2倍大间距 */
    animation: fadeInUp 1s ease-out; /* 动画 - 1秒向上淡入动画 */
}

/* 英雄标题 - 主要标题文字 */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem); /* 字体大小 - 响应式字体，最小2.5rem，最大4rem */
    font-weight: 700; /* 字体粗细 - 粗体显示 */
    color: var(--text-primary); /* 文字颜色 - 使用主要文字色 */
    margin-bottom: var(--spacing-md); /* 下外边距 - 与下方内容的中等间距 */
    line-height: 1.2; /* 行高 - 紧凑的行间距 */
    position: relative; /* 相对定位 - 为装饰线提供定位参考 */
}

/* 英雄标题装饰线 - 标题下方的渐变装饰线 */
.hero-title::after {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于标题定位 */
    bottom: -10px; /* 底部位置 - 距离标题底部10px */
    left: 50%; /* 左侧位置 - 从中心开始 */
    transform: translateX(-50%); /* 变换 - 水平居中对齐 */
    width: 100px; /* 宽度 - 装饰线宽度100px */
    height: 4px; /* 高度 - 装饰线高度4px */
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); /* 背景 - 渐变色装饰线 */
    border-radius: 2px; /* 圆角 - 轻微圆角 */
    animation: slideIn 1s ease-out 0.5s both; /* 动画 - 0.5秒延迟后滑入动画 */
}

.title-line {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.gradient-text {
    background: linear-gradient(45deg, var(--primary-color), var(--purple-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 英雄副标题 - 标题下方的描述文字 */
.hero-subtitle {
    font-size: var(--font-lg); /* 字体大小 - 使用大字体变量 */
    color: var(--text-secondary); /* 文字颜色 - 使用次要文字色 */
    margin-bottom: var(--spacing-2xl); /* 下外边距 - 与按钮组的2倍大间距 */
    line-height: 1.8; /* 行高 - 舒适的行间距提高可读性 */
}

/* 按钮组 - 英雄区域的操作按钮容器 */
.hero-buttons {
    display: flex; /* 弹性布局 - 使用flex排列按钮 */
    gap: var(--spacing-lg); /* 间距 - 按钮之间的大间距 */
    justify-content: center; /* 水平居中 - 按钮组居中对齐 */
    flex-wrap: wrap; /* 换行 - 小屏幕时按钮可换行 */
}

/* ===== 按钮样式 ===== */
/* 通用按钮 - 所有按钮的基础样式 */
.btn {
    display: inline-flex; /* 内联弹性布局 - 按钮内容水平排列 */
    align-items: center; /* 垂直居中 - 按钮内容垂直居中 */
    gap: var(--spacing-sm); /* 间距 - 图标和文字之间的小间距 */
    padding: var(--spacing-md) var(--spacing-xl); /* 内边距 - 上下中等间距，左右超大间距 */
    border: none; /* 边框 - 移除默认边框 */
    border-radius: var(--radius-lg); /* 圆角 - 使用大圆角变量 */
    text-decoration: none; /* 文本装饰 - 移除链接下划线 */
    font-weight: 500; /* 字体粗细 - 中等粗细 */
    font-size: var(--font-base); /* 字体大小 - 使用基础字体变量 */
    cursor: pointer; /* 光标 - 鼠标悬停时显示手型光标 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的悬停效果 */
    position: relative; /* 相对定位 - 为光效元素提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏光效溢出 */
}

/* 主按钮 - 主要操作按钮样式 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* 背景 - 对角线渐变背景 */
    color: white; /* 文字颜色 - 白色文字 */
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3); /* 阴影 - 粉色阴影增加立体感 */
}

/* 主按钮悬停效果 - 鼠标悬停时的样式变化 */
.btn-primary:hover {
    transform: translateY(-2px); /* 变换 - 向上移动2px创造浮起效果 */
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4); /* 阴影 - 悬停时阴影更明显 */
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); /* 背景 - 悬停时渐变方向反转 */
}

/* 次按钮 - 次要操作按钮样式 */
.btn-secondary {
    background: transparent; /* 背景 - 透明背景 */
    color: var(--primary-color); /* 文字颜色 - 主色调文字 */
    border: 2px solid var(--primary-color); /* 边框 - 主色调边框 */
    backdrop-filter: blur(10px); /* 背景模糊 - 毛玻璃效果 */
}

/* 次按钮悬停效果 - 鼠标悬停时的样式变化 */
.btn-secondary:hover {
    background: var(--primary-color); /* 背景 - 悬停时填充主色调背景 */
    color: white; /* 文字颜色 - 悬停时文字变白色 */
    transform: translateY(-2px); /* 变换 - 向上移动2px创造浮起效果 */
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.3); /* 阴影 - 悬停时添加阴影 */
}

/* ===== 区域标题样式 ===== */
/* 区域主标题 - 各个区域的主要标题样式 */
.section-title {
    font-size: var(--font-3xl); /* 字体大小 - 使用3倍大字体变量 */
    font-weight: 600; /* 字体粗细 - 中等粗体显示 */
    text-align: center; /* 文本对齐 - 居中对齐 */
    margin-bottom: var(--spacing-md); /* 下外边距 - 与副标题的中等间距 */
    color: var(--text-primary); /* 文字颜色 - 使用主要文字色 */
    display: flex; /* 弹性布局 - 使用flex排列标题元素 */
    align-items: center; /* 垂直居中 - 标题元素垂直居中对齐 */
    justify-content: center; /* 水平居中 - 标题元素水平居中对齐 */
    gap: var(--spacing-sm); /* 间距 - 标题元素之间的小间距 */
}

/* 区域副标题 - 区域主标题下方的描述文字 */
.section-subtitle {
    text-align: center; /* 文本对齐 - 居中对齐 */
    color: var(--text-light); /* 文字颜色 - 使用浅色文字 */
    font-size: var(--font-lg); /* 字体大小 - 使用大字体变量 */
    margin-bottom: var(--spacing-3xl); /* 下外边距 - 与内容区域的3倍大间距 */
}

/* ===== 爱好展示区域 ===== */
/* 爱好区域容器 - 展示个人爱好的主要区域 */
.hobbies-section {
    padding: var(--spacing-3xl) 0; /* 内边距 - 上下3倍大间距 */
    background: var(--bg-primary); /* 背景色 - 使用主要背景色 */
}

/* 爱好网格布局 - 爱好卡片的网格容器 */
.hobbies-grid {
    display: grid; /* 网格布局 - 使用CSS Grid排列卡片 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 网格列 - 自适应列数，最小300px */
    gap: var(--spacing-xl); /* 间距 - 卡片之间的超大间距 */
    margin-top: var(--spacing-2xl); /* 上外边距 - 与标题的2倍大间距 */
}

/* 爱好卡片样式 - 单个爱好展示卡片 */
.hobby-card {
    background: var(--bg-card); /* 背景色 - 使用卡片背景色变量 */
    border-radius: var(--radius-xl); /* 圆角 - 使用超大圆角变量 */
    padding: var(--spacing-2xl); /* 内边距 - 2倍大间距 */
    text-align: center; /* 文本对齐 - 内容居中对齐 */
    box-shadow: var(--shadow-lg); /* 阴影 - 使用大阴影变量 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的悬停效果 */
    position: relative; /* 相对定位 - 为装饰元素提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏装饰元素溢出 */
    border: 1px solid rgba(255, 107, 157, 0.1); /* 边框 - 淡粉色边框 */
}

/* 爱好卡片顶部装饰条 - 卡片顶部的渐变装饰线 */
.hobby-card::before {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于卡片定位 */
    top: 0; /* 顶部位置 - 贴着卡片顶部 */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    right: 0; /* 右侧位置 - 到右边缘结束 */
    height: 4px; /* 高度 - 装饰条高度4px */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* 背景 - 渐变色装饰条 */
    transform: scaleX(0); /* 变换 - 初始状态水平缩放为0 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的展开动画 */
}

/* 爱好卡片悬停效果 - 鼠标悬停时的样式变化 */
.hobby-card:hover {
    transform: translateY(-10px); /* 变换 - 向上移动10px创造浮起效果 */
    box-shadow: var(--shadow-xl); /* 阴影 - 悬停时使用超大阴影 */
}

/* 爱好卡片悬停装饰条 - 悬停时装饰条展开 */
.hobby-card:hover::before {
    transform: scaleX(1); /* 变换 - 悬停时装饰条完全展开 */
}

/* 卡片图标 - 爱好卡片顶部的圆形图标 */
.card-icon {
    width: 80px; /* 宽度 - 图标容器宽度80px */
    height: 80px; /* 高度 - 图标容器高度80px */
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color)); /* 背景 - 对角线渐变背景 */
    border-radius: var(--radius-full); /* 圆角 - 完全圆形 */
    display: flex; /* 弹性布局 - 使用flex居中图标 */
    align-items: center; /* 垂直居中 - 图标垂直居中 */
    justify-content: center; /* 水平居中 - 图标水平居中 */
    margin: 0 auto var(--spacing-lg); /* 外边距 - 水平居中，下方大间距 */
    font-size: var(--font-2xl); /* 字体大小 - 使用2倍大字体变量 */
    color: var(--text-white); /* 文字颜色 - 白色图标 */
    box-shadow: var(--shadow-pink); /* 阴影 - 粉色阴影效果 */
}

/* 卡片标题 - 爱好卡片的主标题 */
.card-title {
    font-size: var(--font-xl); /* 字体大小 - 使用超大字体变量 */
    font-weight: 600; /* 字体粗细 - 中等粗体 */
    margin-bottom: var(--spacing-md); /* 下外边距 - 与描述的中等间距 */
    color: var(--text-primary); /* 文字颜色 - 使用主要文字色 */
}

/* 卡片描述 - 爱好卡片的详细描述文字 */
.card-description {
    color: var(--text-light); /* 文字颜色 - 使用浅色文字 */
    line-height: 1.7; /* 行高 - 舒适的行间距 */
    margin-bottom: var(--spacing-lg); /* 下外边距 - 与链接的大间距 */
}

/* 卡片链接 - 爱好卡片底部的操作链接 */
.card-link {
    display: inline-flex; /* 内联弹性布局 - 链接内容水平排列 */
    align-items: center; /* 垂直居中 - 链接内容垂直居中 */
    gap: var(--spacing-sm); /* 间距 - 文字和图标之间的小间距 */
    color: var(--primary-color); /* 文字颜色 - 使用主色调 */
    text-decoration: none; /* 文本装饰 - 移除链接下划线 */
    font-weight: 500; /* 字体粗细 - 中等粗细 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的悬停效果 */
}

/* 卡片链接悬停效果 - 悬停时间距增大 */
.card-link:hover {
    gap: var(--spacing-md); /* 间距 - 悬停时间距增大到中等 */
}

/* ===== 最新动态区域 ===== */
/* 动态区域容器 - 展示最新动态的主要区域 */
.updates-section {
    padding: var(--spacing-3xl) 0; /* 内边距 - 上下3倍大间距 */
    background: var(--bg-secondary); /* 背景色 - 使用次要背景色 */
}

/* 动态网格布局 - 动态卡片的网格容器 */
.updates-grid {
    display: grid; /* 网格布局 - 使用CSS Grid排列卡片 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 网格列 - 自适应列数，最小300px */
    gap: var(--spacing-xl); /* 间距 - 卡片之间的超大间距 */
}

/* 动态卡片 - 单个动态信息卡片 */
.update-card {
    background: var(--bg-primary); /* 背景色 - 使用主要背景色 */
    border-radius: var(--radius-lg); /* 圆角 - 使用大圆角变量 */
    padding: var(--spacing-xl); /* 内边距 - 超大间距 */
    box-shadow: var(--shadow-md); /* 阴影 - 使用中等阴影变量 */
    transition: var(--transition-normal); /* 过渡动画 - 平滑的悬停效果 */
    border-left: 4px solid var(--primary-color); /* 左边框 - 主色调强调边框 */
}

/* 动态卡片悬停效果 - 鼠标悬停时的样式变化 */
.update-card:hover {
    transform: translateY(-5px); /* 变换 - 向上移动5px创造浮起效果 */
    box-shadow: var(--shadow-lg); /* 阴影 - 悬停时使用大阴影 */
}

/* 动态日期 - 动态卡片中的日期信息 */
.update-date {
    color: var(--primary-color); /* 文字颜色 - 使用主色调突出日期 */
    font-size: var(--font-sm); /* 字体大小 - 使用小字体变量 */
    font-weight: 500; /* 字体粗细 - 中等粗细 */
    margin-bottom: var(--spacing-sm); /* 下外边距 - 与标题的小间距 */
}

/* 动态标题 - 动态卡片的主标题 */
.update-title {
    font-size: var(--font-lg); /* 字体大小 - 使用大字体变量 */
    font-weight: 600; /* 字体粗细 - 中等粗体 */
    margin-bottom: var(--spacing-sm); /* 下外边距 - 与内容的小间距 */
    color: var(--text-primary); /* 文字颜色 - 使用主要文字色 */
}

/* 动态内容 - 动态卡片的详细内容 */
.update-content {
    color: var(--text-light); /* 文字颜色 - 使用浅色文字 */
    line-height: 1.6; /* 行高 - 舒适的行间距 */
}

/* ===== 页脚样式 ===== */
/* 页脚容器 - 网站底部的页脚区域 */
.footer {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); /* 背景 - 深色对角线渐变背景 */
    color: var(--text-white); /* 文字颜色 - 白色文字 */
    padding: var(--spacing-3xl) 0 var(--spacing-lg); /* 内边距 - 上方3倍大间距，下方大间距 */
    position: relative; /* 相对定位 - 为装饰元素提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏装饰元素溢出 */
}

/* 页脚背景装饰 - 爱心图案背景装饰 */
.footer::before {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 覆盖整个页脚 */
    top: 0; /* 顶部位置 - 从顶部开始 */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    right: 0; /* 右侧位置 - 到右边缘结束 */
    bottom: 0; /* 底部位置 - 到底部结束 */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><text x="10" y="15" text-anchor="middle" font-size="12" fill="rgba(255,107,157,0.1)">💖</text></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>') repeat; /* 背景 - SVG爱心图案重复背景 */
    opacity: 0.3; /* 透明度 - 半透明装饰效果 */
    animation: floatSlow 30s linear infinite; /* 动画 - 30秒慢速浮动循环 */
}

/* 页脚内容容器 - 页脚主要内容的网格布局 */
.footer-content {
    display: grid; /* 网格布局 - 使用CSS Grid排列页脚区域 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 网格列 - 自适应列数，最小250px */
    gap: var(--spacing-2xl); /* 间距 - 页脚区域之间的2倍大间距 */
    margin-bottom: var(--spacing-2xl); /* 下外边距 - 与版权信息的2倍大间距 */
    position: relative; /* 相对定位 - 为层级设置提供参考 */
    z-index: 2; /* 层级 - 确保内容在装饰元素之上 */
}

/* 页脚区域 - 单个页脚内容区域 */
.footer-section {
    position: relative; /* 相对定位 - 为子元素提供定位参考 */
}

/* 页脚区域主标题 - 页脚各区域的主要标题 */
.footer-section h3 {
    font-size: var(--font-xl); /* 字体大小 - 使用超大字体变量 */
    font-weight: 700; /* 字体粗细 - 粗体显示 */
    margin-bottom: var(--spacing-lg); /* 下外边距 - 与内容的大间距 */
    display: flex; /* 弹性布局 - 使用flex排列标题元素 */
    align-items: center; /* 垂直居中 - 标题元素垂直居中 */
    gap: var(--spacing-sm); /* 间距 - 标题元素之间的小间距 */
    color: var(--primary-light); /* 文字颜色 - 使用浅色主色调 */
    position: relative; /* 相对定位 - 为装饰线提供定位参考 */
}

/* 页脚主标题装饰线 - 主标题下方的渐变装饰线 */
.footer-section h3::after {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于标题定位 */
    bottom: -8px; /* 底部位置 - 距离标题底部8px */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    width: 50px; /* 宽度 - 装饰线宽度50px */
    height: 3px; /* 高度 - 装饰线高度3px */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); /* 背景 - 渐变色装饰线 */
    border-radius: 2px; /* 圆角 - 轻微圆角 */
}

/* 页脚区域副标题 - 页脚各区域的次要标题 */
.footer-section h4 {
    font-size: var(--font-lg); /* 字体大小 - 使用大字体变量 */
    font-weight: 600; /* 字体粗细 - 中等粗体 */
    margin-bottom: var(--spacing-lg); /* 下外边距 - 与内容的大间距 */
    color: var(--primary-light); /* 文字颜色 - 使用浅色主色调 */
    position: relative; /* 相对定位 - 为装饰元素提供定位参考 */
    display: flex; /* 弹性布局 - 使用flex排列标题元素 */
    align-items: center; /* 垂直居中 - 标题元素垂直居中 */
    gap: var(--spacing-sm); /* 间距 - 标题元素之间的小间距 */
}

/* 页脚副标题前置图标 - 副标题前的闪烁星星图标 */
.footer-section h4::before {
    content: '✨'; /* 内容 - 星星emoji图标 */
    font-size: 1.2rem; /* 字体大小 - 图标大小 */
    animation: sparkle 2s ease-in-out infinite; /* 动画 - 2秒闪烁循环动画 */
}

/* 页脚副标题装饰线 - 副标题下方的渐变装饰线 */
.footer-section h4::after {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于标题定位 */
    bottom: -6px; /* 底部位置 - 距离标题底部6px */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    width: 30px; /* 宽度 - 装饰线宽度30px */
    height: 2px; /* 高度 - 装饰线高度2px */
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color)); /* 背景 - 渐变色装饰线 */
    border-radius: 1px; /* 圆角 - 轻微圆角 */
}

/* 页脚描述文本 - 页脚区域的说明文字 */
.footer-description {
    color: rgba(255, 255, 255, 0.85); /* 文字颜色 - 半透明白色 */
    line-height: 1.7; /* 行高 - 增加行间距提高可读性 */
    margin-bottom: var(--spacing-lg); /* 下外边距 - 与下方元素的大间距 */
}

/* 页脚列表容器 - 页脚区域的无序列表 */
.footer-section ul {
    list-style: none; /* 列表样式 - 移除默认列表标记 */
    padding: 0; /* 内边距 - 移除默认内边距 */
}

/* 页脚列表项 - 页脚区域的列表项目 */
.footer-section ul li {
    margin-bottom: var(--spacing-md); /* 下外边距 - 列表项之间的中等间距 */
    position: relative; /* 相对定位 - 为图标提供定位参考 */
    padding-left: var(--spacing-lg); /* 左内边距 - 为自定义图标留出空间 */
    transition: var(--transition-normal); /* 过渡 - 平滑的变换效果 */
}

/* 页脚列表项图标 - 列表项前的花朵图标 */
.footer-section ul li::before {
    content: '🌸'; /* 内容 - 花朵emoji作为列表项图标 */
    position: absolute; /* 绝对定位 - 相对于列表项定位 */
    left: 0; /* 左侧位置 - 放置在列表项左侧 */
    top: 50%; /* 顶部位置 - 垂直居中 */
    transform: translateY(-50%); /* 变换 - 精确垂直居中 */
    font-size: 0.9rem; /* 字体大小 - 图标大小设置 */
    transition: var(--transition-normal); /* 过渡 - 平滑的变换效果 */
}

/* 页脚列表项图标悬停效果 - 鼠标悬停时的图标动画 */
.footer-section ul li:hover::before {
    transform: translateY(-50%) scale(1.2) rotate(10deg); /* 变换 - 图标放大并旋转 */
}

/* 页脚列表项悬停效果 - 鼠标悬停时的移动动画 */
.footer-section ul li:hover {
    transform: translateX(5px); /* 变换 - 列表项向右移动5px */
}

/* 页脚链接 - 页脚列表项中的链接 */
.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8); /* 文字颜色 - 半透明白色 */
    text-decoration: none; /* 文本装饰 - 移除下划线 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡 - 平滑的变换效果 */
    position: relative; /* 相对定位 - 为装饰线提供定位参考 */
    font-weight: 500; /* 字体粗细 - 中等粗体 */
}

/* 页脚链接装饰线 - 链接下方的渐变装饰线 */
.footer-section ul li a::after {
    content: ''; /* 内容 - 空内容创建装饰元素 */
    position: absolute; /* 绝对定位 - 相对于链接定位 */
    bottom: -2px; /* 底部位置 - 距离链接底部2px */
    left: 0; /* 左侧位置 - 从左边缘开始 */
    width: 0; /* 宽度 - 初始宽度为0 */
    height: 2px; /* 高度 - 装饰线高度2px */
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); /* 背景 - 渐变色装饰线 */
    transition: width 0.3s ease; /* 过渡 - 宽度变化的平滑效果 */
}

/* 页脚链接悬停效果 - 鼠标悬停时的样式变化 */
.footer-section ul li a:hover {
    color: var(--primary-light); /* 文字颜色 - 变为浅色主色调 */
    transform: translateY(-1px); /* 变换 - 向上移动1px */
}

/* 页脚链接悬停装饰线 - 悬停时装饰线展开效果 */
.footer-section ul li a:hover::after {
    width: 100%; /* 宽度 - 装饰线展开至100%宽度 */
}

/* 社交媒体链接容器 - 社交媒体图标的容器 */
.social-links {
    display: flex; /* 弹性布局 - 使用flex排列社交媒体图标 */
    gap: var(--spacing-md); /* 间距 - 图标之间的中等间距 */
    margin-top: var(--spacing-lg); /* 上外边距 - 与上方元素的大间距 */
}

/* 社交媒体链接 - 单个社交媒体图标链接 */
.social-links a {
    width: 45px; /* 宽度 - 图标容器宽度45px */
    height: 45px; /* 高度 - 图标容器高度45px */
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(168, 230, 207, 0.2)); /* 背景 - 渐变色背景 */
    border-radius: var(--radius-full); /* 圆角 - 完全圆形 */
    display: flex; /* 弹性布局 - 使用flex居中图标 */
    align-items: center; /* 垂直居中 - 图标垂直居中 */
    justify-content: center; /* 水平居中 - 图标水平居中 */
    color: var(--text-white); /* 文字颜色 - 白色图标 */
    text-decoration: none; /* 文本装饰 - 移除下划线 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡 - 平滑的变换效果 */
    border: 2px solid rgba(255, 107, 157, 0.3); /* 边框 - 半透明粉色边框 */
    position: relative; /* 相对定位 - 为光效提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏光效溢出部分 */
}

/* 社交媒体链接光效 - 悬停时的光线扫过效果 */
.social-links a::before {
    content: ''; /* 内容 - 空内容创建光效元素 */
    position: absolute; /* 绝对定位 - 相对于链接定位 */
    top: 0; /* 顶部位置 - 从顶部开始 */
    left: -100%; /* 左侧位置 - 初始位置在左侧外部 */
    width: 100%; /* 宽度 - 覆盖整个链接宽度 */
    height: 100%; /* 高度 - 覆盖整个链接高度 */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* 背景 - 半透明白色光效 */
    transition: left 0.5s ease; /* 过渡 - 光效移动的平滑效果 */
}

/* 社交媒体链接悬停光效 - 悬停时光效从左到右扫过 */
.social-links a:hover::before {
    left: 100%; /* 左侧位置 - 光效移动到右侧外部 */
}

/* 社交媒体链接悬停效果 - 鼠标悬停时的样式变化 */
.social-links a:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* 背景 - 变为主色调渐变 */
    transform: translateY(-3px) scale(1.1); /* 变换 - 向上移动并放大 */
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4); /* 阴影 - 增强阴影效果 */
    border-color: var(--primary-color); /* 边框颜色 - 变为主色调 */
}

/* 页脚底部 - 版权信息区域 */
.footer-bottom {
    text-align: center; /* 文本对齐 - 居中对齐 */
    padding-top: var(--spacing-xl); /* 上内边距 - 与上方内容的超大间距 */
    border-top: 2px solid rgba(255, 107, 157, 0.2); /* 上边框 - 半透明粉色分割线 */
    color: rgba(255, 255, 255, 0.7); /* 文字颜色 - 半透明白色 */
    position: relative; /* 相对定位 - 为层级设置提供参考 */
    z-index: 2; /* 层级 - 确保内容在装饰元素之上 */
    font-size: var(--font-sm); /* 字体大小 - 使用小字体变量 */
}

/* 页脚底部图标 - 版权信息中的心形图标 */
.footer-bottom i {
    color: var(--primary-color); /* 颜色 - 使用主色调 */
    animation: heartbeat 2s ease-in-out infinite; /* 动画 - 2秒心跳循环动画 */
    margin: 0 var(--spacing-xs); /* 外边距 - 左右超小间距 */
}

/* ===== 统计卡片样式 ===== */
/* 统计区域 - 统计数据展示区域 */
.stats-section {
    margin: 4rem 0; /* 外边距 - 上下4rem间距 */
}

/* 统计网格 - 统计卡片的网格布局 */
.stats-grid {
    display: grid; /* 网格布局 - 使用CSS Grid排列统计卡片 */
    grid-template-columns: repeat(4, 1fr); /* 网格列 - 4列等宽布局 */
    gap: 2rem; /* 间距 - 卡片之间的2rem间距 */
    margin-top: 3rem; /* 上外边距 - 与标题的3rem间距 */
}

/* 统计卡片 - 单个统计数据卡片 */
.stat-card {
    background: white; /* 背景 - 白色背景 */
    padding: 2.5rem 2rem; /* 内边距 - 上下2.5rem，左右2rem */
    border-radius: 25px; /* 圆角 - 大圆角设计 */
    text-align: center; /* 文本对齐 - 居中对齐 */
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.1); /* 阴影 - 轻微粉色阴影 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡 - 平滑的变换效果 */
    position: relative; /* 相对定位 - 为光效提供定位参考 */
    overflow: hidden; /* 溢出隐藏 - 隐藏光效溢出部分 */
    border: 2px solid rgba(255, 107, 157, 0.1); /* 边框 - 半透明粉色边框 */
}

/* 统计卡片光效 - 悬停时的光线扫过效果 */
.stat-card::before {
    content: ''; /* 内容 - 空内容创建光效元素 */
    position: absolute; /* 绝对定位 - 相对于卡片定位 */
    top: 0; /* 顶部位置 - 从顶部开始 */
    left: -100%; /* 左侧位置 - 初始位置在左侧外部 */
    width: 100%; /* 宽度 - 覆盖整个卡片宽度 */
    height: 100%; /* 高度 - 覆盖整个卡片高度 */
    background: linear-gradient(90deg, transparent, rgba(255, 107, 157, 0.1), transparent); /* 背景 - 半透明粉色光效 */
    transition: left 0.6s ease; /* 过渡 - 光效移动的平滑效果 */
}

/* 统计卡片悬停光效 - 悬停时光效从左到右扫过 */
.stat-card:hover::before {
    left: 100%; /* 左侧位置 - 光效移动到右侧外部 */
}

/* 统计卡片悬停效果 - 鼠标悬停时的样式变化 */
.stat-card:hover {
    transform: translateY(-15px) scale(1.05); /* 变换 - 向上移动并放大 */
    box-shadow: 0 20px 40px rgba(255, 107, 157, 0.2); /* 阴影 - 增强阴影效果 */
    border-color: var(--primary-color); /* 边框颜色 - 变为主色调 */
}

/* 统计卡片背景色 - 第一个卡片的粉色渐变背景 */
.stat-card:nth-child(1) {
    background: linear-gradient(135deg, #fff 0%, #fef7f7 100%); /* 背景 - 白色到淡粉色渐变 */
}

/* 统计卡片背景色 - 第二个卡片的蓝色渐变背景 */
.stat-card:nth-child(2) {
    background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%); /* 背景 - 白色到淡蓝色渐变 */
}

/* 统计卡片背景色 - 第三个卡片的绿色渐变背景 */
.stat-card:nth-child(3) {
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%); /* 背景 - 白色到淡绿色渐变 */
}

/* 统计卡片背景色 - 第四个卡片的黄色渐变背景 */
.stat-card:nth-child(4) {
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%); /* 背景 - 白色到淡黄色渐变 */
}

/* 统计图标 - 统计卡片中的图标 */
.stat-icon {
    font-size: 3.5rem; /* 字体大小 - 超大图标尺寸 */
    margin-bottom: 1.5rem; /* 下外边距 - 与数字的间距 */
    display: inline-block; /* 显示方式 - 行内块元素 */
    transition: all 0.3s ease; /* 过渡 - 平滑的变换效果 */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); /* 滤镜 - 图标阴影效果 */
}

/* 统计图标颜色 - 第一个卡片图标的主色调 */
.stat-card:nth-child(1) .stat-icon {
    color: var(--primary-color); /* 颜色 - 使用主色调 */
}

/* 统计图标颜色 - 第二个卡片图标的蓝色 */
.stat-card:nth-child(2) .stat-icon {
    color: #3b82f6; /* 颜色 - 蓝色 */
}

/* 统计图标颜色 - 第三个卡片图标的次要色调 */
.stat-card:nth-child(3) .stat-icon {
    color: var(--secondary-color); /* 颜色 - 使用次要色调 */
}

/* 统计图标颜色 - 第四个卡片图标的强调色调 */
.stat-card:nth-child(4) .stat-icon {
    color: var(--accent-color); /* 颜色 - 使用强调色调 */
}

/* 统计图标悬停效果 - 鼠标悬停时的图标动画 */
.stat-card:hover .stat-icon {
    transform: scale(1.2) rotate(10deg); /* 变换 - 放大并旋转图标 */
    animation: bounce 0.6s ease; /* 动画 - 0.6秒弹跳动画 */
}

/* 统计数字 - 统计卡片中的数字 */
.stat-number {
    font-size: 3rem; /* 字体大小 - 超大数字尺寸 */
    font-weight: 800; /* 字体粗细 - 超粗体 */
    color: var(--text-primary); /* 文字颜色 - 主要文本颜色 */
    margin-bottom: 0.5rem; /* 下外边距 - 与标签的间距 */
    display: block; /* 显示方式 - 块级元素 */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* 背景 - 渐变色背景 */
    -webkit-background-clip: text; /* 背景裁剪 - 仅在文字区域显示背景 */
    -webkit-text-fill-color: transparent; /* 文字填充 - 透明文字显示背景 */
    background-clip: text; /* 背景裁剪 - 标准属性 */
}

/* 统计标签 - 统计卡片中的描述文字 */
.stat-label {
    color: var(--text-secondary); /* 文字颜色 - 次要文本颜色 */
    font-size: 1.1rem; /* 字体大小 - 稍大的字体 */
    font-weight: 600; /* 字体粗细 - 中等粗体 */
    text-transform: uppercase; /* 文本转换 - 转为大写 */
    letter-spacing: 0.5px; /* 字母间距 - 增加字母间距 */
}

/* ===== 响应式设计 ===== */

/* 平板设备 - 768px及以下屏幕的样式调整 */
@media (max-width: 768px) {
    /* 导航菜单 - 在平板设备上隐藏桌面导航菜单 */
    .nav-menu {
        display: none; /* 显示 - 隐藏桌面导航菜单 */
    }
    
    /* 导航切换按钮 - 在平板设备上显示移动端菜单按钮 */
    .nav-toggle {
        display: flex; /* 显示 - 显示移动端菜单按钮 */
    }
    
    /* 英雄标题 - 在平板设备上调整标题字体大小 */
    .hero-title {
        font-size: var(--font-4xl); /* 字体大小 - 减小标题字体 */
    }
    
    /* 英雄按钮组 - 在平板设备上垂直排列按钮 */
    .hero-buttons {
        flex-direction: column; /* 弹性方向 - 垂直排列按钮 */
        align-items: center; /* 对齐方式 - 居中对齐 */
    }
    
    /* 爱好网格 - 在平板设备上改为单列布局 */
    .hobbies-grid {
        grid-template-columns: 1fr; /* 网格列 - 单列布局 */
        gap: var(--spacing-lg); /* 间距 - 保持大间距 */
    }
    
    /* 动态网格 - 在平板设备上改为单列布局 */
    .updates-grid {
        grid-template-columns: 1fr; /* 网格列 - 单列布局 */
    }
    
    /* 统计网格 - 在平板设备上改为2列布局 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 网格列 - 2列等宽布局 */
        gap: 1.5rem; /* 间距 - 减小间距 */
    }
    
    /* 页脚内容 - 在平板设备上改为单列居中布局 */
    .footer-content {
        grid-template-columns: 1fr; /* 网格列 - 单列布局 */
        text-align: center; /* 文本对齐 - 居中对齐 */
    }
}

/* 手机设备 - 480px及以下屏幕的样式调整 */
@media (max-width: 480px) {
    /* 容器 - 在手机设备上减小容器内边距 */
    .container {
        padding: 0 var(--spacing-md); /* 内边距 - 左右中等间距 */
    }
    
    /* 导航栏容器 - 在手机设备上调整导航栏高度和内边距 */
    .navbar .container {
        padding: 0 var(--spacing-md); /* 内边距 - 左右中等间距 */
        height: 70px; /* 高度 - 减小导航栏高度 */
    }
    
    /* 导航菜单 - 在手机设备上改为全屏侧边菜单 */
    .nav-menu {
        position: fixed; /* 定位 - 固定定位 */
        top: 70px; /* 顶部位置 - 距离顶部70px（导航栏高度） */
        left: -100%; /* 左侧位置 - 初始隐藏在左侧外部 */
        width: 100%; /* 宽度 - 全屏宽度 */
        height: calc(100vh - 70px); /* 高度 - 全屏高度减去导航栏高度 */
        background: rgba(255, 255, 255, 0.98); /* 背景 - 半透明白色背景 */
        backdrop-filter: blur(20px); /* 背景滤镜 - 背景模糊效果 */
        flex-direction: column; /* 弹性方向 - 垂直排列菜单项 */
        justify-content: flex-start; /* 主轴对齐 - 从顶部开始排列 */
        align-items: center; /* 交叉轴对齐 - 居中对齐 */
        padding: 2rem 0; /* 内边距 - 上下2rem间距 */
        transition: left 0.3s ease; /* 过渡 - 左侧位置的平滑过渡 */
        border-radius: 0; /* 圆角 - 移除圆角 */
        box-shadow: none; /* 阴影 - 移除阴影 */
        border: none; /* 边框 - 移除边框 */
    }
    
    /* 导航菜单激活状态 - 菜单展开时的样式 */
    .nav-menu.active {
        left: 0; /* 左侧位置 - 移动到屏幕内 */
        display: flex; /* 确保显示为弹性布局 */
    }
    
    /* 导航菜单项间距调整 */
    .nav-menu li {
        margin: 0.8rem 0; /* 上下外边距，与首页保持一致 */
    }
    
    /* 导航链接 - 在手机设备上调整导航链接样式 */
    .nav-link {
        width: 90%; /* 宽度 - 增加到90%宽度，给文字更多空间 */
        justify-content: flex-start; /* 对齐方式 - 左对齐，图标和文字在一行 */
        padding: 0.8rem 1.5rem; /* 内边距 - 适中的内边距 */
        margin-bottom: 0.8rem; /* 下外边距 - 链接之间的间距 */
        font-size: 0.9rem; /* 字体大小 - 适合手机屏幕的字体 */
        gap: 0.5rem; /* 间距 - 图标和文字之间的间距 */
        min-width: 200px; /* 最小宽度 - 确保按钮有足够宽度 */
    }
    
    /* 英雄内容 - 在手机设备上调整英雄区域内边距 */
    .hero-content {
        padding: var(--spacing-lg); /* 内边距 - 大间距内边距 */
    }
    
    /* 英雄标题 - 在手机设备上进一步减小标题字体 */
    .hero-title {
        font-size: var(--font-3xl); /* 字体大小 - 3倍大字体 */
    }
    
    /* 英雄副标题 - 在手机设备上调整副标题字体大小 */
    .hero-subtitle {
        font-size: var(--font-base); /* 字体大小 - 基础字体大小 */
    }
    
    /* 爱好卡片 - 在手机设备上调整卡片内边距 */
    .hobby-card {
        padding: var(--spacing-lg); /* 内边距 - 大间距内边距 */
    }
    
    /* 卡片图标 - 在手机设备上减小图标尺寸 */
    .card-icon {
        width: 60px; /* 宽度 - 60px图标宽度 */
        height: 60px; /* 高度 - 60px图标高度 */
        font-size: var(--font-xl); /* 字体大小 - 超大字体 */
    }
    
    /* 统计网格 - 在手机设备上改为单列布局 */
    .stats-grid {
        grid-template-columns: 1fr; /* 网格列 - 单列布局 */
        gap: 1rem; /* 间距 - 1rem间距 */
    }
    
    /* 统计卡片 - 在手机设备上调整卡片内边距 */
    .stat-card {
        padding: 2rem 1.5rem; /* 内边距 - 上下2rem，左右1.5rem */
    }
    
    /* 统计数字 - 在手机设备上减小数字字体大小 */
    .stat-number {
        font-size: 2.5rem; /* 字体大小 - 2.5rem数字大小 */
    }
    
    /* 浮动元素 - 在手机设备上调整浮动装饰元素大小 */
    .floating-elements > div {
        font-size: var(--font-lg); /* 字体大小 - 大字体装饰元素 */
    }
}

/* ===== 动画关键帧 ===== */
/* 心跳动画 - 用于心形图标的跳动效果 */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1); /* 变换 - 正常大小 */
    }
    50% {
        transform: scale(1.1); /* 变换 - 放大10% */
    }
}

/* 浮动动画 - 用于装饰元素的浮动效果 */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg); /* 变换 - 初始位置和角度 */
    }
    33% {
        transform: translateY(-20px) rotate(5deg); /* 变换 - 向上移动并轻微旋转 */
    }
    66% {
        transform: translateY(10px) rotate(-3deg); /* 变换 - 向下移动并反向旋转 */
    }
}

/* 弹跳动画 - 用于图标的弹跳效果 */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: scale(1.2) rotate(10deg) translateY(0); /* 变换 - 放大、旋转、基础位置 */
    }
    40%, 43% {
        transform: scale(1.2) rotate(10deg) translateY(-15px); /* 变换 - 向上弹跳 */
    }
    70% {
        transform: scale(1.2) rotate(10deg) translateY(-7px); /* 变换 - 中等高度弹跳 */
    }
    90% {
        transform: scale(1.2) rotate(10deg) translateY(-3px); /* 变换 - 轻微弹跳 */
    }
}

/* 滑入动画 - 用于元素的滑入效果 */
@keyframes slideIn {
    from {
        opacity: 0; /* 透明度 - 完全透明 */
        transform: translateX(-20px); /* 变换 - 从左侧20px开始 */
    }
    to {
        opacity: 1; /* 透明度 - 完全不透明 */
        transform: translateX(0); /* 变换 - 移动到原位置 */
    }
}

/* 闪烁动画 - 用于星星图标的闪烁效果 */
@keyframes sparkle {
    0%, 100% {
        opacity: 0; /* 透明度 - 完全透明 */
        transform: scale(0); /* 变换 - 缩放为0 */
    }
    50% {
        opacity: 1; /* 透明度 - 完全不透明 */
        transform: scale(1); /* 变换 - 正常大小 */
    }
}

/* 慢速浮动动画 - 用于背景装饰的缓慢移动效果 */
@keyframes floatSlow {
    0% {
        transform: translateX(0); /* 变换 - 初始位置 */
    }
    100% {
        transform: translateX(-100px); /* 变换 - 向左移动100px */
    }
}

/* ===== 滚动条样式 ===== */
/* 滚动条宽度 - 自定义滚动条的宽度 */
::-webkit-scrollbar {
    width: 8px; /* 宽度 - 8px滚动条宽度 */
}

/* 滚动条轨道 - 滚动条的背景轨道 */
::-webkit-scrollbar-track {
    background: var(--bg-secondary); /* 背景 - 使用次要背景色 */
}

/* 滚动条滑块 - 可拖拽的滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: var(--primary-light); /* 背景 - 使用浅色主色调 */
    border-radius: var(--radius-sm); /* 圆角 - 小圆角 */
}

/* 滚动条滑块悬停效果 - 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color); /* 背景 - 变为主色调 */
}