/* WebGL Fluid Background Styles */

#fluid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: auto; /* 允许鼠标交互 */
  opacity: 0.5; /* 调整透明度，使背景不会过于抢眼 */
}

/* 确保内容在背景之上 */
.content {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景，提高内容可读性 */
  min-height: 100vh;
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

/* 导航栏也需要在背景之上 */
#navbar {
  position: relative;
  z-index: 1000;
  background-color: rgba(250, 250, 250, 0.98); /* 导航栏半透明背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari 支持 */
}

/* 进度条也需要在背景之上 */
#progress {
  position: relative;
  z-index: 999;
}

/* 页脚样式 */
footer {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 20px;
  text-align: center;
}

/* 响应式设计：移动设备上降低背景效果 */
@media (max-width: 768px) {
  #fluid-canvas {
    opacity: 0.3; /* 移动设备上降低透明度 */
  }
  
  .content {
    background-color: rgba(255, 255, 255, 0.95);
  }
}