.counter {
  font-size: 2.5rem; /* 数字更大 */
}
/* 图标容器 */
#floating-icon {
  position: absolute; /* 初始在内容区 */
  top: 0;
  left: 25px;
  width: 100px;
  height: 100px;
}

#floating-icon.fixed {
  position: fixed; /* 滚动到左上角后固定 */
  top: 100px;
  left: 25px;
  z-index: 1000;
  transition: opacity 2s ease; /* 切换时更平滑 */
}

/* 创建固定在视口上的云朵背景层 */
.cloud-wrapper::before {
  content: "";
  position: absolute; /* 固定在视口，而不是父元素 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10; /* 放置在所有内容的下方 */

  /* 设置乌云图片和固定效果 */
}

/* 确保 .cloud-wrapper 容器本身也设置了背景色 */
.cloud-wrapper {
  height: 100vh;
  background-image: none;
  background-size: initial;
  background-position: initial;
  background-color: #fffddc;
  position: relative;
}

/* 乌云过度样式 */
#cloud-img {
  position: relative; /* 初始跟随文档流 */
  transition: all 0.3s ease;
}
#cloud_text {
  position: absolute;
  top: 70% !important;
  left: 50%;
  transform: translate(-50%, -50%); /* 保持完美水平居中和垂直偏移 */
}
/* 动画容器 - 用于CSS滚动驱动 */
.animation-container {
  position: relative;
  height: 300vh; /* 为CSS滚动动画提供空间 */
}

/* 稻草图片基础样式 */
.straw-img {
  position: fixed;
  top:12%;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}

.straw-img:first-of-type {
  opacity: 1;
}

/* 燃烧稻草初始隐藏，随后会被动画控制 */
.burn-straw {
  opacity: 0;
}

/* 文字元素初始隐藏 */
#text1,
#text2 {
  opacity: 0;
  position: fixed; /* 在 animation-container 固定时，内容也需要 fixed */
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式确保文字居中和可见 */
  width: 90%;
  max-width: 1000px;
  /* 响应式字体大小，确保文字在缩放时仍清晰 */
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 99;
}
@media (max-width: 576px) {
  .cloud-text {
    font-size: 1rem;
    bottom: 6%;
  }
  .straw-img {
    width: 160px;
  }
}