/* ===== 第四屏（however） ===== */

.however {
  min-height: clamp(560px, 92svh, 900px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.how-wrap {
  --page-max: 1400px;
  --side-pad: clamp(16px, 4vw, 48px);
  width: min(var(--page-max), 100%);
  padding-inline: var(--side-pad);
  display: grid;
  place-items: center;
  text-align: center;
  max-width: 1500px;
  position: relative;
}

/* 污渍 */
.stain {
  position: absolute;
  top: 20%;
  left: 30%;
  transform: translate(-50%, -50%);
  background-image: url("https://static.igem.wiki/teams/5550/pic/forth/spot2-1.webp");
  background-size: contain;
  background-repeat: no-repeat;
  width: 500px;
  height: 350px;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 标题样式 */
.how-wrap h1 {
  font-size: clamp(2.0rem, 8vw, 5rem);
  font-weight: 700;
  margin: 0 0 1.3em;
  line-height: 1.2;
  color: #1a4a2a;
  letter-spacing: -0.02em;
}


/* 正文文本样式 */
.how-wrap p {
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  line-height: 2.5;
  color: #000000;
  font-weight: 400;
  margin: 0;
}

/* 单行文本样式 */
.text-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  display: inline-block;
}

.how-wrap h1,
.text-line {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


/* 加粗强调文本样式 */
.how-wrap strong {
  font-weight: 600;
  color: #a38500;
}

/* 显示状态 */
.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .how-wrap h1 {
    margin-bottom: 1em;
  }

  .how-wrap {
    line-height: 1.6;
  }
}