/* scene-04.css — Scene 4 「기존 서비스가 주는 답」 (기획 8절)
   세 서비스가 각자의 답을 내놓지만, 어느 것도 내 포트폴리오까지 닿지 않는다.
   그 닿지 않는 거리가 이 장면의 메시지다. */

.s4__inner {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 1560px;
}

/* 카드 그리드를 쓰지 않는다(기획 5.3). 가는 세로선으로만 나눈 세 칼럼 */
.s4__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.s4__col {
  display: grid;
  align-content: start;
  gap: var(--ns-dimension-x5);
  padding: 0 var(--ns-dimension-x10);
  text-align: center;
  opacity: 0;
  transition: opacity 620ms var(--ns-timing-function-enter), transform 720ms var(--ns-timing-function-enter);
}
.s4__col + .s4__col { border-left: 1px solid var(--ns-color-stroke-neutral-muted); }
.s4__col[data-from="left"] { transform: translateX(-180px); }
.s4__col[data-from="right"] { transform: translateX(180px); }
.s4__col[data-from="up"] { transform: translateY(-90px); }
.s4__label {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t9);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--ns-color-fg-neutral-subtle);
}
.s4__answer { color: var(--ns-color-fg-neutral); }

/* 각 서비스에서 뻗어 나오는 선. 질문에 닿기 전에 끊긴다 */
.s4__reaches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  justify-items: center;
  margin-top: var(--ns-dimension-x10);
}
.s4__reaches i {
  display: block;
  width: 2px;
  height: 150px;
  background: repeating-linear-gradient(to bottom,
    var(--ns-color-fg-noise) 0 9px, transparent 9px 18px);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 620ms var(--ns-timing-function-exit);
}
.s4__reaches i:nth-child(2) { transition-delay: 90ms; }
.s4__reaches i:nth-child(3) { transition-delay: 180ms; }

/* 선의 끝과 질문 사이에 남는 거리 — 이 장면이 말하려는 공백 */
.s4__gap { height: 132px; }

.s4__question {
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ns-timing-function-enter), transform 700ms var(--ns-timing-function-enter);
}

/* 1 세 서비스가 들어온다 */
.s4[data-step="1"] .s4__col,
.s4[data-step="2"] .s4__col,
.s4[data-step="3"] .s4__col { opacity: 1; transform: none; }
.s4[data-step="1"] .s4__col[data-from="right"] { transition-delay: 120ms; }
.s4[data-step="1"] .s4__col[data-from="up"] { transition-delay: 240ms; }

/* 2 질문이 서고, 서비스 쪽에서 선이 내려오지만 닿지 않는다 */
.s4[data-step="2"] .s4__reaches i,
.s4[data-step="3"] .s4__reaches i { transform: scaleY(1); }
.s4[data-step="2"] .s4__question,
.s4[data-step="3"] .s4__question { opacity: 1; transform: none; }

/* 3 최종 상태에서도 세 서비스와 연결 시도를 유지한다. */