/* scene-06.css — Scene 6 「AI가 대신 팔로우업한다」 (기획 8절)
   시장이 만드는 정보와 내가 가진 정보가 한가운데로 모여 하나의 문장이 된다.
   모션 밀도 90% — 발표의 전환점이다. */

.s6__inner { display: grid; justify-items: center; gap: var(--ns-dimension-x16); width: 1680px; }

.s6__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ns-dimension-x24);
  width: 100%;
}
.s6__col { display: grid; align-content: start; gap: var(--ns-dimension-x4); }
.s6__col[data-side="market"] { justify-items: end; text-align: right; }
.s6__col[data-side="user"] { justify-items: start; text-align: left; }

.s6__head {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t7);
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--ns-color-fg-neutral-subtle);
  margin-bottom: var(--ns-dimension-x4);
  opacity: 0;
  transition: opacity 520ms var(--ns-timing-function-easing);
}
.s6__item {
  font-size: var(--ns-font-size-t12);
  line-height: 1.45;
  font-weight: var(--ns-font-weight-bold);
  color: var(--ns-color-fg-neutral);
  opacity: 0;
  transition: opacity 520ms var(--ns-timing-function-enter),
              transform 760ms var(--ns-timing-function-exit-expressive);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.s6__col[data-side="market"] .s6__item { transform: translateX(-70px); }
.s6__col[data-side="user"] .s6__item { transform: translateX(70px); }

/* ── 한가운데의 AI ── */
.s6__ai {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--ns-dimension-x5);
  justify-items: center;
}
.s6__mark {
  width: 224px;
  height: 224px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-color-bg-neutral-solid);
  color: var(--ns-color-fg-neutral-inverted);
  display: grid;
  place-items: center;
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t14);
  font-weight: var(--ns-font-weight-bold);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: scale(0.62);
  transition: opacity 560ms var(--ns-timing-function-enter),
              transform 640ms var(--ns-timing-function-enter-expressive);
  z-index: var(--ns-z-default);
}
/* 하는 일은 한 자리에서 갈아 끼운다 */
.s6__verbs { display: grid; height: 64px; align-items: center; z-index: var(--ns-z-default); }
.s6__verbs span {
  grid-area: 1 / 1;
  font-size: var(--ns-font-size-t12);
  line-height: 1;
  font-weight: var(--ns-font-weight-bold);
  color: var(--ns-color-fg-neutral-muted);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--ns-timing-function-enter), transform 420ms var(--ns-timing-function-enter);
}

/* ── AI 둘레의 정보 조각. 동사마다 다르게 움직인다 (기획 6절 모션 문법) ── */
.s6__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: var(--ns-dimension-x2) var(--ns-dimension-x4);
  border-radius: var(--ns-radius-full);
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  background: var(--ns-color-bg-layer-default);
  font-size: var(--ns-font-size-t6);
  line-height: 1.4;
  font-weight: var(--ns-font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 520ms var(--ns-timing-function-enter),
              transform 620ms var(--ns-timing-function-enter-expressive);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* 조각에서 AI 쪽으로 그어지는 선 */
.s6__orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--len, 180px);
  height: 2px;
  margin-top: -1px;
  background: var(--ns-color-fg-neutral-muted);
  transform-origin: left center;
  transform: rotate(var(--back, 0deg)) scaleX(0);
  transition: transform 520ms var(--ns-timing-function-enter);
  transition-delay: calc(var(--i, 0) * 70ms);
  z-index: -1;
}

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

/* ── 1 양쪽 정보가 선다 ── */
.s6[data-step="1"] .s6__head, .s6[data-step="2"] .s6__head { opacity: 1; }
.s6[data-step="1"] .s6__item, .s6[data-step="2"] .s6__item { opacity: 1; transform: none; }

/* ── 2 AI가 나타난다 ── */
.s6[data-step="2"] .s6__mark, .s6[data-step="3"] .s6__mark, .s6[data-step="4"] .s6__mark { opacity: 1; transform: none; }

/* ── 3 정보가 AI로 빨려 들어간다. dx·dy 는 JS가 실제 거리로 채운다 ── */
.s6[data-step="3"] .s6__item,
.s6[data-step="4"] .s6__item {
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.34);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.s6[data-verb="1"] [data-verb="1"], .s6[data-verb="2"] [data-verb="2"],
.s6[data-verb="3"] [data-verb="3"], .s6[data-verb="4"] [data-verb="4"] { opacity: 1; transform: none; }

/* 수집하고 — 흩어져 있던 것이 AI 둘레에 자리잡는다 */
.s6[data-verb="1"] .s6__orbit,
.s6[data-verb="2"] .s6__orbit,
.s6[data-verb="3"] .s6__orbit {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--ox), var(--oy));
}
/* 선별하고 — 투자와 무관한 것은 아래로 떨어진다 */
.s6[data-verb="2"] .s6__orbit[data-drop],
.s6[data-verb="3"] .s6__orbit[data-drop] {
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--ox), calc(var(--oy) + 520px)) scale(0.8);
  transition-delay: calc(var(--i, 0) * 50ms);
}
/* 연결하고 — 남은 것이 내 정보와 이어진다 */
.s6[data-verb="3"] .s6__orbit:not([data-drop])::before { transform: rotate(var(--back, 0deg)) scaleX(1); }
/* 해석합니다 — 이어진 것들이 하나로 합쳐진다 */
.s6[data-verb="4"] .s6__orbit {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.34);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.s6[data-verb="4"] .s6__mark { transform: scale(1.07); }

/* ── 4 한 문장으로 ── */
.s6[data-step="4"] .s6__copy { opacity: 1; transform: none; }
.s6[data-step="4"] .s6__verbs span { opacity: 0; }
.s6[data-step="4"] .s6__mark { transform: scale(0.82); opacity: 0.5; }
.s6[data-step="4"] .s6__orbit { opacity: 0; }