/* scene-05.css — Scene 5 「같은 뉴스, 다른 중요도」 (기획 8절)
   하나였던 뉴스가 둘로 갈라져 두 사람에게 간다. 한쪽에서는 가라앉고 한쪽에서는 커진다. */

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

.s5__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ns-dimension-x30);
  width: 100%;
}
.s5__side {
  display: grid;
  align-content: start;          /* 두 칼럼의 높이가 달라도 카드 높이가 어긋나지 않게 */
  justify-items: center;
  gap: var(--ns-dimension-x8);
  transition: transform 720ms var(--ns-timing-function-enter-expressive),
              opacity 620ms var(--ns-timing-function-easing);
}

.s5__who {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t7);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ns-color-fg-neutral-subtle);
  opacity: 0;
  transition: opacity 560ms var(--ns-timing-function-enter);
}

/* 두 장의 뉴스 카드는 처음에 화면 중앙에 겹쳐 있어 한 장으로 보인다 */
.s5__news { transition: transform 760ms var(--ns-timing-function-enter-expressive), opacity 500ms; opacity: 0; }
.s5__side[data-user="a"] .s5__news { transform: translateX(450px); }
.s5__side[data-user="b"] .s5__news { transform: translateX(-450px); }
.s5__news .ns-event {
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
  padding: var(--ns-dimension-x4) var(--ns-dimension-x6);
}
.s5__news .ns-event__icon { --ns-icon-size: 28px; }

.s5__folio { opacity: 0; transition: opacity 620ms var(--ns-timing-function-enter); width: 100%; display: grid; justify-items: center; }
.s5 .ns-portfolio { max-width: 600px; }
.s5 .ns-portfolio__row { grid-template-columns: 150px minmax(0, 1fr) 76px; font-size: var(--ns-font-size-t8); }
.s5 .ns-portfolio__summary { font-size: var(--ns-font-size-t8); }
.s5 .ns-portfolio__summary-value { font-size: var(--ns-font-size-t13); }
/* 색이 바뀌는 것 자체가 "반응"이므로 전환을 준다 (Design.md 10.1 color-transition) */
.s5 .ns-portfolio__fill,
.s5 .ns-portfolio__name,
.s5 .ns-portfolio__weight,
.s5 .ns-portfolio__row { transition: background 620ms var(--ns-timing-function-easing), color 620ms var(--ns-timing-function-easing); }

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

/* 1 한 장의 뉴스 */
.s5[data-step="1"] .s5__news,
.s5[data-step="2"] .s5__news,
.s5[data-step="3"] .s5__news,
.s5[data-step="4"] .s5__news { opacity: 1; }

/* 2 갈라져 각자에게 간다 */
.s5[data-step="2"] .s5__news,
.s5[data-step="3"] .s5__news,
.s5[data-step="4"] .s5__news { transform: none; }
.s5[data-step="2"] .s5__who, .s5[data-step="3"] .s5__who, .s5[data-step="4"] .s5__who,
.s5[data-step="2"] .s5__folio, .s5[data-step="3"] .s5__folio, .s5[data-step="4"] .s5__folio { opacity: 1; }

/* 아직 반응하기 전 — B의 강조를 잠시 눌러 둔다 */
.s5[data-step="2"] .s5__folio--b .ns-portfolio__row[data-highlight="true"] .ns-portfolio__name,
.s5[data-step="2"] .s5__folio--b .ns-portfolio__row[data-highlight="true"] .ns-portfolio__weight {
  color: var(--ns-color-fg-neutral);
  font-weight: var(--ns-font-weight-medium);
}
.s5[data-step="2"] .s5__folio--b .ns-portfolio__row[data-highlight="true"] .ns-portfolio__fill { background: var(--ns-color-bg-neutral-solid-muted); }
.s5[data-step="2"] .s5__folio--b .ns-portfolio__row[data-highlight="false"] { color: var(--ns-color-fg-neutral); }
.s5[data-step="2"] .s5__folio--b .ns-portfolio__summary { opacity: 0; }
.s5 .ns-portfolio__summary { transition: opacity 620ms var(--ns-timing-function-enter); }

/* 3 한쪽은 가라앉고 한쪽은 커진다. 카드 상태(noise/signal)는 JS가 함께 바꾼다 */
.s5[data-step="3"] .s5__side[data-user="a"],
.s5[data-step="4"] .s5__side[data-user="a"] { transform: scale(0.84); opacity: 0.55; }
.s5[data-step="3"] .s5__side[data-user="b"],
.s5[data-step="4"] .s5__side[data-user="b"] { transform: scale(1.06); }

/* 4 결론 */
.s5[data-step="4"] .s5__copy { opacity: 1; transform: none; }