/* ==================================================================  文件说明:小月亮摄影 - 全局样式表 */
/* ==================================================================  技术:纯CSS3，无任何框架依赖 */
/* ==================================================================  风格:蓝粉渐变高端风 */

/* ==================================================================  【小白修改区 - 全局颜色和参数】 */
/* ==================================================================  修改下面这些颜色值，整个网站的配色就会跟着变 */
:root {
  /*--- 主色调 ---  【小白修改:主色值，改这里全站变色】 */
  --color-primary: #7dd3fc;  /* 浅天蓝 - 主色（无紫色成分） */
  --color-secondary: #fbb6ce;  /* 浅樱粉 - 副色（暖粉色，无紫色成分） */
  --color-primary-dark: #38bdf8;  /* 天蓝深色 - 按钮悬停用 */
  --color-secondary-dark: #f9a8d4;  /* 粉色深色 - 按钮悬停用 */

  /*--- 渐变 ---  【小白修改:渐变方向和颜色】 */
  --gradient-main: linear-gradient(135deg, #7dd3fc 0%, #fbb6ce 100%);  /* 主渐变:浅蓝->浅粉（无紫） */
  --gradient-hero: linear-gradient(135deg, rgba(125,211,252,0.7) 0%, rgba(251,182,206,0.7) 100%);  /* 英雄区渐变(透明度0.7让背景图可见) */
  --gradient-card: linear-gradient(135deg, #7dd3fc 0%, #93c5fd 100%);  /* 卡片装饰渐变（浅蓝渐变，无紫） */
  --gradient-btn: linear-gradient(135deg, #7dd3fc 0%, #fbb6ce 100%);  /* 按钮渐变 */

  /*--- 文字颜色 ---  【小白修改:文字颜色】 */
  --color-text-primary: #2d3748;  /* 主文字颜色 - 深灰 */
  --color-text-secondary: #718096;  /* 副文字颜色 - 中灰 */
  --color-text-light: #a0aec0;  /* 浅文字颜色 - 浅灰 */
  --color-text-white: #ffffff;  /* 白色文字 */

  /*--- 背景颜色 ---  【小白修改:背景颜色】 */
  --color-bg-white: #ffffff;  /* 白色背景 */
  --color-bg-light: #f7fafc;  /* 浅灰背景 */
  --color-bg-gray: #edf2f7;  /* 灰色背景 */
  --color-bg-dark: #1a202c;  /* 深色背景 - 页脚用 */

  /*--- 边框颜色 ---*/
  --color-border: #e2e8f0;  /* 默认边框色 */
  --color-border-light: #edf2f7;  /* 浅边框色 */

  /*--- 字体 ---  【小白修改:字体名称】 */
  --font-primary: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans CJK SC', sans-serif;  /* 主字体:中文优先 */
  --font-display: 'PingFang SC', 'Microsoft YaHei', sans-serif;  /* 展示字体:标题用 */
  --font-size-xs: 0.75rem;  /* 12px - 极小字号 */
  --font-size-sm: 0.875rem;  /* 14px - 小字号 */
  --font-size-base: 1rem;  /* 16px - 基础字号 */
  --font-size-md: 1.125rem;  /* 18px - 中字号 */
  --font-size-lg: 1.25rem;  /* 20px - 大字号 */
  --font-size-xl: 1.5rem;  /* 24px - 超大字号 */
  --font-size-2xl: 2rem;  /* 32px - 标题字号 */
  --font-size-3xl: 2.5rem;  /* 40px - 大标题字号 */
  --font-size-4xl: 3rem;  /* 48px - 超大标题字号 */
  --font-size-5xl: 3.5rem;  /* 56px - 英雄区字号 */

  /*--- 间距 ---  【小白修改:全局间距基数】 */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;  /* 8px */
  --spacing-md: 1rem;  /* 16px */
  --spacing-lg: 1.5rem;  /* 24px */
  --spacing-xl: 2rem;  /* 32px */
  --spacing-2xl: 3rem;  /* 48px */
  --spacing-3xl: 4rem;  /* 64px */
  --spacing-4xl: 6rem;  /* 96px */

  /*--- 圆角 ---  【小白修改:圆角大小】 */
  --radius-sm: 0.25rem;  /* 4px - 小圆角 */
  --radius-md: 0.5rem;  /* 8px - 中圆角 */
  --radius-lg: 0.75rem;  /* 12px - 大圆角 */
  --radius-xl: 1rem;  /* 16px - 超大圆角 */
  --radius-full: 9999px;  /* 胶囊圆角 */

  /*--- 阴影 ---  【小白修改:阴影深浅】 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);  /* 小阴影 */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);  /* 中阴影 */
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);  /* 大阴影 */
  --shadow-xl: 0 20px 40px rgba(125, 211, 252, 0.2);  /* 超大阴影(带主色调) */
  --shadow-card-hover: 0 15px 35px rgba(125, 211, 252, 0.25);  /* 卡片悬停阴影 */

  /*--- 过渡 ---*/  
  --transition-fast: 0.15s ease;  /* 快速过渡 */
  --transition-base: 0.3s ease;  /* 基础过渡 */
  --transition-slow: 0.5s ease;  /* 慢速过渡 */
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* 弹跳过渡 */

  /*--- 层级 ---*/
  --z-dropdown: 100;  /* 下拉菜单层级 */
  --z-sticky: 200;  /* 粘性定位层级 */
  --z-fixed: 300;  /* 固定定位层级 */
  --z-modal-backdrop: 400;  /* 模态遮罩层级 */
  --z-modal: 500;  /* 模态框层级 */
  --z-tooltip: 600;  /* 提示框层级 */

  /*--- 导航栏 ---  【小白修改:导航栏高度和透明度】 */
  --navbar-height: 70px;  /* 导航栏高度 */
  --navbar-bg-transparent: rgba(255, 255, 255, 0);  /* 导航栏透明背景 */
  --navbar-bg-solid: rgba(255, 255, 255, 0.95);  /* 导航栏实心背景(滚动后) */

  /*--- 生日彩蛋 ---  【小白修改:彩蛋覆盖层背景和文字大小】 */
  --birthday-bg: rgba(10, 10, 30, 0.92);  /* 彩蛋覆盖层背景色 - 深蓝黑半透明 */
  --birthday-text-size: 2rem;  /* 祝福文字大小 - 桌面端 */
  --birthday-text-size-mobile: 1.3rem;  /* 祝福文字大小 - 手机端 */

  /*--- 容器宽度 ---  【小白修改:内容最大宽度】 */
  --container-max: 1200px;  /* 内容区最大宽度 */
  --container-padding: 1.5rem;  /* 内容区左右内边距 */
}

/* ==================================================================  重置默认样式  让所有浏览器表现一致 */
/* ================================================================== */
*,  /* 所有元素 */
*::before,  /* 伪元素before */
*::after {  /* 伪元素after */
  margin: 0;  /* 清除默认外边距 */
  padding: 0;  /* 清除默认内边距 */
  box-sizing: border-box;  /* 让宽高包含内边距和边框 */
}

html {  /* html根元素 */
  scroll-behavior: smooth;  /* 平滑滚动 - 点击锚点时丝滑过渡 */
  font-size: 16px;  /* 基础字号16px */
  -webkit-text-size-adjust: 100%;  /* 阻止iOS横屏时自动调字号 */
}

body {  /* body主体 */
  font-family: var(--font-primary);  /* 使用主字体 */
  font-size: var(--font-size-base);  /* 基础字号 */
  line-height: 1.6;  /* 行高1.6倍，阅读更舒适 */
  color: var(--color-text-primary);  /* 主文字颜色 */
  background-color: var(--color-bg-white);  /* 白色背景 */
  overflow-x: hidden;  /* 隐藏横向溢出 - 防止出现横向滚动条 */
  -webkit-font-smoothing: antialiased;  /* macOS字体抗锯齿 */
  -moz-osx-font-smoothing: grayscale;  /* Firefox字体抗锯齿 */
}

a {  /* 所有链接 */
  text-decoration: none;  /* 去掉下划线 */
  color: inherit;  /* 继承父元素颜色 */
  transition: color var(--transition-fast);  /* 颜色变化有过渡效果 */
}

a:hover {  /* 链接悬停 */
  color: var(--color-primary);  /* 变成主色 */
}

ul,  /* 无序列表 */
ol {  /* 有序列表 */
  list-style: none;  /* 去掉默认列表样式 */
}

img {  /* 所有图片 */
  max-width: 100%;  /* 最大宽度不超过容器 */
  height: auto;  /* 高度自适应 */
  display: block;  /* 块级显示 - 去掉底部间隙 */
}

button {  /* 所有按钮 */
  cursor: pointer;  /* 鼠标变手型 */
  border: none;  /* 去掉默认边框 */
  background: none;  /* 去掉默认背景 */
  font-family: inherit;  /* 继承字体 */
  font-size: inherit;  /* 继承字号 */
}

input,  /* 输入框 */
textarea,  /* 文本域 */
select {  /* 下拉框 */
  font-family: inherit;  /* 继承字体 */
  font-size: inherit;  /* 继承字号 */
}

h1, h2, h3, h4, h5, h6 {  /* 所有标题 */
  font-family: var(--font-display);  /* 使用展示字体 */
  font-weight: 700;  /* 粗体 */
  line-height: 1.2;  /* 标题行高紧凑一点 */
}

/* ==================================================================  通用布局类 */
/* ================================================================== */
.container {  /* 内容容器 */
  width: 100%;  /* 宽度100% - 确保撑满 */
  max-width: var(--container-max);  /* 最大宽度1200px */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 var(--container-padding);  /* 左右内边距 */
  box-sizing: border-box;  /* 包含内边距 */
}

.section {  /* 页面区块 */
  width: 100%;  /* 确保全宽 */
  padding: var(--spacing-4xl) 0;  /* 上下96px间距 */
  box-sizing: border-box;  /* 包含内边距 */
}

.section--gray {  /* 灰色背景区块 */
  background-color: var(--color-bg-light);  /* 浅灰背景 */
}

.section__header {  /* 区块标题区 */
  text-align: center;  /* 文字居中 */
  margin-bottom: var(--spacing-3xl);  /* 底部64px间距 */
}

.section__title {  /* 区块标题 */
  font-size: var(--font-size-3xl);  /* 40px字号 */
  color: var(--color-text-primary);  /* 深色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.section__subtitle {  /* 区块副标题 */
  font-size: var(--font-size-md);  /* 18px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  max-width: 600px;  /* 最大宽度600px */
  margin: 0 auto;  /* 水平居中 */
}

/* ==================================================================  蓝粉渐变文字效果 */
/* ================================================================== */
.gradient-text {  /* 渐变文字类 */
  background: linear-gradient(135deg, #0284c7 0%, #db2777 100%);  /* 深蓝到深粉渐变 - 浅色背景上清晰可见 */
  -webkit-background-clip: text;  /* 背景裁剪到文字 - WebKit内核 */
  background-clip: text;  /* 背景裁剪到文字 - 标准属性 */
  -webkit-text-fill-color: transparent;  /* 文字填充透明 - 让渐变露出来 */
  color: transparent;  /* 兼容处理 */
}

/* ==================================================================  通用按钮样式 */
/* ================================================================== */
.btn {  /* 按钮基础类 */
  display: inline-flex;  /* 行内弹性布局 - 方便对齐图标 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  gap: var(--spacing-sm);  /* 图标和文字间距8px */
  padding: 0.75rem 1.75rem;  /* 上下12px 左右28px */
  font-size: var(--font-size-base);  /* 基础字号 */
  font-weight: 600;  /* 半粗体 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  transition: all var(--transition-base);  /* 所有属性过渡 */
  position: relative;  /* 相对定位 - 给伪元素用 */
  overflow: hidden;  /* 隐藏溢出 */
}

.btn--primary {  /* 主按钮 - 渐变背景 */
  background: var(--gradient-btn);  /* 蓝粉渐变 */
  color: var(--color-text-white);  /* 白色文字 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.btn--primary:hover {  /* 主按钮悬停 */
  transform: translateY(-2px) scale(1.02);  /* 上浮2px + 放大2% */
  box-shadow: var(--shadow-xl);  /* 超大阴影 - 悬浮感更强 */
}

.btn--primary:active {  /* 主按钮按下 */
  transform: translateY(0) scale(0.98);  /* 回到原位 + 缩小2% - 按压反馈 */
}

.btn--outline {  /* 描边按钮 - 透明背景 */
  border: 2px solid var(--color-primary);  /* 主色边框 */
  color: var(--color-primary);  /* 主色文字 */
  background: transparent;  /* 透明背景 */
}

.btn--outline:hover {  /* 描边按钮悬停 */
  background: var(--gradient-btn);  /* 变成渐变背景 */
  color: var(--color-text-white);  /* 白色文字 */
  border-color: transparent;  /* 边框变透明 */
  transform: translateY(-2px) scale(1.02);  /* 上浮+放大 */
  box-shadow: var(--shadow-xl);  /* 超大阴影 */
}

.btn--lg {  /* 大按钮 */
  padding: 1rem 2.5rem;  /* 更大内边距 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  border-radius: var(--radius-xl);  /* 16px圆角 */
}

.btn--sm {  /* 小按钮 */
  padding: 0.5rem 1.25rem;  /* 更小内边距 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

/* ==================================================================  通用卡片样式 */
/* ================================================================== */
.card {  /* 卡片基础类 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  padding: var(--spacing-xl);  /* 32px内边距 */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
  transition: all var(--transition-base);  /* 所有属性过渡 */
  position: relative;  /* 相对定位 */
  overflow: hidden;  /* 隐藏溢出 */
}

.card:hover {  /* 卡片悬停 */
  transform: translateY(-5px);  /* 上浮5px - 悬浮效果 */
  box-shadow: var(--shadow-card-hover);  /* 悬停阴影 - 带主色调 */
}

.card__icon {  /* 卡片图标 */
  width: 60px;  /* 宽60px */
  height: 60px;  /* 高60px */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  background: var(--gradient-main);  /* 蓝粉渐变背景 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
  font-size: var(--font-size-xl);  /* 24px图标大小 */
}

.card__title {  /* 卡片标题 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  margin-bottom: var(--spacing-sm);  /* 底部8px间距 */
}

.card__text {  /* 卡片文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  line-height: 1.8;  /* 行高1.8倍 */
}

/* ==================================================================  导航栏样式 */
/* ================================================================== */
.navbar {  /* 导航栏 */
  position: fixed;  /* 固定在页面顶部 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽度100% */
  height: var(--navbar-height);  /* 高度70px */
  background: var(--navbar-bg-transparent);  /* 透明背景 */
  backdrop-filter: blur(0px);  /* 无模糊 - 初始状态 */
  transition: all var(--transition-base);  /* 所有属性过渡 */
  z-index: var(--z-fixed);  /* 固定层级 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
}

.navbar--scrolled {  /* 滚动后的导航栏 */
  background: var(--navbar-bg-solid);  /* 半透明白色背景 */
  backdrop-filter: blur(20px);  /* 20px毛玻璃模糊 */
  box-shadow: var(--shadow-sm);  /* 小阴影 - 层次感 */
}

.navbar__inner {  /* 导航栏内部容器 */
  max-width: var(--container-max);  /* 最大宽度1200px */
  width: 100%;  /* 宽度100% */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 var(--container-padding);  /* 左右内边距 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between;  /* 两端对齐 */
}

.navbar__logo {  /* Logo区域 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: var(--spacing-sm);  /* 图标和文字间距8px */
  font-size: var(--font-size-xl);  /* 24px字号 */
  font-weight: 700;  /* 粗体 */
  z-index: var(--z-fixed);  /* 确保在汉堡菜单上方 */
}

.navbar__logo-icon {  /* Logo图标 - 小月亮 */
  width: 36px;  /* 宽36px */
  height: 36px;  /* 高36px */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  border-radius: 50%;  /* 圆形 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: 20px;  /* emoji大小 */
}

.navbar__links {  /* 导航链接区 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: var(--spacing-xl);  /* 链接间距32px */
}

.navbar__cta {  /* 导航栏咨询按钮 */
  white-space: nowrap;  /* 不换行 */
  flex-shrink: 0;  /* 不缩小 */
}

.navbar__link {  /* 单个导航链接 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 500;  /* 中等粗细 */
  color: var(--color-text-primary);  /* 深色文字 */
  position: relative;  /* 相对定位 - 给下划线用 */
  transition: color var(--transition-fast);  /* 颜色过渡 */
}

.navbar__link::after {  /* 链接下划线伪元素 */
  content: '';  /* 空内容 */
  position: absolute;  /* 绝对定位 */
  bottom: -4px;  /* 距底4px */
  left: 0;  /* 从左开始 */
  width: 0;  /* 初始宽度0 - 隐藏 */
  height: 2px;  /* 2px高度 */
  background: var(--gradient-main);  /* 蓝粉渐变下划线 */
  transition: width var(--transition-base);  /* 宽度过渡 */
}

.navbar__link:hover::after,  /* 悬停时显示下划线 */
.navbar__link--active::after {  /* 激活时显示下划线 */
  width: 100%;  /* 宽度100% - 完整显示 */
}

.navbar__link:hover,  /* 悬停链接 */
.navbar__link--active {  /* 激活链接 */
  color: var(--color-primary);  /* 主色文字 */
}

/*--- 汉堡菜单按钮 ---*/
.navbar__hamburger {  /* 汉堡菜单按钮 */
  display: none;  /* 默认隐藏 - 电脑端不需要 */
  flex-direction: column;  /* 纵向排列三条线 */
  gap: 5px;  /* 间距5px */
  cursor: pointer;  /* 手型光标 */
  z-index: var(--z-fixed);  /* 确保在最上层 */
  padding: 5px;  /* 点击区域扩大 */
}

.navbar__hamburger span {  /* 汉堡菜单的每条线 */
  width: 25px;  /* 宽25px */
  height: 2px;  /* 高2px */
  background: var(--color-text-primary);  /* 深色线条 */
  transition: all var(--transition-base);  /* 过渡动画 */
  border-radius: 2px;  /* 微圆角 */
}

.navbar__hamburger--open span:nth-child(1) {  /* 汉堡菜单打开 - 第一条线 */
  transform: rotate(45deg) translate(5px, 5px);  /* 旋转成X */
}

.navbar__hamburger--open span:nth-child(2) {  /* 汉堡菜单打开 - 第二条线 */
  opacity: 0;  /* 隐藏中间线 */
}

.navbar__hamburger--open span:nth-child(3) {  /* 汉堡菜单打开 - 第三条线 */
  transform: rotate(-45deg) translate(5px, -5px);  /* 旋转成X */
}

/*--- 移动端导航菜单 ---*/
.navbar__mobile-menu {  /* 移动端菜单 */
  display: none;  /* 默认隐藏 */
}

/* ==================================================================  英雄区样式 */
/* ================================================================== */
.hero {  /* 英雄区 */
  min-height: 100vh;  /* 最小高度100视口 - 全屏 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  position: relative;  /* 相对定位 - 给蒙版用 */
  overflow: hidden;  /* 隐藏溢出 */
  text-align: center;  /* 文字居中 */
}

.hero__bg {  /* 英雄区背景图 */
  position: absolute;  /* 绝对定位 - 铺满整个区域 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  background-image: url('https://picsum.photos/seed/concertnight/1920/1080');  /* 在线占位背景图 - 替换为真实追星现场图 */
  background-size: cover;  /* 铺满 - 不留白 */
  background-position: center;  /* 居中裁切 */
  background-repeat: no-repeat;  /* 不重复 */
}

.hero__overlay {  /* 英雄区渐变蒙版 */
  position: absolute;  /* 绝对定位 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  background: var(--gradient-hero);  /* 蓝粉渐变蒙版(带透明度) */
}

.hero__content {  /* 英雄区内容 */
  position: relative;  /* 相对定位 - 在蒙版之上 */
  z-index: 1;  /* 层级在蒙版之上 */
  max-width: 800px;  /* 最大宽度800px */
  padding: 0 var(--spacing-xl);  /* 左右32px内边距 */
}

.hero__badge {  /* 顶部标签 - "追星摄影师" */
  display: inline-block;  /* 行内块 */
  padding: 0.5rem 1.5rem;  /* 内边距 */
  background: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
  backdrop-filter: blur(10px);  /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.3);  /* 半透明白色边框 */
  border-radius: var(--radius-full);  /* 胶囊圆角 */
  color: var(--color-text-white);  /* 白色文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 500;  /* 中等粗细 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
  letter-spacing: 2px;  /* 字间距2px - 更优雅 */
}

.hero__title {  /* 英雄区标题 - 摄影师名字 */
  font-size: var(--font-size-5xl);  /* 56px字号 */
  font-weight: 800;  /* 特粗体 */
  color: var(--color-text-white);  /* 白色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
  letter-spacing: 3px;  /* 字间距3px */
}

.hero__slogan {  /* 英雄区Slogan */
  font-size: var(--font-size-2xl);  /* 32px字号 - 加大更醒目 */
  color: rgba(255, 255, 255, 0.9);  /* 半透明白色 */
  margin-bottom: var(--spacing-2xl);  /* 底部48px间距 */
  font-weight: 400;  /* 常规体 - 优雅感 */
  letter-spacing: 2px;  /* 字间距2px */
}

.hero__buttons {  /* 英雄区按钮组 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-lg);  /* 按钮间距24px */
  justify-content: center;  /* 水平居中 */
  flex-wrap: wrap;  /* 小屏幕允许换行 */
}

/*--- 英雄区装饰粒子 ---*/
.hero__particles {  /* 装饰粒子容器 */
  position: absolute;  /* 绝对定位 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  pointer-events: none;  /* 不响应鼠标事件 */
  overflow: hidden;  /* 隐藏溢出 */
}

.hero__particle {  /* 单个粒子 */
  position: absolute;  /* 绝对定位 */
  width: 4px;  /* 宽4px */
  height: 4px;  /* 高4px */
  background: rgba(255, 255, 255, 0.5);  /* 半透明白色 */
  border-radius: 50%;  /* 圆形 */
  animation: particleFloat 8s infinite ease-in-out;  /* 浮动动画 */
}

@keyframes particleFloat {  /* 粒子浮动动画 */
  0%, 100% {  /* 起止位置 */
    transform: translateY(0) translateX(0);  /* 原位 */
    opacity: 0;  /* 透明 */
  }
  50% {  /* 中间位置 */
    transform: translateY(-100px) translateX(30px);  /* 上浮100px 右移30px */
    opacity: 1;  /* 完全可见 */
  }
}

/* ==================================================================  作品精选区样式 */
/* ================================================================== */
.works {  /* 作品精选区 */
  width: 100%;  /* 确保全宽 */
  padding: var(--spacing-4xl) 0;  /* 上下96px间距 */
  background: var(--color-bg-light);  /* 浅灰背景 */
  box-sizing: border-box;  /* 包含内边距 */
}

.works__grid {  /* 作品网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
  gap: var(--spacing-lg);  /* 间距24px */
}

.works__item {  /* 单个作品项 */
  position: relative;  /* 相对定位 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  overflow: hidden;  /* 隐藏溢出 */
  aspect-ratio: 4 / 3;  /* 宽高比4:3 - 照片比例 */
  cursor: pointer;  /* 手型光标 */
  transition: transform var(--transition-base);  /* 过渡动画 */
}

.works__item:hover {  /* 作品悬停 */
  transform: translateY(-5px);  /* 上浮5px */
}

.works__item img {  /* 作品图片 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  object-fit: cover;  /* 铺满裁切 */
  transition: transform var(--transition-slow);  /* 缓慢过渡 */
}

.works__item:hover img {  /* 作品图片悬停 */
  transform: scale(1.1);  /* 放大10% - 窥视效果 */
}

.works__item-overlay {  /* 作品悬停蒙版 */
  position: absolute;  /* 绝对定位 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  background: var(--gradient-hero);  /* 蓝粉渐变蒙版 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  align-items: center;  /* 水平居中 */
  justify-content: center;  /* 垂直居中 */
  opacity: 0;  /* 初始透明 - 隐藏 */
  transition: opacity var(--transition-base);  /* 透明度过渡 */
}

.works__item:hover .works__item-overlay {  /* 悬停时显示蒙版 */
  opacity: 1;  /* 完全可见 */
}

.works__item-title {  /* 作品标题 */
  color: var(--color-text-white);  /* 白色文字 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  font-weight: 600;  /* 半粗体 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.works__item-category {  /* 作品分类标签 */
  color: rgba(255, 255, 255, 0.8);  /* 半透明白色 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

/* ==================================================================  服务亮点区样式 */
/* ================================================================== */
.services__grid {  /* 服务网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(4, 1fr);  /* 4列等宽 */
  gap: var(--spacing-lg);  /* 间距24px */
}

/* ==================================================================  合作客户区样式 */
/* ================================================================== */
.clients__grid {  /* 客户logo网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(5, 1fr);  /* 5列等宽 */
  gap: var(--spacing-xl);  /* 间距32px */
  align-items: center;  /* 垂直居中 */
}

.clients__logo {  /* 客户logo */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 80px;  /* 高80px */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-md);  /* 8px圆角 */
  border: 1px solid var(--color-border);  /* 浅色边框 */
  padding: var(--spacing-md);  /* 16px内边距 */
  transition: all var(--transition-base);  /* 过渡动画 */
  filter: grayscale(100%);  /* 灰色 - 品牌色不影响网站配色 */
}

.clients__logo:hover {  /* 客户logo悬停 */
  border-color: var(--color-primary);  /* 主色边框 */
  transform: translateY(-3px);  /* 上浮3px */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

/* ==================================================================  客户评价区样式 */
/* ================================================================== */
.testimonials__wrapper {  /* 评价区外层 - 裁切只显示1条 */
  position: relative;  /* 相对定位 */
  overflow: hidden;  /* 隐藏溢出 - 关键：只显示当前1条 */
  max-width: 700px;  /* 最大宽度700px */
  margin: 0 auto;  /* 水平居中 */
}

.testimonials__track {  /* 评价滚动轨道 */
  display: flex;  /* 弹性布局 */
  transition: transform var(--transition-slow);  /* 缓慢过渡 */
}

.testimonial {  /* 单条评价 */
  flex: 0 0 100%;  /* 不伸缩，每条占90%宽度 - 确保只显示1条 */
  text-align: center;  /* 文字居中 */
  padding: var(--spacing-2xl);  /* 48px内边距 */
  box-sizing: border-box;  /* 包含内边距 */
}

.testimonial__quote {  /* 评价引用文字 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  color: var(--color-text-primary);  /* 深色文字 */
  line-height: 1.8;  /* 行高1.8倍 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
  position: relative;  /* 相对定位 */
  font-style: italic;  /* 斜体 - 引用感 */
}

.testimonial__quote::before {  /* 引号前 - 左引号 */
  content: '"';  /* 左双引号 */
  font-size: 4rem;  /* 64px超大引号 */
  position: absolute;  /* 绝对定位 */
  top: -1.5rem;  /* 上移 */
  left: -0.5rem;  /* 左移 */
  color: var(--color-primary);  /* 主色 */
  opacity: 0.2;  /* 低透明度 - 装饰性 */
  font-style: normal;  /* 正体 */
  line-height: 1;  /* 行高1 */
}

.testimonial__avatar {  /* 评价者头像 */
  width: 60px;  /* 宽60px */
  height: 60px;  /* 高60px */
  border-radius: 50%;  /* 圆形 */
  background: var(--gradient-main);  /* 蓝粉渐变占位 */
  margin: 0 auto var(--spacing-md);  /* 居中+底部16px间距 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: var(--font-size-xl);  /* 头像emoji大小 */
}

.testimonial__name {  /* 评价者名字 */
  font-weight: 600;  /* 半粗体 */
  color: var(--color-text-primary);  /* 深色文字 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.testimonial__role {  /* 评价者身份 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.testimonials__dots {  /* 评价指示点 */
  display: flex;  /* 弹性布局 */
  justify-content: center;  /* 水平居中 */
  gap: var(--spacing-sm);  /* 间距8px */
  margin-top: var(--spacing-xl);  /* 顶部32px间距 */
}

.testimonials__dot {  /* 单个指示点 */
  width: 10px;  /* 宽10px */
  height: 10px;  /* 高10px */
  border-radius: 50%;  /* 圆形 */
  background: var(--color-border);  /* 灰色默认 */
  cursor: pointer;  /* 手型光标 */
  transition: all var(--transition-fast);  /* 过渡动画 */
}

.testimonials__dot--active {  /* 激活的指示点 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  width: 30px;  /* 宽度变长 - 激活标识 */
  border-radius: var(--radius-full);  /* 胶囊形 */
}

/* ==================================================================  底部CTA区样式 */
/* ================================================================== */
.cta {  /* CTA行动号召区 */
  background: var(--gradient-main);  /* 蓝粉渐变全铺 */
  padding: var(--spacing-4xl) 0;  /* 上下96px间距 */
  text-align: center;  /* 文字居中 */
  position: relative;  /* 相对定位 */
  overflow: hidden;  /* 隐藏溢出 */
}

.cta::before {  /* CTA区装饰 - 左上圆弧 */
  content: '';  /* 空内容 */
  position: absolute;  /* 绝对定位 */
  top: -50%;  /* 上移50% */
  left: -10%;  /* 左移10% */
  width: 300px;  /* 宽300px */
  height: 300px;  /* 高300px */
  background: rgba(255, 255, 255, 0.05);  /* 极浅白色 */
  border-radius: 50%;  /* 圆形 */
}

.cta::after {  /* CTA区装饰 - 右下圆弧 */
  content: '';  /* 空内容 */
  position: absolute;  /* 绝对定位 */
  bottom: -30%;  /* 下移30% */
  right: -5%;  /* 右移5% */
  width: 400px;  /* 宽400px */
  height: 400px;  /* 高400px */
  background: rgba(255, 255, 255, 0.05);  /* 极浅白色 */
  border-radius: 50%;  /* 圆形 */
}

.cta__title {  /* CTA标题 */
  font-size: var(--font-size-3xl);  /* 40px字号 */
  color: var(--color-text-white);  /* 白色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
  position: relative;  /* 在装饰圆之上 */
}

.cta__subtitle {  /* CTA副标题 */
  font-size: var(--font-size-md);  /* 18px字号 */
  color: rgba(255, 255, 255, 0.9);  /* 半透明白色 */
  margin-bottom: var(--spacing-2xl);  /* 底部48px间距 */
  position: relative;  /* 在装饰圆之上 */
}

.cta__buttons {  /* CTA按钮组 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-md);  /* 间距16px */
  justify-content: center;  /* 水平居中 */
  flex-wrap: wrap;  /* 允许换行 */
  position: relative;  /* 在装饰圆之上 */
}

.cta .btn--outline {  /* CTA区描边按钮特殊处理 */
  border-color: rgba(255, 255, 255, 0.5);  /* 半透明白色边框 */
  color: var(--color-text-white);  /* 白色文字 */
}

.cta .btn--outline:hover {  /* CTA描边按钮悬停 */
  background: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
  border-color: var(--color-text-white);  /* 白色边框 */
}

/* ==================================================================  页脚样式 */
/* ================================================================== */
.footer {  /* 页脚 */
  background: var(--color-bg-dark);  /* 深色背景 */
  color: rgba(255, 255, 255, 0.7);  /* 半透明白色文字 */
  padding: var(--spacing-3xl) 0 var(--spacing-xl);  /* 上64px 下32px */
}

.footer__grid {  /* 页脚网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: 2fr 1fr 1fr 1fr;  /* 4列，第一列占2份 */
  gap: var(--spacing-2xl);  /* 间距48px */
}

.footer__brand {  /* 页脚品牌区 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

.footer__logo {  /* 页脚logo */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: var(--spacing-sm);  /* 间距8px */
  font-size: var(--font-size-xl);  /* 24px字号 */
  font-weight: 700;  /* 粗体 */
  color: var(--color-text-white);  /* 白色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.footer__desc {  /* 页脚描述 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  line-height: 1.8;  /* 行高1.8倍 */
  max-width: 300px;  /* 最大宽度300px */
}

.footer__heading {  /* 页脚列标题 */
  color: var(--color-text-white);  /* 白色文字 */
  font-size: var(--font-size-base);  /* 16px字号 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

.footer__links {  /* 页脚链接列表 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  gap: var(--spacing-sm);  /* 间距8px */
}

.footer__link {  /* 页脚单个链接 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  transition: color var(--transition-fast);  /* 颜色过渡 */
}

.footer__link:hover {  /* 页脚链接悬停 */
  color: var(--color-secondary);  /* 樱花粉 - 更有辨识度 */
}

.footer__social {  /* 社交媒体图标 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-md);  /* 间距16px */
  margin-top: var(--spacing-lg);  /* 顶部24px间距 */
}

.footer__social-link {  /* 社交媒体单个链接 */
  width: 40px;  /* 宽40px */
  height: 40px;  /* 高40px */
  border-radius: 50%;  /* 圆形 */
  background: rgba(255, 255, 255, 0.1);  /* 半透明白色背景 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: var(--font-size-md);  /* 18px图标大小 */
  transition: all var(--transition-base);  /* 过渡动画 */
}

.footer__social-link:hover {  /* 社交链接悬停 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  transform: translateY(-3px);  /* 上浮3px */
}

.footer__bottom {  /* 页脚底部 - 版权区 */
  margin-top: var(--spacing-2xl);  /* 顶部48px间距 */
  padding-top: var(--spacing-xl);  /* 顶部32px内边距 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);  /* 顶部分割线 */
  display: flex;  /* 弹性布局 */
  justify-content: space-between;  /* 两端对齐 */
  align-items: center;  /* 垂直居中 */
  flex-wrap: wrap;  /* 允许换行 */
  gap: var(--spacing-md);  /* 间距16px */
}

.footer__copyright {  /* 版权信息 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

.footer__heart {  /* 版权中的爱心 - 彩蛋触发点 */
  color: var(--color-secondary);  /* 樱花粉爱心 */
  animation: heartbeat 1.5s infinite;  /* 心跳动画 */
  display: inline-block;  /* 行内块 */
}

@keyframes heartbeat {  /* 心跳动画 */
  0%, 100% {  /* 起止 */
    transform: scale(1);  /* 正常大小 */
  }
  50% {  /* 中间 */
    transform: scale(1.2);  /* 放大20% */
  }
}

/* ==================================================================  淡入动画类 */
/* ================================================================== */
.fade-in {  /* 淡入元素 */
  opacity: 0;  /* 初始透明 */
  transform: translateY(30px);  /* 初始下移30px */
  transition: opacity 0.6s ease, transform 0.6s ease;  /* 过渡 */
}

.fade-in--visible {  /* 进入视口后可见 */
  opacity: 1;  /* 完全可见 */
  transform: translateY(0);  /* 回到原位 */
}

/* ==================================================================  返回顶部按钮 */
/* ================================================================== */
.back-to-top {  /* 返回顶部按钮 */
  position: fixed;  /* 固定定位 */
  bottom: 30px;  /* 距底30px */
  right: 30px;  /* 距右30px */
  width: 50px;  /* 宽50px */
  height: 50px;  /* 高50px */
  border-radius: 50%;  /* 圆形 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: var(--color-text-white);  /* 白色 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: var(--font-size-lg);  /* 箭头大小 */
  box-shadow: var(--shadow-lg);  /* 大阴影 */
  cursor: pointer;  /* 手型光标 */
  opacity: 0;  /* 初始隐藏 */
  visibility: hidden;  /* 不可见 */
  transition: all var(--transition-base);  /* 过渡 */
  z-index: var(--z-sticky);  /* 层级 */
}

.back-to-top--visible {  /* 可见状态 */
  opacity: 1;  /* 完全可见 */
  visibility: visible;  /* 可见 */
}

.back-to-top:hover {  /* 悬停 */
  transform: translateY(-3px) scale(1.1);  /* 上浮+放大 */
  box-shadow: var(--shadow-xl);  /* 超大阴影 */
}

/* ==================================================================  加载动画 */
/* ================================================================== */
.loader {  /* 页面加载动画 */
  position: fixed;  /* 固定定位 */
  top: 0;  /* 贴顶 */
  left: 0;  /* 贴左 */
  width: 100%;  /* 宽100% */
  height: 100%;  /* 高100% */
  background: var(--color-bg-white);  /* 白色背景 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  z-index: 9999;  /* 最高层级 */
  transition: opacity 0.5s ease;  /* 透明度过渡 */
}

.loader--hidden {  /* 加载完成隐藏 */
  opacity: 0;  /* 透明 */
  pointer-events: none;  /* 不响应事件 */
}

.loader__spinner {  /* 加载旋转器 */
  width: 50px;  /* 宽50px */
  height: 50px;  /* 高50px */
  border: 3px solid var(--color-border);  /* 灰色边框 */
  border-top-color: var(--color-primary);  /* 顶部蓝色 - 旋转指示 */
  border-radius: 50%;  /* 圆形 */
  animation: spin 0.8s linear infinite;  /* 旋转动画 */
}

@keyframes spin {  /* 旋转动画 */
  to {  /* 终点 */
    transform: rotate(360deg);  /* 旋转360度 */
  }
}

/* ==================================================================  响应式断点设置 */
/* ==================================================================  【小白修改:改下面这些断点值可以调整适配的分界线】 */

/*--- 大屏幕(1440px以上)---  无需特殊处理，默认样式即可 */

/*--- 平板横屏/小笔记本(1024px - 1439px)---*/
@media (max-width: 1439px) {  /* 最大宽度1439px */
  :root {  /* 修改CSS变量 */
    --font-size-5xl: 3rem;  /* 英雄区字号从56px缩小到48px */
    --font-size-3xl: 2.25rem;  /* 区块标题从40px缩小到36px */
  }
}

/*--- 平板竖屏(768px - 1023px)---*/
@media (max-width: 1023px) {  /* 最大宽度1023px */
  :root {  /* 修改CSS变量 */
    --font-size-5xl: 2.5rem;  /* 英雄区字号缩小到40px */
    --font-size-3xl: 2rem;  /* 区块标题缩小到32px */
    --spacing-4xl: 4rem;  /* 区块间距从96px缩小到64px */
  }

  .works__grid {  /* 作品网格 */
    grid-template-columns: repeat(2, 1fr);  /* 变成2列 */
  }

  .services__grid {  /* 服务网格 */
    grid-template-columns: repeat(2, 1fr);  /* 变成2列 */
  }

  .clients__grid {  /* 客户网格 */
    grid-template-columns: repeat(3, 1fr);  /* 变成3列 */
  }

  .footer__grid {  /* 页脚网格 */
    grid-template-columns: 1fr 1fr;  /* 变成2列 */
  }
}

/*--- 手机(320px - 767px)---*/
@media (max-width: 767px) {  /* 最大宽度767px */
  :root {  /* 修改CSS变量 */
    --font-size-5xl: 2rem;  /* 英雄区字号缩小到32px */
    --font-size-3xl: 1.5rem;  /* 区块标题缩小到24px */
    --font-size-xl: 1.125rem;  /* 超大字号缩小到18px */
    --spacing-4xl: 3rem;  /* 区块间距缩小到48px */
    --container-padding: 1rem;  /* 内容区内边距缩小到16px */
  }

  .navbar__links {  /* 导航链接区 - 手机端隐藏 */
    display: none;  /* 隐藏桌面导航 */
  }

  .navbar__hamburger {  /* 汉堡菜单 - 手机端显示 */
    display: flex;  /* 显示 */
  }

  .navbar__mobile-menu {  /* 移动端菜单 */
    position: fixed;  /* 固定定位 */
    top: 0;  /* 贴顶 */
    left: 0;  /* 贴左 */
    width: 100%;  /* 宽100% */
    height: 100vh;  /* 高100视口 - 全屏 */
    background: var(--navbar-bg-solid);  /* 半透明白色背景 */
    backdrop-filter: blur(20px);  /* 毛玻璃效果 */
    display: flex;  /* 弹性布局 */
    flex-direction: column;  /* 纵向排列 */
    align-items: center;  /* 水平居中 */
    justify-content: center;  /* 垂直居中 */
    gap: var(--spacing-xl);  /* 链接间距32px */
    opacity: 0;  /* 初始透明 */
    visibility: hidden;  /* 不可见 */
    transition: all var(--transition-base);  /* 过渡 */
    z-index: var(--z-modal-backdrop);  /* 遮罩层级 */
  }

  .navbar__mobile-menu--open {  /* 移动端菜单打开 */
    opacity: 1;  /* 完全可见 */
    visibility: visible;  /* 可见 */
  }

  .navbar__mobile-link {  /* 移动端菜单链接 */
    font-size: var(--font-size-xl);  /* 18px字号 */
    font-weight: 600;  /* 半粗体 */
    color: var(--color-text-primary);  /* 深色文字 */
    padding: var(--spacing-sm) 0;  /* 上下8px内边距 */
    transition: color var(--transition-fast);  /* 颜色过渡 */
  }

  .navbar__mobile-link:hover {  /* 移动端链接悬停 */
    color: var(--color-primary);  /* 主色 */
  }

  .works__grid {  /* 作品网格 */
    grid-template-columns: 1fr;  /* 变成1列 - 手机端竖排 */
  }

  .services__grid {  /* 服务网格 */
    grid-template-columns: 1fr;  /* 变成1列 */
  }

  .clients__grid {  /* 客户网格 */
    grid-template-columns: repeat(2, 1fr);  /* 变成2列 */
  }

  .footer__grid {  /* 页脚网格 */
    grid-template-columns: 1fr;  /* 变成1列 */
  }

  .footer__bottom {  /* 页脚底部 */
    flex-direction: column;  /* 纵向排列 */
    text-align: center;  /* 文字居中 */
  }

  .hero__buttons {  /* 英雄区按钮 */
    flex-direction: column;  /* 纵向排列 */
    align-items: center;  /* 水平居中 */
  }

  .cta__buttons {  /* CTA按钮 */
    flex-direction: column;  /* 纵向排列 */
    align-items: center;  /* 水平居中 */
  }

  .back-to-top {  /* 返回顶部按钮 */
    bottom: 20px;  /* 距底20px */
    right: 20px;  /* 距右20px */
    width: 44px;  /* 宽44px - 更好点击 */
    height: 44px;  /* 高44px */
  }
}

/*--- 极小屏幕(320px以下)---*/
@media (max-width: 359px) {  /* 最大宽度359px */
  :root {  /* 修改CSS变量 */
    --font-size-5xl: 1.75rem;  /* 英雄区字号缩小到28px */
  }
}

/* ==================================================================  作品集筛选栏样式 */
/* ================================================================== */
.works__filters {  /* 筛选栏容器 */
  display: flex;  /* 弹性布局 */
  flex-wrap: wrap;  /* 允许换行 */
  gap: 1rem;  /* 间距16px */
  margin-bottom: 2rem;  /* 底部间距32px */
  padding: 1.25rem;  /* 内边距 */
  background: var(--color-bg-light);  /* 浅灰背景 */
  border-radius: var(--radius-xl);  /* 圆角16px */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
}

.works__filter-group {  /* 单个筛选组 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: 0.5rem;  /* 间距8px */
  flex-wrap: wrap;  /* 允许换行 */
}

.works__filter-label {  /* 筛选标签文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 600;  /* 半粗体 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  white-space: nowrap;  /* 不换行 */
}

.works__filter-tags {  /* 筛选标签列表 */
  display: flex;  /* 弹性布局 */
  flex-wrap: wrap;  /* 允许换行 */
  gap: 0.375rem;  /* 间距6px */
}

.works__filter-tag {  /* 单个筛选标签按钮 */
  padding: 0.35rem 0.85rem;  /* 上下5.6px 左右13.6px */
  font-size: var(--font-size-xs);  /* 12px字号 */
  font-weight: 500;  /* 中等粗细 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  background: var(--color-bg-white);  /* 白色背景 */
  border: 1px solid var(--color-border);  /* 浅灰边框 */
  border-radius: var(--radius-full);  /* 胶囊圆角 */
  cursor: pointer;  /* 手型光标 */
  transition: all var(--transition-fast);  /* 快速过渡 */
  white-space: nowrap;  /* 不换行 */
}

.works__filter-tag:hover {  /* 筛选标签悬停 */
  color: var(--color-primary);  /* 主色文字 */
  border-color: var(--color-primary);  /* 主色边框 */
}

.works__filter-tag--active {  /* 激活的筛选标签 */
  color: #fff;  /* 白色文字 */
  background: var(--gradient-btn);  /* 渐变背景 */
  border-color: transparent;  /* 透明边框 */
  background-size: 200% 200%;  /* 渐变尺寸 - 为动画准备 */
}

.works__filter-tag--active:hover {  /* 激活标签悬停 */
  color: #fff;  /* 保持白色文字 */
  opacity: 0.9;  /* 微微透明 */
}

/* ==================================================================  瀑布流布局样式 */
/* ================================================================== */
.works__waterfall {  /* 瀑布流容器 */
  display: flex;  /* 弹性布局 - 列排列 */
  gap: 1rem;  /* 列间距16px */
  min-height: 400px;  /* 最小高度400px - 防止空时塌陷 */
}

.works__waterfall-col {  /* 瀑布流单列 */
  flex: 1;  /* 等宽 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  gap: 1rem;  /* 行间距16px */
}

.works__card {  /* 单个作品卡片 */
  position: relative;  /* 相对定位 - 悬停蒙版用 */
  border-radius: var(--radius-lg);  /* 圆角12px */
  overflow: hidden;  /* 隐藏溢出 - 圆角裁剪 */
  cursor: pointer;  /* 手型光标 - 点击可查看大图 */
  background: var(--color-bg-gray);  /* 灰色背景 - 图片加载前占位 */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
  transition: transform var(--transition-base), box-shadow var(--transition-base);  /* 过渡动画 */
}

.works__card:hover {  /* 卡片悬停 */
  transform: translateY(-4px);  /* 上浮4px */
  box-shadow: var(--shadow-card-hover);  /* 悬停阴影 */
}

.works__card-img {  /* 卡片图片 */
  width: 100%;  /* 宽度撑满 */
  display: block;  /* 块级显示 */
  opacity: 0;  /* 初始透明 - 加载完成后淡入 */
  transition: opacity 0.4s ease;  /* 淡入过渡 */
}

.works__card-img--loaded {  /* 图片加载完成 */
  opacity: 1;  /* 完全显示 */
}

.works__card-overlay {  /* 卡片悬停蒙版 */
  position: absolute;  /* 绝对定位 */
  inset: 0;  /* 撑满整个卡片 */
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);  /* 从透明到深色渐变 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  justify-content: flex-end;  /* 底部对齐 */
  padding: 1rem;  /* 内边距 */
  opacity: 0;  /* 初始透明 */
  transition: opacity var(--transition-base);  /* 过渡动画 */
}

.works__card:hover .works__card-overlay {  /* 悬停时显示蒙版 */
  opacity: 1;  /* 完全显示 */
}

.works__card-title {  /* 卡片标题 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 600;  /* 半粗体 */
  color: #fff;  /* 白色文字 */
  margin-bottom: 0.25rem;  /* 底部间距4px */
}

.works__card-meta {  /* 卡片元信息 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  color: rgba(255,255,255,0.7);  /* 半透明白色 */
  display: flex;  /* 弹性布局 */
  gap: 0.5rem;  /* 间距8px */
  align-items: center;  /* 垂直居中 */
}

.works__card-loading {  /* 卡片加载占位 */
  position: absolute;  /* 绝对定位 */
  inset: 0;  /* 撑满 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: var(--color-bg-gray);  /* 灰色背景 */
}

.works__card-loading-spinner {  /* 卡片加载旋转圈 */
  width: 28px;  /* 宽28px */
  height: 28px;  /* 高28px */
  border: 3px solid var(--color-border);  /* 浅灰边框 */
  border-top-color: var(--color-primary);  /* 顶部主色 */
  border-radius: 50%;  /* 圆形 */
  animation: spin 0.8s linear infinite;  /* 旋转动画 */
}

/* ==================================================================  加载更多/到底提示 */
/* ================================================================== */
.works__loading {  /* 加载更多提示 */
  display: none;  /* 默认隐藏 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  gap: 0.5rem;  /* 间距8px */
  padding: 2rem 0;  /* 上下内边距32px */
  color: var(--color-text-secondary);  /* 灰色文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

.works__loading--visible {  /* 加载提示可见 */
  display: flex;  /* 显示为弹性布局 */
}

.works__loading-spinner {  /* 加载旋转圈 */
  width: 20px;  /* 宽20px */
  height: 20px;  /* 高20px */
  border: 2px solid var(--color-border);  /* 浅灰边框 */
  border-top-color: var(--color-primary);  /* 顶部主色 */
  border-radius: 50%;  /* 圆形 */
  animation: spin 0.8s linear infinite;  /* 旋转动画 */
}

.works__no-more {  /* 没有更多提示 */
  text-align: center;  /* 文字居中 */
  padding: 2rem 0;  /* 上下内边距32px */
  color: var(--color-text-light);  /* 浅灰文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

/* ==================================================================  全屏大图查看器样式 */
/* ================================================================== */
.viewer {  /* 查看器容器 */
  position: fixed;  /* 固定定位 */
  inset: 0;  /* 撑满全屏 */
  z-index: 9999;  /* 最高层级 */
  display: none;  /* 默认隐藏 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

.viewer--open {  /* 查看器打开状态 */
  display: flex;  /* 显示为弹性布局 */
}

.viewer__backdrop {  /* 黑色半透明背景 */
  position: absolute;  /* 绝对定位 */
  inset: 0;  /* 撑满 */
  background: rgba(0, 0, 0, 0.9);  /* 黑色背景 - 透明度90% */
  z-index: 1;  /* 第1层 */
}

.viewer__container {  /* 查看器内容容器 */
  position: relative;  /* 相对定位 */
  z-index: 2;  /* 第2层 - 在背景之上 */
  width: 100%;  /* 宽度撑满 */
  height: 100%;  /* 高度撑满 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
}

.viewer__header {  /* 顶部信息栏 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between;  /* 两端对齐 */
  padding: 1rem 1.5rem;  /* 内边距 */
  color: #fff;  /* 白色文字 */
}

.viewer__info {  /* 图片信息区 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: 1rem;  /* 间距16px */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

.viewer__star {  /* 明星姓名 */
  font-weight: 700;  /* 粗体 */
  font-size: var(--font-size-base);  /* 16px字号 */
}

.viewer__date {  /* 拍摄日期 */
  opacity: 0.7;  /* 半透明 */
}

.viewer__location {  /* 拍摄地点 */
  opacity: 0.7;  /* 半透明 */
}

.viewer__close {  /* 关闭按钮 */
  width: 40px;  /* 宽40px */
  height: 40px;  /* 高40px */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: 1.5rem;  /* 24px字号 */
  color: rgba(255,255,255,0.7);  /* 半透明白色 */
  border-radius: 50%;  /* 圆形 */
  transition: all var(--transition-fast);  /* 过渡动画 */
}

.viewer__close:hover {  /* 关闭按钮悬停 */
  color: #fff;  /* 白色 */
  background: rgba(255,255,255,0.15);  /* 半透明白色背景 */
}

.viewer__image-wrap {  /* 图片包裹区 */
  flex: 1;  /* 弹性撑满剩余空间 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  overflow: hidden;  /* 隐藏溢出 */
  position: relative;  /* 相对定位 - 加载动画用 */
  cursor: grab;  /* 抓手光标 - 可拖拽 */
  user-select: none;  /* 禁止选中文字 */
  -webkit-user-select: none;  /* Safari禁止选中 */
}

.viewer__image-wrap--dragging {  /* 拖拽中状态 */
  cursor: grabbing;  /* 抓住光标 */
}

.viewer__image {  /* 大图 */
  max-width: 90%;  /* 最大宽度90% - 两侧留白 */
  max-height: 90%;  /* 最大高度90% - 上下留白 */
  object-fit: contain;  /* 保持比例完整显示 */
  transition: transform 0.2s ease;  /* 缩放过渡 */
  pointer-events: none;  /* 禁止图片自身事件 - 用包裹区统一处理 */
}

.viewer__image-loading {  /* 图片加载动画 */
  position: absolute;  /* 绝对定位 */
  inset: 0;  /* 撑满 */
  display: none;  /* 默认隐藏 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: transparent;  /* 透明背景 */
}

.viewer__image-loading--visible {  /* 加载动画可见 */
  display: flex;  /* 显示 */
}

.viewer__image-spinner {  /* 大图加载旋转圈 */
  width: 40px;  /* 宽40px */
  height: 40px;  /* 高40px */
  border: 3px solid rgba(255,255,255,0.3);  /* 半透明白色边框 */
  border-top-color: #fff;  /* 顶部白色 */
  border-radius: 50%;  /* 圆形 */
  animation: spin 0.8s linear infinite;  /* 旋转动画 */
}

.viewer__footer {  /* 底部操作栏 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  gap: 1rem;  /* 间距16px */
  padding: 1rem 1.5rem;  /* 内边距 */
}

.viewer__btn {  /* 操作按钮 */
  width: 44px;  /* 宽44px - 方便手指点击 */
  height: 44px;  /* 高44px */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: 1.25rem;  /* 20px字号 */
  color: rgba(255,255,255,0.7);  /* 半透明白色 */
  border-radius: 50%;  /* 圆形 */
  transition: all var(--transition-fast);  /* 过渡动画 */
}

.viewer__btn:hover {  /* 操作按钮悬停 */
  color: #fff;  /* 白色 */
  background: rgba(255,255,255,0.15);  /* 半透明背景 */
}

.viewer__counter {  /* 图片序号 */
  color: rgba(255,255,255,0.7);  /* 半透明白色 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  min-width: 60px;  /* 最小宽度60px - 防止切换时抖动 */
  text-align: center;  /* 文字居中 */
}

/* ==================================================================  瀑布流+查看器响应式 */
/* ================================================================== */
@media (max-width: 768px) {  /* 平板及以下 */
  .works__filters {  /* 筛选栏 */
    flex-direction: column;  /* 纵向排列 */
    gap: 0.75rem;  /* 间距12px */
  }

  .works__filter-group {  /* 筛选组 */
    width: 100%;  /* 宽度撑满 */
  }

  .viewer__info {  /* 查看器信息 */
    font-size: var(--font-size-xs);  /* 12px字号 */
    gap: 0.5rem;  /* 间距8px */
  }

  .viewer__star {  /* 明星姓名 */
    font-size: var(--font-size-sm);  /* 14px字号 */
  }

  .viewer__image {  /* 大图 */
    max-width: 100%;  /* 宽度撑满 */
    max-height: 95%;  /* 高度95% */
  }
}

@media (max-width: 480px) {  /* 手机端 */
  .works__filters {  /* 筛选栏 */
    padding: 0.75rem;  /* 内边距缩小 */
  }

  .works__filter-tag {  /* 筛选标签 */
    padding: 0.25rem 0.65rem;  /* 内边距缩小 */
    font-size: 0.6875rem;  /* 11px字号 */
  }

  .viewer__header {  /* 查看器顶部 */
    padding: 0.75rem 1rem;  /* 内边距缩小 */
  }

  .viewer__footer {  /* 查看器底部 */
    padding: 0.75rem 1rem;  /* 内边距缩小 */
  }

  .viewer__btn {  /* 操作按钮 */
    width: 40px;  /* 宽40px */
    height: 40px;  /* 高40px */
  }
}

/* ==================================================================  子页面英雄区通用样式 */
/* ================================================================== */
.page-hero {  /* 子页面顶部区域 */
  min-height: auto;  /* 不需要全屏 */
  padding-bottom: var(--spacing-3xl);  /* 底部64px间距 */
}

/* ==================================================================  关于我页面样式 */
/* ================================================================== */
.about__profile {  /* 个人形象区 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-3xl);  /* 间距64px */
  align-items: center;  /* 垂直居中 */
}

.about__photo {  /* 摄影师照片区 */
  flex-shrink: 0;  /* 不缩小 */
  width: 280px;  /* 宽280px */
  height: 280px;  /* 高280px */
  border-radius: var(--radius-xl);  /* 16px圆角 */
  overflow: hidden;  /* 隐藏溢出 */
  background: var(--gradient-main);  /* 蓝粉渐变占位 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  box-shadow: var(--shadow-xl);  /* 超大阴影 */
}

.about__photo-placeholder {  /* 照片占位 */
  font-size: 5rem;  /* 80px占位图标 */
  opacity: 0.5;  /* 半透明 */
}

.about__info {  /* 个人简介区 */
  flex: 1;  /* 弹性撑满 */
}

.about__name {  /* 摄影师名字 */
  font-size: var(--font-size-4xl);  /* 48px字号 */
  font-weight: 800;  /* 特粗体 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.about__title {  /* 身份标签 */
  font-size: var(--font-size-md);  /* 18px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

.about__bio {  /* 个人简介文字 */
  font-size: var(--font-size-base);  /* 16px字号 */
  line-height: 2;  /* 行高2倍 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
}

.about__stats {  /* 核心数据区 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-xl);  /* 间距32px */
  flex-wrap: wrap;  /* 允许换行 */
}

.about__stat {  /* 单个数据项 */
  text-align: center;  /* 文字居中 */
  min-width: 80px;  /* 最小宽度80px */
}

.about__stat-num {  /* 数据数字 */
  font-size: var(--font-size-3xl);  /* 40px字号 */
  font-weight: 800;  /* 特粗体 */
  display: block;  /* 块级显示 */
}

.about__stat-label {  /* 数据标签 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.about__story {  /* 故事内容区 */
  max-width: 800px;  /* 最大宽度800px */
  margin: 0 auto;  /* 水平居中 */
  font-size: var(--font-size-base);  /* 16px字号 */
  line-height: 2;  /* 行高2倍 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.about__story p {  /* 故事段落 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

/* ==================================================================  时间轴样式 */
/* ================================================================== */
.timeline {  /* 时间轴容器 */
  max-width: 700px;  /* 最大宽度700px */
  margin: 0 auto;  /* 水平居中 */
  position: relative;  /* 相对定位 */
  padding-left: 40px;  /* 左侧40px - 给圆点和线留位置 */
}

.timeline::before {  /* 时间轴竖线 */
  content: '';  /* 空内容 */
  position: absolute;  /* 绝对定位 */
  left: 15px;  /* 左侧15px */
  top: 0;  /* 贴顶 */
  bottom: 0;  /* 贴底 */
  width: 2px;  /* 2px宽竖线 */
  background: var(--gradient-main);  /* 蓝粉渐变竖线 */
}

.timeline__item {  /* 时间轴项 */
  position: relative;  /* 相对定位 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
}

.timeline__dot {  /* 时间点圆点 */
  position: absolute;  /* 绝对定位 */
  left: -33px;  /* 向左偏移到竖线上 */
  top: 6px;  /* 顶部6px */
  width: 14px;  /* 宽14px */
  height: 14px;  /* 高14px */
  border-radius: 50%;  /* 圆形 */
  background: var(--gradient-main);  /* 蓝粉渐变圆点 */
  border: 3px solid var(--color-bg-white);  /* 白色边框 - 让圆点更醒目 */
  box-shadow: 0 0 0 3px var(--color-primary);  /* 主色外圈阴影 */
}

.timeline__year {  /* 年份标签 */
  display: inline-block;  /* 行内块 */
  padding: 0.25rem 0.75rem;  /* 内边距 */
  background: var(--gradient-main);  /* 蓝粉渐变背景 */
  color: #fff;  /* 白色文字 */
  border-radius: var(--radius-full);  /* 胶囊圆角 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  font-weight: 600;  /* 半粗体 */
  margin-bottom: var(--spacing-sm);  /* 底部8px间距 */
}

.timeline__title {  /* 时间轴标题 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.timeline__text {  /* 时间轴文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  line-height: 1.8;  /* 行高1.8倍 */
}

/* ==================================================================  设备展示样式 */
/* ================================================================== */
.equipment__grid {  /* 设备网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
  gap: var(--spacing-lg);  /* 间距24px */
}

.equipment__item {  /* 设备项 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  padding: var(--spacing-xl);  /* 32px内边距 */
  text-align: center;  /* 文字居中 */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
  transition: all var(--transition-base);  /* 过渡动画 */
  position: relative;  /* 相对定位 */
  overflow: hidden;  /* 隐藏溢出 */
}

.equipment__item:hover {  /* 设备悬停 */
  transform: translateY(-5px);  /* 上浮5px */
  box-shadow: var(--shadow-card-hover);  /* 悬停阴影 */
}

.equipment__icon {  /* 设备图标 */
  font-size: 2.5rem;  /* 40px图标 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.equipment__name {  /* 设备名称 */
  font-size: var(--font-size-base);  /* 16px字号 */
  font-weight: 700;  /* 粗体 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.equipment__desc {  /* 设备描述 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.equipment__tag {  /* 设备标签 */
  display: inline-block;  /* 行内块 */
  padding: 0.25rem 0.75rem;  /* 内边距 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: #fff;  /* 白色文字 */
  border-radius: var(--radius-full);  /* 胶囊圆角 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  font-weight: 500;  /* 中等粗细 */
}

/* ==================================================================  套餐定价样式 */
/* ================================================================== */
.pricing__grid {  /* 套餐网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
  gap: var(--spacing-xl);  /* 间距32px */
  max-width: 1100px;  /* 最大宽度1100px */
  margin: 0 auto;  /* 水平居中 */
}

.pricing__card {  /* 套餐卡片 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-xl);  /* 16px圆角 */
  padding: var(--spacing-2xl);  /* 48px内边距 */
  text-align: center;  /* 文字居中 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
  position: relative;  /* 相对定位 */
  transition: all var(--transition-base);  /* 过渡动画 */
  overflow: hidden;  /* 隐藏溢出 */
}

.pricing__card:hover {  /* 套餐悬停 */
  transform: translateY(-8px);  /* 上浮8px */
  box-shadow: var(--shadow-xl);  /* 超大阴影 */
}

.pricing__card--popular {  /* 推荐套餐 */
  border: 2px solid var(--color-primary);  /* 主色边框 */
  transform: scale(1.05);  /* 放大5% - 突出推荐 */
}

.pricing__card--popular:hover {  /* 推荐套餐悬停 */
  transform: scale(1.05) translateY(-8px);  /* 保持放大+上浮 */
}

.pricing__badge {  /* 角标 */
  position: absolute;  /* 绝对定位 */
  top: 16px;  /* 距顶16px */
  right: -30px;  /* 右侧偏移 */
  padding: 4px 40px;  /* 内边距 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: #fff;  /* 白色文字 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  font-weight: 600;  /* 半粗体 */
  transform: rotate(45deg);  /* 旋转45度 - 斜角标 */
}

.pricing__name {  /* 套餐名 */
  font-size: var(--font-size-xl);  /* 24px字号 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.pricing__price {  /* 价格区 */
  margin-bottom: var(--spacing-sm);  /* 底部8px间距 */
}

.pricing__amount {  /* 价格数字 */
  font-size: var(--font-size-4xl);  /* 48px字号 */
  font-weight: 800;  /* 特粗体 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  -webkit-background-clip: text;  /* 裁剪到文字 */
  background-clip: text;  /* 裁剪到文字 */
  -webkit-text-fill-color: transparent;  /* 透明填充 */
}

.pricing__unit {  /* 价格单位 */
  font-size: var(--font-size-base);  /* 16px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.pricing__desc {  /* 套餐描述 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
}

.pricing__features {  /* 包含内容列表 */
  list-style: none;  /* 无列表样式 */
  text-align: left;  /* 左对齐 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
  padding: 0;  /* 无内边距 */
}

.pricing__feature {  /* 包含内容项 */
  padding: var(--spacing-sm) 0;  /* 上下8px内边距 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  border-bottom: 1px solid var(--color-border-light);  /* 底部分割线 */
  padding-left: 1.5rem;  /* 左侧16px缩进 - 给图标留位置 */
  position: relative;  /* 相对定位 */
}

.pricing__feature--yes::before {  /* 包含项图标 */
  content: '✓';  /* 勾号 */
  position: absolute;  /* 绝对定位 */
  left: 0;  /* 贴左 */
  color: #48bb78;  /* 绿色 */
  font-weight: 700;  /* 粗体 */
}

.pricing__feature--no {  /* 不包含项 */
  color: var(--color-text-light);  /* 浅灰文字 */
  text-decoration: line-through;  /* 删除线 */
}

.pricing__feature--no::before {  /* 不包含项图标 */
  content: '✕';  /* 叉号 */
  position: absolute;  /* 绝对定位 */
  left: 0;  /* 贴左 */
  color: var(--color-text-light);  /* 浅灰 */
}

.pricing__btn {  /* 套餐按钮 */
  width: 100%;  /* 宽度撑满 */
}

/* ==================================================================  附加服务样式 */
/* ================================================================== */
.addon__grid {  /* 附加服务网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
  gap: var(--spacing-xl);  /* 间距32px */
  max-width: 900px;  /* 最大宽度900px */
  margin: 0 auto;  /* 水平居中 */
}

.addon__item {  /* 附加服务项 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  padding: var(--spacing-xl);  /* 32px内边距 */
  text-align: center;  /* 文字居中 */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
  transition: all var(--transition-base);  /* 过渡动画 */
}

.addon__item:hover {  /* 附加服务悬停 */
  transform: translateY(-3px);  /* 上浮3px */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.addon__icon {  /* 附加服务图标 */
  font-size: 2rem;  /* 32px图标 */
  margin-bottom: var(--spacing-sm);  /* 底部8px间距 */
}

.addon__name {  /* 附加服务名称 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  font-weight: 700;  /* 粗体 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.addon__desc {  /* 附加服务描述 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
  line-height: 1.6;  /* 行高1.6倍 */
}

.addon__price {  /* 附加服务价格 */
  display: inline-block;  /* 行内块 */
  padding: 0.25rem 0.75rem;  /* 内边距 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: #fff;  /* 白色文字 */
  border-radius: var(--radius-full);  /* 胶囊圆角 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 600;  /* 半粗体 */
}

/* ==================================================================  服务流程样式 */
/* ================================================================== */
.process__steps {  /* 流程步骤容器 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  flex-wrap: wrap;  /* 允许换行 */
  gap: var(--spacing-md);  /* 间距16px */
  max-width: 1100px;  /* 最大宽度1100px */
  margin: 0 auto;  /* 水平居中 */
}

.process__step {  /* 单个步骤 */
  text-align: center;  /* 文字居中 */
  flex: 1;  /* 弹性等宽 */
  min-width: 120px;  /* 最小宽度120px */
}

.process__num {  /* 步骤编号 */
  width: 48px;  /* 宽48px */
  height: 48px;  /* 高48px */
  border-radius: 50%;  /* 圆形 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: #fff;  /* 白色文字 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  font-weight: 800;  /* 特粗体 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  margin: 0 auto var(--spacing-md);  /* 居中+底部16px间距 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.process__title {  /* 步骤标题 */
  font-size: var(--font-size-base);  /* 16px字号 */
  font-weight: 700;  /* 粗体 */
  margin-bottom: var(--spacing-xs);  /* 底部4px间距 */
}

.process__desc {  /* 步骤描述 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  line-height: 1.6;  /* 行高1.6倍 */
}

.process__arrow {  /* 箭头连接 */
  font-size: var(--font-size-xl);  /* 24px字号 */
  color: var(--color-primary);  /* 主色 */
  flex-shrink: 0;  /* 不缩小 */
}

/* ==================================================================  FAQ折叠面板样式 */
/* ================================================================== */
.faq__list {  /* FAQ列表 */
  max-width: 800px;  /* 最大宽度800px */
  margin: 0 auto;  /* 水平居中 */
}

.faq__item {  /* FAQ项 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
  box-shadow: var(--shadow-sm);  /* 小阴影 */
  overflow: hidden;  /* 隐藏溢出 */
  transition: all var(--transition-base);  /* 过渡动画 */
}

.faq__item--open {  /* 展开的FAQ项 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.faq__question {  /* FAQ问题 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between;  /* 两端对齐 */
  padding: var(--spacing-lg) var(--spacing-xl);  /* 内边距 */
  cursor: pointer;  /* 手型光标 */
  font-weight: 600;  /* 半粗体 */
  font-size: var(--font-size-base);  /* 16px字号 */
  transition: color var(--transition-fast);  /* 颜色过渡 */
}

.faq__question:hover {  /* 问题悬停 */
  color: var(--color-primary);  /* 主色文字 */
}

.faq__toggle {  /* 展开/收起图标 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  color: var(--color-primary);  /* 主色 */
  transition: transform var(--transition-base);  /* 旋转过渡 */
  flex-shrink: 0;  /* 不缩小 */
  margin-left: var(--spacing-md);  /* 左侧16px间距 */
}

.faq__item--open .faq__toggle {  /* 展开时图标旋转 */
  transform: rotate(45deg);  /* 旋转45度 +变x */
}

.faq__answer {  /* FAQ答案 */
  max-height: 0;  /* 初始高度0 - 隐藏 */
  overflow: hidden;  /* 隐藏溢出 */
  transition: max-height 0.3s ease, padding 0.3s ease;  /* 高度过渡动画 */
}

.faq__item--open .faq__answer {  /* 展开时的答案 */
  max-height: 300px;  /* 最大高度300px - 足够显示内容 */
  padding: 0 var(--spacing-xl) var(--spacing-lg);  /* 内边距 */
}

.faq__answer p {  /* 答案段落 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  line-height: 1.8;  /* 行高1.8倍 */
}

/* ==================================================================  联系我页面样式 */
/* ================================================================== */
.contact__grid {  /* 联系我双栏 */
  display: grid;  /* 网格布局 */
  grid-template-columns: 1fr 1.5fr;  /* 左1份右1.5份 */
  gap: var(--spacing-3xl);  /* 间距64px */
  max-width: 1000px;  /* 最大宽度1000px */
  margin: 0 auto;  /* 水平居中 */
}

.contact__info-title {  /* 联系区标题 */
  font-size: var(--font-size-xl);  /* 24px字号 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
}

.contact__qrcode {  /* 二维码区 */
  text-align: center;  /* 文字居中 */
  margin-bottom: var(--spacing-xl);  /* 底部32px间距 */
}

.contact__qrcode-placeholder {  /* 二维码占位 */
  width: 160px;  /* 宽160px */
  height: 160px;  /* 高160px */
  background: var(--color-bg-gray);  /* 灰色背景 */
  border-radius: var(--radius-lg);  /* 12px圆角 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  font-size: 4rem;  /* 64px图标 */
  margin: 0 auto var(--spacing-sm);  /* 居中+底部8px间距 */
  border: 2px dashed var(--color-border);  /* 虚线边框 - 占位提示 */
}

.contact__qrcode-text {  /* 二维码提示文字 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.contact__detail {  /* 联系详情列表 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  gap: var(--spacing-md);  /* 间距16px */
}

.contact__detail-item {  /* 联系详情项 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: var(--spacing-md);  /* 间距16px */
  padding: var(--spacing-md);  /* 16px内边距 */
  background: var(--color-bg-light);  /* 浅灰背景 */
  border-radius: var(--radius-md);  /* 8px圆角 */
  transition: all var(--transition-base);  /* 过渡动画 */
}

.contact__detail-item:hover {  /* 详情项悬停 */
  background: var(--color-bg-gray);  /* 灰色背景 */
  transform: translateX(4px);  /* 右移4px */
}

.contact__detail-icon {  /* 详情图标 */
  font-size: 1.5rem;  /* 24px图标 */
  flex-shrink: 0;  /* 不缩小 */
}

.contact__detail-label {  /* 详情标签 */
  display: block;  /* 块级显示 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  color: var(--color-text-light);  /* 浅灰文字 */
}

.contact__detail-value {  /* 详情值 */
  display: block;  /* 块级显示 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 500;  /* 中等粗细 */
}

.contact__form-wrap {  /* 表单区域 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-xl);  /* 16px圆角 */
  padding: var(--spacing-2xl);  /* 48px内边距 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.contact__form {  /* 留言表单 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  gap: var(--spacing-lg);  /* 间距24px */
}

.contact__form-group {  /* 表单组 */
  display: flex;  /* 弹性布局 */
  flex-direction: column;  /* 纵向排列 */
  gap: var(--spacing-xs);  /* 间距4px */
}

.contact__label {  /* 表单标签 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  font-weight: 600;  /* 半粗体 */
  color: var(--color-text-primary);  /* 深色文字 */
}

.contact__input,  /* 输入框 */
.contact__select,  /* 下拉框 */
.contact__textarea {  /* 文本域 */
  width: 100%;  /* 宽度撑满 */
  padding: 0.75rem 1rem;  /* 内边距 */
  border: 2px solid var(--color-border);  /* 2px边框 */
  border-radius: var(--radius-md);  /* 8px圆角 */
  font-size: var(--font-size-base);  /* 16px字号 */
  transition: border-color var(--transition-fast);  /* 边框颜色过渡 */
  background: var(--color-bg-white);  /* 白色背景 */
}

.contact__input:focus,  /* 输入框聚焦 */
.contact__select:focus,  /* 下拉框聚焦 */
.contact__textarea:focus {  /* 文本域聚焦 */
  outline: none;  /* 去掉默认聚焦框 */
  border-color: var(--color-primary);  /* 主色边框 */
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.1);  /* 主色阴影 */
}

.contact__textarea {  /* 文本域 */
  resize: vertical;  /* 只允许纵向调整大小 */
  min-height: 100px;  /* 最小高度100px */
}

.contact__submit {  /* 提交按钮 */
  align-self: flex-start;  /* 左对齐 */
}

.contact__msg {  /* 提交提示 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  padding: var(--spacing-sm) 0;  /* 上下8px内边距 */
}

.contact__msg--success {  /* 成功提示 */
  color: #48bb78;  /* 绿色 */
}

.contact__msg--error {  /* 失败提示 */
  color: #e53e3e;  /* 红色 */
}

/* ==================================================================  日历组件样式 */
/* ================================================================== */
.calendar {  /* 日历容器 */
  max-width: 420px;  /* 最大宽度420px */
  margin: 0 auto;  /* 水平居中 */
  background: var(--color-bg-white);  /* 白色背景 */
  border-radius: var(--radius-xl);  /* 16px圆角 */
  padding: var(--spacing-xl);  /* 32px内边距 */
  box-shadow: var(--shadow-md);  /* 中等阴影 */
}

.calendar__header {  /* 日历头部 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between;  /* 两端对齐 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

.calendar__title {  /* 月份标题 */
  font-size: var(--font-size-lg);  /* 20px字号 */
  font-weight: 700;  /* 粗体 */
}

.calendar__nav {  /* 月份导航按钮 */
  width: 36px;  /* 宽36px */
  height: 36px;  /* 高36px */
  border-radius: 50%;  /* 圆形 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: var(--color-bg-light);  /* 浅灰背景 */
  transition: all var(--transition-fast);  /* 过渡动画 */
  font-size: var(--font-size-sm);  /* 14px字号 */
}

.calendar__nav:hover {  /* 导航按钮悬停 */
  background: var(--gradient-main);  /* 蓝粉渐变 */
  color: #fff;  /* 白色文字 */
}

.calendar__weekdays {  /* 星期行 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(7, 1fr);  /* 7列等宽 */
  gap: 4px;  /* 间距4px */
  margin-bottom: var(--spacing-sm);  /* 底部8px间距 */
  text-align: center;  /* 文字居中 */
  font-size: var(--font-size-xs);  /* 12px字号 */
  font-weight: 600;  /* 半粗体 */
  color: var(--color-text-secondary);  /* 灰色文字 */
}

.calendar__days {  /* 日期网格 */
  display: grid;  /* 网格布局 */
  grid-template-columns: repeat(7, 1fr);  /* 7列等宽 */
  gap: 4px;  /* 间距4px */
}

.calendar__day {  /* 单个日期格子 */
  aspect-ratio: 1;  /* 正方形 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  border-radius: var(--radius-md);  /* 8px圆角 */
  font-size: var(--font-size-sm);  /* 14px字号 */
  transition: all var(--transition-fast);  /* 过渡动画 */
}

.calendar__day--empty {  /* 空白天 */
  aspect-ratio: auto;  /* 取消正方形 */
}

.calendar__day--available {  /* 可预约日期 */
  background: rgba(72, 187, 120, 0.1);  /* 浅绿背景 */
  color: #48bb78;  /* 绿色文字 */
  font-weight: 600;  /* 半粗体 */
}

.calendar__day--available:hover {  /* 可预约日期悬停 */
  background: rgba(72, 187, 120, 0.2);  /* 稍深绿背景 */
  transform: scale(1.1);  /* 放大10% */
}

.calendar__day--booked {  /* 已约满日期 */
  background: rgba(229, 62, 62, 0.1);  /* 浅红背景 */
  color: #e53e3e;  /* 红色文字 */
  font-weight: 600;  /* 半粗体 */
}

.calendar__day--past {  /* 已过期日期 */
  color: var(--color-text-light);  /* 浅灰文字 */
  opacity: 0.5;  /* 半透明 */
}

.calendar__day--today {  /* 今天 */
  border: 2px solid var(--color-primary);  /* 主色边框 */
  font-weight: 700;  /* 粗体 */
}

.calendar__legend {  /* 图例区 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-lg);  /* 间距24px */
  justify-content: center;  /* 水平居中 */
  margin-top: var(--spacing-lg);  /* 顶部24px间距 */
  font-size: var(--font-size-xs);  /* 12px字号 */
}

.calendar__legend-item {  /* 图例项 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  gap: var(--spacing-xs);  /* 间距4px */
}

.calendar__legend-dot {  /* 图例圆点 */
  width: 10px;  /* 宽10px */
  height: 10px;  /* 高10px */
  border-radius: 50%;  /* 圆形 */
}

.calendar__legend-dot--available {  /* 可预约圆点 */
  background: #48bb78;  /* 绿色 */
}

.calendar__legend-dot--booked {  /* 已约满圆点 */
  background: #e53e3e;  /* 红色 */
}

.calendar__legend-dot--past {  /* 已过期圆点 */
  background: var(--color-text-light);  /* 浅灰 */
}

/* ==================================================================  404错误页面样式 */
/* ================================================================== */
.error-page {  /* 404页面 */
  min-height: 100vh;  /* 全屏高度 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: var(--color-bg-light);  /* 浅灰背景 */
  padding: var(--spacing-xl);  /* 32px内边距 */
}

.error-page__content {  /* 404内容 */
  text-align: center;  /* 文字居中 */
  max-width: 500px;  /* 最大宽度500px */
}

.error-page__icon {  /* 404图标 */
  font-size: 5rem;  /* 80px图标 */
  margin-bottom: var(--spacing-lg);  /* 底部24px间距 */
}

.error-page__code {  /* 404数字 */
  font-size: 8rem;  /* 128px超大字号 */
  font-weight: 800;  /* 特粗体 */
  line-height: 1;  /* 行高1 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.error-page__title {  /* 404标题 */
  font-size: var(--font-size-2xl);  /* 32px字号 */
  margin-bottom: var(--spacing-md);  /* 底部16px间距 */
}

.error-page__desc {  /* 404描述 */
  font-size: var(--font-size-base);  /* 16px字号 */
  color: var(--color-text-secondary);  /* 灰色文字 */
  line-height: 1.8;  /* 行高1.8倍 */
  margin-bottom: var(--spacing-2xl);  /* 底部48px间距 */
}

.error-page__actions {  /* 404操作按钮 */
  display: flex;  /* 弹性布局 */
  gap: var(--spacing-md);  /* 间距16px */
  justify-content: center;  /* 水平居中 */
  flex-wrap: wrap;  /* 允许换行 */
}

/* ==================================================================  新页面响应式适配 */
/* ================================================================== */
@media (max-width: 1023px) {  /* 平板端 */
  .about__profile {  /* 个人形象区 */
    flex-direction: column;  /* 纵向排列 */
    text-align: center;  /* 文字居中 */
  }

  .about__photo {  /* 摄影师照片 */
    width: 220px;  /* 宽220px */
    height: 220px;  /* 高220px */
  }

  .pricing__grid {  /* 套餐网格 */
    grid-template-columns: 1fr;  /* 单列 */
    max-width: 400px;  /* 最大宽度400px */
  }

  .pricing__card--popular {  /* 推荐套餐取消放大 */
    transform: none;  /* 不放大 */
  }

  .pricing__card--popular:hover {  /* 推荐套餐悬停 */
    transform: translateY(-8px);  /* 只上浮 */
  }

  .equipment__grid {  /* 设备网格 */
    grid-template-columns: repeat(2, 1fr);  /* 2列 */
  }

  .addon__grid {  /* 附加服务网格 */
    grid-template-columns: repeat(2, 1fr);  /* 2列 */
  }

  .process__arrow {  /* 流程箭头 */
    display: none;  /* 隐藏箭头 - 平板换行时不需要 */
  }

  .contact__grid {  /* 联系我双栏 */
    grid-template-columns: 1fr;  /* 单列 */
  }
}

@media (max-width: 767px) {  /* 手机端 */
  .about__photo {  /* 摄影师照片 */
    width: 180px;  /* 宽180px */
    height: 180px;  /* 高180px */
  }

  .about__stats {  /* 核心数据 */
    justify-content: center;  /* 居中 */
  }

  .timeline {  /* 时间轴 */
    padding-left: 30px;  /* 左侧30px */
  }

  .timeline::before {  /* 时间轴竖线 */
    left: 10px;  /* 左侧10px */
  }

  .timeline__dot {  /* 时间轴圆点 */
    left: -26px;  /* 向左偏移 */
  }

  .equipment__grid {  /* 设备网格 */
    grid-template-columns: 1fr;  /* 单列 */
  }

  .addon__grid {  /* 附加服务网格 */
    grid-template-columns: 1fr;  /* 单列 */
  }

  .process__steps {  /* 流程步骤 */
    flex-direction: column;  /* 纵向排列 */
  }

  .process__arrow {  /* 流程箭头 */
    transform: rotate(90deg);  /* 旋转90度 - 变成向下箭头 */
    display: block;  /* 显示 */
  }

  .contact__form-wrap {  /* 表单区域 */
    padding: var(--spacing-lg);  /* 24px内边距 */
  }

  .error-page__code {  /* 404数字 */
    font-size: 5rem;  /* 80px字号 */
  }

  .calendar {  /* 日历 */
    padding: var(--spacing-md);  /* 16px内边距 */
  }
}

/* ==================================================================  61快乐彩蛋样式 */
/* ==================================================================  双击页脚版权文字触发的全屏祝福特效 */

/* --- 彩蛋全屏覆盖层 --- */
.birthday-overlay {  /* 61快乐全屏层 - 初始隐藏 */
  position: fixed;  /* 固定定位 - 覆盖全屏 */
  top: 0;  /* 顶部对齐 */
  left: 0;  /* 左边对齐 */
  width: 100%;  /* 宽度100% */
  height: 100%;  /* 高度100% */
  z-index: 10000;  /* 最高层级 - 在所有内容之上 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: var(--birthday-bg, rgba(10, 10, 30, 0.92));  /* 深蓝黑半透明背景 - 梦幻氛围感，可用CSS变量修改 */
  backdrop-filter: blur(8px);  /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px);  /* Safari兼容 */
  opacity: 0;  /* 初始透明 - 不可见 */
  visibility: hidden;  /* 初始隐藏 - 不占空间不响应点击 */
  transition: opacity 0.5s ease, visibility 0.5s ease;  /* 淡入淡出过渡 */
  cursor: default;  /* 默认光标 - 不再点击关闭 */
  overflow: hidden;  /* 超出部分隐藏 - 纸屑不溢出 */
}  /* birthday-overlay结束 */

.birthday-overlay--active {  /* 彩蛋激活状态 */
  opacity: 1;  /* 完全不透明 - 可见 */
  visibility: visible;  /* 可见 - 可响应点击 */
}  /* birthday-overlay--active结束 */

/* --- 纸屑和星星飘落画布 --- */
.birthday-canvas {  /* 纸屑飘落区 - 覆盖整个彩蛋层 */
  position: absolute;  /* 绝对定位 */
  top: 0;  /* 顶部对齐 */
  left: 0;  /* 左边对齐 */
  width: 100%;  /* 宽度100% */
  height: 100%;  /* 高度100% */
  pointer-events: none;  /* 不响应鼠标事件 - 点击穿透到父层 */
  z-index: 1;  /* 在文字下面 */
}  /* birthday-canvas结束 */

/* --- 纸屑/星星元素 --- */
.birthday-confetti {  /* 单个纸屑/星星 */
  position: absolute;  /* 绝对定位 - 在画布内自由飘落 */
  top: -20px;  /* 初始在屏幕顶部外 */
  pointer-events: none;  /* 不响应鼠标事件 */
  z-index: 1;  /* 在文字下面 */
  animation: confettiFall linear forwards;  /* 飘落动画 - 匀速正向不循环 */
  will-change: transform, opacity;  /* 提示浏览器优化动画性能 */
}  /* birthday-confetti结束 */

@keyframes confettiFall {  /* 纸屑飘落动画 */
  0% {  /* 开始 */
    transform: translateY(0) rotate(0deg) scale(1);  /* 原位、无旋转、原始大小 */
    opacity: 1;  /* 完全不透明 */
  }  /* 0%结束 */
  70% {  /* 下落70%时 */
    opacity: 1;  /* 仍然可见 */
  }  /* 70%结束 */
  100% {  /* 结束 */
    transform: translateY(100vh) rotate(720deg) scale(0.3);  /* 落到底部、转两圈、缩小 */
    opacity: 0;  /* 完全透明 - 消失 */
  }  /* 100%结束 */
}  /* confettiFall结束 */

/* --- 祝福内容区 --- */
.birthday-content {  /* 祝福内容 - 文字居中区域 */
  position: relative;  /* 相对定位 */
  z-index: 2;  /* 在纸屑上面 */
  text-align: center;  /* 文字居中 */
  padding: 2rem;  /* 内边距 */
  max-width: 700px;  /* 最大宽度 - 手机不会太宽 */
  width: 90%;  /* 宽度90% - 响应式 */
}  /* birthday-content结束 */

/* --- 祝福大字 --- */
.birthday-text {  /* 祝福主文字 */
  font-size: var(--birthday-text-size, 2rem);  /* 祝福文字大小 - 可用CSS变量修改 */
  font-weight: 700;  /* 粗体 */
  color: #fff;  /* 白色文字 */
  line-height: 1.6;  /* 行高1.6倍 - 多行时好读 */
  text-shadow: 0 0 20px rgba(125, 211, 252, 0.6), 0 0 40px rgba(251, 182, 206, 0.4);  /* 浅蓝浅粉发光效果 */
  opacity: 0;  /* 初始透明 */
  transform: scale(0.5);  /* 初始缩小一半 */
  transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;  /* 淡入+弹性放大，延迟0.3s */
  word-break: break-word;  /* 长文字自动换行 */
}  /* birthday-text结束 */

.birthday-overlay--active .birthday-text {  /* 彩蛋激活时文字显示 */
  opacity: 1;  /* 完全可见 */
  transform: scale(1);  /* 恢复原始大小 */
}  /* birthday-overlay--active .birthday-text结束 */

/* --- 关闭提示小字 --- */
.birthday-hint {  /* 底部关闭提示 */
  font-size: 0.875rem;  /* 14px小字 */
  color: rgba(255, 255, 255, 0.5);  /* 半透明白色 */
  margin-top: 2rem;  /* 上边距 */
  opacity: 0;  /* 初始透明 */
  transition: opacity 0.6s ease 1s;  /* 淡入，延迟1s */
}  /* birthday-hint结束 */

.birthday-overlay--active .birthday-hint {  /* 彩蛋激活时提示显示 */
  opacity: 1;  /* 完全可见 */
}  /* birthday-overlay--active .birthday-hint结束 */

/* --- 音乐控制按钮 --- */
.birthday-music-btn {  /* 音乐开关按钮 */
  position: absolute;  /* 绝对定位 */
  bottom: 2rem;  /* 距底部2rem */
  right: 2rem;  /* 距右边2rem */
  z-index: 3;  /* 在纸屑上面 */
  width: 48px;  /* 宽48px */
  height: 48px;  /* 高48px */
  border: none;  /* 无边框 */
  border-radius: 50%;  /* 圆形 */
  background: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
  color: #fff;  /* 白色文字 */
  font-size: 1.5rem;  /* emoji大小 */
  cursor: pointer;  /* 鼠标变手型 */
  backdrop-filter: blur(6px);  /* 毛玻璃 */
  -webkit-backdrop-filter: blur(6px);  /* Safari兼容 */
  transition: background 0.3s ease, transform 0.2s ease;  /* 过渡效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  opacity: 0;  /* 初始透明 */
  visibility: hidden;  /* 初始隐藏 */
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease, transform 0.2s ease;  /* 全部过渡 */
}  /* birthday-music-btn结束 */

.birthday-overlay--active .birthday-music-btn {  /* 彩蛋激活时按钮可见 */
  opacity: 1;  /* 完全可见 */
  visibility: visible;  /* 可见 */
}  /* birthday-overlay--active .birthday-music-btn结束 */

.birthday-music-btn:hover {  /* 鼠标悬停 */
  background: rgba(255, 255, 255, 0.3);  /* 背景变亮 */
  transform: scale(1.1);  /* 放大10% */
}  /* birthday-music-btn:hover结束 */

.birthday-music-btn--muted {  /* 音乐静音状态 */
  opacity: 0.5;  /* 半透明 - 表示静音 */
}  /* birthday-music-btn--muted结束 */

/* --- 关闭按钮 --- */
.birthday-close-btn {  /* 关闭祝福按钮 - 右上角X号 */
  position: absolute;  /* 绝对定位 */
  top: 1.5rem;  /* 距顶部1.5rem */
  right: 1.5rem;  /* 距右边1.5rem */
  z-index: 4;  /* 在所有元素之上 */
  width: 44px;  /* 宽44px */
  height: 44px;  /* 高44px */
  border: none;  /* 无边框 */
  border-radius: 50%;  /* 圆形 */
  background: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
  color: rgba(255, 255, 255, 0.7);  /* 半透明白色X号 */
  font-size: 1.4rem;  /* X号大小 */
  cursor: pointer;  /* 鼠标变手型 */
  backdrop-filter: blur(6px);  /* 毛玻璃 */
  -webkit-backdrop-filter: blur(6px);  /* Safari兼容 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  opacity: 0;  /* 初始透明 */
  visibility: hidden;  /* 初始隐藏 */
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease, transform 0.2s ease, color 0.3s ease;  /* 全部过渡 */
  line-height: 1;  /* 行高1 - X号不偏 */
}  /* birthday-close-btn结束 */

.birthday-overlay--active .birthday-close-btn {  /* 彩蛋激活时关闭按钮可见 */
  opacity: 1;  /* 完全可见 */
  visibility: visible;  /* 可见 */
}  /* birthday-overlay--active .birthday-close-btn结束 */

.birthday-close-btn:hover {  /* 鼠标悬停关闭按钮 */
  background: rgba(255, 100, 100, 0.4);  /* 淡红色背景 - 提示关闭 */
  color: #fff;  /* 白色X号 */
  transform: scale(1.1);  /* 放大10% */
}  /* birthday-close-btn:hover结束 */

/* --- 版权文字双击提示效果 --- */
#footerCopyright {  /* 版权文字 - 可双击触发彩蛋 */
  cursor: default;  /* 默认光标 */
  user-select: none;  /* 禁止选中 - 防止双击选中文字 */
  -webkit-user-select: none;  /* Safari兼容 */
}  /* #footerCopyright结束 */

/* --- 生日彩蛋响应式 --- */
@media (max-width: 768px) {  /* 手机端适配 */
  .birthday-text {  /* 祝福文字 */
    font-size: var(--birthday-text-size-mobile, 1.3rem);  /* 手机上字小一点，可用CSS变量修改 */
  }  /* .birthday-text结束 */

  .birthday-music-btn {  /* 音乐按钮 */
    bottom: 1rem;  /* 距底部1rem */
    right: 1rem;  /* 距右边1rem */
    width: 40px;  /* 宽40px */
    height: 40px;  /* 高40px */
    font-size: 1.2rem;  /* emoji稍小 */
  }  /* .birthday-music-btn结束 */

  .birthday-close-btn {  /* 关闭按钮手机端 */
    top: 1rem;  /* 距顶部1rem */
    right: 1rem;  /* 距右边1rem */
    width: 36px;  /* 宽36px */
    height: 36px;  /* 高36px */
    font-size: 1.1rem;  /* X号稍小 */
  }  /* .birthday-close-btn手机端结束 */
}  /* 手机端适配结束 */

@media (max-width: 480px) {  /* 小屏手机适配 */
  .birthday-text {  /* 祝福文字 */
    font-size: 1.1rem;  /* 更小的字 */
  }  /* .birthday-text结束 */
}  /* 小屏手机适配结束 */

/* ==================================================================  浏览器兼容性修复 */
/* ==================================================================  处理不同浏览器的CSS差异 */

/* --- Safari日期输入框兼容 --- */
@supports not (backdrop-filter: blur(1px)) {  /* 如果不支持backdrop-filter（旧Safari） */
  .birthday-overlay {  /* 彩蛋覆盖层降级 */
    background: rgba(10, 10, 30, 0.98);  /* 用更深的纯色替代毛玻璃 */
  }  /* .birthday-overlay降级结束 */
}  /* Safari兼容结束 */

/* --- Firefox兼容：平滑滚动 --- */
@supports (scroll-behavior: smooth) {  /* 如果浏览器支持CSS平滑滚动 */
  html {  /* 根元素 */
    scroll-behavior: smooth;  /* 启用CSS原生平滑滚动 - 作为JS平滑滚动的备选 */
  }  /* html结束 */
}  /* Firefox兼容结束 */