/* ===== 微生物影响部分样式 ===== */

/* 主容器 */
.micro-organism-effect {
  min-height: clamp(560px, 92svh, 1200px);
  margin-bottom: clamp(6rem, 8vw, 9rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

/* 背景盒子 */
.mo-bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to bottom, #c8f0e0, #f0f0d0); */
  z-index: -1;
}

/* 内容容器  */
.mo-wrap {
  --page-max: 1150px;
  --side-pad: clamp(16px, 4vw, 48px);
  width: min(var(--page-max), 100%);
  padding-inline: var(--side-pad);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 9vw, 6rem);
}

/* 项目容器 */
.mo-item {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem);
  width: 100%;
  cursor: pointer;
  /* 提示整个项目可交互 */
}

/* 图片容器 - 悬停偏移 */
.mo-img-box {
  flex-shrink: 0;
  width: clamp(100px, 20vw, 180px);
  box-shadow: 10px 20px 20px rgba(99, 99, 99, 0.50);
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

/* 图片悬停偏移 */
.mo-item:hover .mo-img-box {
  transform: scale(1.05) rotate(3deg);
}

/* 微生物图片 */
.mo-img {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform, opacity;
  object-fit: cover;
}

/* 文字容器 - 默认隐藏，hover时显示并添加上浮效果 */
.mo-text-box {
  flex-grow: 1;
  min-height: clamp(120px, 25vw, 150px);
  width: clamp(250px, 55vw, 650px);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-shadow: 10px 20px 20px rgba(99, 99, 99, 0.50);
  border-radius: 100px;
  /* 默认隐藏样式 */
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: all 0.4s ease;
  /* 显示过渡动画 */
}

/* 1. 左侧文字框（图片在右）：从左到右渐变 */
.mo-item>.mo-text-box:first-child {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(225, 254, 234, 0.95));
}

/* 2. 右侧文字框（图片在左）：从右到左渐变 */
.mo-item>.mo-text-box:nth-child(2) {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(225, 254, 234, 0.95));
}

/* 鼠标悬停在mo-item上时显示文字框并添加上浮效果 */
.mo-item:hover .mo-text-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 10px 20px 25px rgba(99, 99, 99, 0.55);
}

/* 激活状态：文字框永久显示 */
.mo-item.active .mo-text-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 已激活状态下，鼠标再次悬停文字框上浮增强效果 */
.mo-item.active:hover .mo-text-box {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 12px 25px 30px rgba(99, 99, 99, 0.6);
}

/* 文字样式 - 悬停时颜色变化 */
.mo-text-box p {
  font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  color: #6baf9e;
  margin: 0;
  z-index: 1;
  transition: color 0.3s ease;
}

/* 文字颜色变化效果 */
.mo-item:hover .mo-text-box p,
.mo-item.active .mo-text-box p {
  color: #559180;
}

/* 响应式调整 - 小屏幕堆叠显示 */
@media (max-width: 768px) {
  .mo-item {
    flex-direction: column;
    align-items: center;
  }

  .mo-img-box {
    width: 100%;
    max-width: 160px;
    margin: 0 auto 1rem;
  }

  .mo-text-box {
    width: 100%;
    min-height: 100px;
    border-radius: 50px;
  }

  /* 小屏幕下的上浮效果调整 */
  .mo-item.active:hover .mo-text-box {
    transform: translateY(-3px) scale(1.01);
  }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {

  .mo-img-box,
  .mo-text-box {
    transition: none;
  }

  .mo-text-box {
    opacity: 1;
    transform: none;
  }

  .mo-img {
    will-change: auto;
  }
}