/* ===================== 光子血液动画统一样式 ===================== */
/* 血液动画画布基础样式 */
#bloodCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* 确保在背景层但可点击 */
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: auto; /* 允许接收点击事件 */
}

#bloodCanvas.active {
  opacity: 1;
}


/* 不同页面的光子血液背景样式 */
/* 首页背景 - 使用图片 */
.background-layer.home-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../首页背景.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0A2A40;
  background-blend-mode: overlay;
  z-index: -1;
  display: none;
}

.background-layer.home-bg.active {
  display: block;
}

/* About页面背景 - 统一深色科技感背景 */
.background-layer.about-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A0E1A 0%, #1A1F3A 50%, #0A0E1A 100%);
  z-index: -1;
  display: none;
}

.background-layer.about-bg.active {
  display: block;
}

/* Product页面背景 - 统一深色科技感背景 */
.background-layer.product-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A0E1A 0%, #1A1F3A 50%, #0A0E1A 100%);
  z-index: -1;
  display: none;
}

.background-layer.product-bg.active {
  display: block;
}

/* Partners页面背景 - 统一深色科技感背景 */
.background-layer.partners-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A0E1A 0%, #1A1F3A 50%, #0A0E1A 100%);
  z-index: -1;
  display: none;
}

.background-layer.partners-bg.active {
  display: block;
}

/* Contact页面背景 - 统一深色科技感背景 */
.background-layer.contact-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A0E1A 0%, #1A1F3A 50%, #0A0E1A 100%);
  z-index: -1;
  display: none;
}

.background-layer.contact-bg.active {
  display: block;
}

/* News页面背景 - 统一深色科技感背景 */
.background-layer.news-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0A0E1A 0%, #1A1F3A 50%, #0A0E1A 100%);
  z-index: -1;
  display: none;
}

.background-layer.news-bg.active {
  display: block;
}

/* 移动端适配 */
@media (max-width: 480px) {
  /* 血液动画画布适配小屏 */
  #bloodCanvas {
    width: 100vw;
    height: 100vh;
  }

  /* 移动端减少背景复杂度 */
  .background-layer {
    background-blend-mode: normal;
  }

  /* 移动端固定首页背景图片大小，防止缩放 */
  .background-layer.home-bg {
    background-size: auto;
    background-position: center top;
  }
}

/* 横竖屏切换适配 */
@media (orientation: landscape) and (max-height: 500px) {
  #bloodCanvas {
    width: 100vw;
    height: 100vh;
  }
}