/* 注入 CSS 文件修改 CSS 变量使用示例 */

:root {
   /* 修改全局默认字体大小 */
   --base-font-size: 16px;

   /* 修改全局默认字体样式 */
   --base-font-family: STSong, STHeiti;

   /* 设置模块卡片的边框圆角 */
   --box-border-radius: 10px;

   /* 设置 Header 头部高度 */
   --header-height: 60px;

   /* 
      设置 Header 头部收缩时的高度
      必须小于 Header 头部正常状态的高度
   */
   --header-shrink-height: 50px;

   /* 设置 Header 头部的背景毛玻璃效果程度 */
   --header-backdrop-filter-blur: 5px;

   /* 设置首屏的文字字体大小 */
   --first-screen-font-size: 28px;

   /* 设置首屏的图标字体大小 */
   --first-screen-icon-size: 30px;

   /* 设置首屏的文字颜色（亮色） */
   --first-screen-font-color-light: rgba(255, 192, 203, 0.90);

   /* 设置首屏的文字颜色（暗色） */
   --first-screen-font-color-dark: rgba(135, 206, 235, 0.90);

   /* 设置首页文章模块鼠标悬浮时的缩放级别 */
   --home-post-hover-scale: 1.05;

   /* 隐藏文章内容页面作者头像 */
   --post-author-avatar: none;

   /* 隐藏文章内容页面的文章创建时间 */
   --post-create-datetime: none;

   /* 隐藏文章内容页面的文章修改时间 */
   --post-update-datetime: none;

   /* 
      设置文章中的图片排列位置
      居左：0 auto 0 0 （默认）
      居中：0 auto
      居右：0 0 0 auto
   */
   --post-img-align: 0 auto 0 0;

   /* 设置页面内容区域的最大宽度（默认 928px） */
   --page-content-max-width: 1000px;
}

/* ========== 首屏美化样式 ========== */

/* 首屏描述文字容器 */
.first-screen-container .description {
   font-family: 'KaiTi', 'STKaiti', 'FangSong', 'STFangsong', serif !important;
   font-size: 32px !important;
   line-height: 1.8 !important;
   letter-spacing: 3px !important;
   font-weight: 500 !important;
   text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
   animation: fadeInUp 1.5s ease-out, float 6s ease-in-out infinite;
}

/* 亮色模式渐变文字 */
[data-theme="light"] .first-screen-container .description {
   background: linear-gradient(135deg, 
      #667eea 0%, 
      #764ba2 25%, 
      #f093fb 50%, 
      #4facfe 75%, 
      #667eea 100%
   );
   background-size: 300% 300%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: fadeInUp 1.5s ease-out, float 6s ease-in-out infinite, gradientShift 8s ease infinite;
}

/* 暗色模式渐变文字 */
[data-theme="dark"] .first-screen-container .description {
   background: linear-gradient(135deg, 
      #a8edea 0%, 
      #fed6e3 25%, 
      #a6c1ee 50%, 
      #fbc2eb 75%, 
      #a8edea 100%
   );
   background-size: 300% 300%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: fadeInUp 1.5s ease-out, float 6s ease-in-out infinite, gradientShift 8s ease infinite;
}

/* 渐变色流动动画 */
@keyframes gradientShift {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}

/* 淡入上浮动画 */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* 轻柔浮动动画 */
@keyframes float {
   0%, 100% {
      transform: translateY(0px);
   }
   50% {
      transform: translateY(-10px);
   }
}

/* 首屏标题美化 */
.first-screen-container .title {
   font-family: 'KaiTi', 'STKaiti', serif !important;
   font-size: 48px !important;
   font-weight: 600 !important;
   letter-spacing: 5px !important;
   text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
   animation: fadeInDown 1.2s ease-out;
}

/* 标题淡入下落动画 */
@keyframes fadeInDown {
   from {
      opacity: 0;
      transform: translateY(-30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* 首屏图标美化 */
.first-screen-container .s-icon-list {
   animation: fadeIn 2s ease-out 0.5s both;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

/* 首屏图标悬浮效果 */
.first-screen-container .s-icon-item {
   transition: all 0.3s ease;
}

.first-screen-container .s-icon-item:hover {
   transform: translateY(-5px) scale(1.1);
   filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}