/* 
   样式控制文件
   着陆页自定义样式表 - 粒子背景与响应式布局配置
*/

/* 
   粒子渲染容器配置
   确保粒子背景覆盖整个视窗并位于所有内容层级之下
   使用固定定位和负z-index实现背景穿透效果
*/
#tsparticles {
   position: fixed;
   /* 将元素固定在浏览器视窗中，不随滚动移动 */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* 将粒子背景层置于所有内容之下 */
   pointer-events: none;
   /* 允许鼠标事件穿透到上层元素 */
}

/* 
   全局基础样式配置
   页面最小高度和定位上下文设置
*/
body {
   min-height: 100vh;
   /* 确保页面最小高度为视窗高度 */
   position: relative;
   /* 建立定位上下文 */
   /* 背景色和文本颜色主要通过Bootstrap类和深色/浅色主题系统管理 */
}

/* 
   占位符图片样式
   使SVG内部文本不可选择并居中显示
   跨浏览器兼容性前缀处理
*/
.bd-placeholder-img {
   font-size: 1.125rem;
   /* 占位符文本字体大小 */
   text-anchor: middle;
   /* SVG文本水平居中锚点 */
   -webkit-user-select: none;
   /* WebKit内核浏览器文本选择禁用 */
   -moz-user-select: none;
   /* Firefox浏览器文本选择禁用 */
   user-select: none;
   /* 标准属性：禁止用户选择文本 */
}

/* 
   媒体查询 - 响应式断点配置
   针对中等及以上尺寸屏幕的特殊样式规则
*/
@media (min-width: 768px) {
   .bd-placeholder-img-lg {
      font-size: 3.5rem;
      /* 大屏幕下放大占位符文本 */
   }
}

/* 
   深色/浅色主题自定义覆盖规则
   在Bootstrap默认主题基础上进行额外的颜色微调
   确保粒子背景在深色模式下的文本可读性
*/

[data-bs-theme="dark"] body {
   /* 可选：略微透明的背景色以增强粒子可见性 */
   /* background-color: rgba(33, 37, 41, 0.8) !important; */
}

/* 相册主容器：半透明背景配合毛玻璃特效，使粒子动画在背景中隐约可见 */
.album {
   background-color: rgba(248, 249, 250, 0.85);
   /* 默认浅色半透明背景 */
   backdrop-filter: blur(5px);
   /* 高斯模糊背景滤镜效果 */
}

/* 深色模式下的相册容器背景覆盖 */
[data-bs-theme="dark"] .album {
   background-color: rgba(33, 37, 41, 0.85) !important;
   /* 深色半透明背景 */
}

/* 页脚定位与样式 */
footer {
   position: relative;
   z-index: 1;
   /* 确保页脚层级高于粒子背景层 */
   background-color: rgba(255, 255, 255, 0.9);
   /* 浅色模式页脚背景 */
}

/* 深色模式页脚背景覆盖 */
[data-bs-theme="dark"] footer {
   background-color: rgba(33, 37, 41, 0.9);
   /* 深色模式页脚背景 */
}