/* BackgroundImage.css */

.background-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transform-origin: center center;
  transition: transform 0.1s linear;
  /* 调试边框 */
  border: 2px solid rgba(0, 255, 51, 0.71);
}

/* 卷云层样式 */
.cloud-layer {
  background-size: 20% auto; /* 卷云图片的background-size */
}

/* 雷云层样式 */
.thunder-layer {
  background-size: 23% auto; /* 雷云图片的background-size */
}

/* 烛火层样式 */
.candle-layer {
  background-size: 15% auto; /* 烛火图片的background-size */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cloud-layer {
    background-size: 30% auto;
  }
  .thunder-layer {
    background-size: 30% auto;
  }
  .candle-layer {
    background-size: 30% auto;
  }
}

@media (max-width: 480px) {
  .cloud-layer {
    background-size: 40% auto;
  }
  .thunder-layer {
    background-size: 40% auto;
  }
  .candle-layer {
    background-size: 40% auto;
  }
}

/* 性能优化 - 减少动画对低性能设备的影响 */
@media (prefers-reduced-motion: reduce) {
  .background-layer {
    transition: none;
  }
}