/* 냉수 이미지와 문구가 스크롤에 반응하는 전체 구간입니다. */
body .cold-water-manifesto {
  --water-rise: 0%;
  --water-shift: 0px;
  --water-image-opacity: 1;
  position: relative;
  display: block;
  min-height: 210svh;
  overflow: clip;
  background: #fffefa;
}

/* 화면에 고정되어 문구와 냉수 이미지를 보여주는 내부 무대입니다. */
body .cold-water-manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 54% 26%,
      rgba(207, 238, 250, 0.26),
      transparent 24%
    ),
    #fffefa;
}

/* 스크롤 진행도에 따라 아래에서 차오르는 물 배경입니다. */
body .cold-water-rise {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--water-rise);
  min-height: 0;
  background: linear-gradient(
    180deg,
    rgba(232, 248, 253, 0.54) 0%,
    rgba(190, 226, 240, 0.7) 38%,
    rgba(155, 208, 229, 0.76) 72%,
    rgba(132, 197, 223, 0.8) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 46px,
    #000 96px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 46px,
    #000 96px
  );
  transition: height 80ms linear;
}

/* 순서대로 나타나는 교회 소개 문구입니다. */
body .cold-water-manifesto-copy {
  position: absolute;
  z-index: 3;
  top: 23%;
  left: 10vw;
  display: flex;
  width: min(38vw, 500px);
  flex-direction: column;
  gap: 5px;
  color: #173142;
  font-size: clamp(1.12rem, 1.65vw, 1.55rem);
  font-weight: 520;
  line-height: 1.65;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

body .cold-water-manifesto-copy span,
body .cold-water-manifesto-copy strong {
  display: block;
  color: inherit;
  opacity: 1;
  transform: none;
  will-change: opacity, transform;
}

body .cold-water-manifesto-copy strong {
  margin-top: 8px;
  color: #2f78a8;
  font-size: 1.08em;
  font-weight: 700;
}

/* 중앙의 냉수 이미지는 하단으로 갈수록 배경에 자연스럽게 녹아듭니다. */
body .cold-water-illustration {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 50%;
  width: min(35vw, 430px);
  height: 96%;
  margin: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 76%,
    rgba(0, 0, 0, 0.82) 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 76%,
    rgba(0, 0, 0, 0.82) 86%,
    transparent 100%
  );
  opacity: var(--water-image-opacity);
  transform: translateX(-50%) translateY(var(--water-shift));
  transition: opacity 80ms linear;
  will-change: transform, opacity;
}

body .cold-water-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.12) contrast(1.06);
}

/* 넓은 화면에서는 문구와 이미지가 본문 중앙을 기준으로 정렬됩니다. */
@media (min-width: 1500px) {
  body .cold-water-manifesto-copy {
    left: calc(50% - 520px);
  }

  body .cold-water-illustration {
    left: 52%;
  }
}

/* 모바일에서는 문구를 위로 올리고 냉수 이미지를 화면 폭에 맞춥니다. */
@media (max-width: 680px) {
  body .cold-water-manifesto {
    min-height: 158svh;
  }

  body .cold-water-manifesto-sticky {
    min-height: 640px;
  }

  body .cold-water-manifesto-copy {
    top: 10%;
    left: 20px;
    width: calc(100% - 40px);
    gap: 2px;
    font-size: clamp(1.16rem, 5.4vw, 1.42rem);
    line-height: 1.52;
  }

  body .cold-water-illustration {
    top: 22%;
    left: 50%;
    width: min(88vw, 360px);
    height: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .cold-water-manifesto {
    min-height: auto;
  }
  body .cold-water-manifesto-sticky {
    position: relative;
  }
}