/* Scene 9 — Ask My Portfolio.
   채팅 UI를 복제하지 않고 질문이 개인화 답변으로 해석되는 과정을 보여 준다. */
.s9__inner {
  position: absolute;
  left: var(--ns-stage-inset);
  right: var(--ns-stage-inset);
  top: var(--ns-dimension-x24);
  bottom: var(--ns-dimension-x30);
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  column-gap: var(--ns-dimension-x24);
  transition: opacity 620ms var(--ns-timing-function-easing), transform 760ms var(--ns-timing-function-exit-expressive);
}
.s9__feature {
  opacity: 0;
  transform: translateY(var(--ns-dimension-x9));
  transition: opacity 620ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s9[data-step="1"] .s9__feature, .s9[data-step="2"] .s9__feature,
.s9[data-step="3"] .s9__feature, .s9[data-step="4"] .s9__feature { opacity: 1; transform: none; }
.s9__conversation {
  align-self: center;
  display: grid;
  gap: var(--ns-dimension-x14);
  min-width: 0;
}
.s9__speaker {
  margin-bottom: var(--ns-dimension-x4);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t5);
  line-height: var(--ns-line-height-t5);
  letter-spacing: 0.16em;
  color: var(--ns-color-fg-neutral-subtle);
}
.s9__question {
  opacity: 0;
  transform: translateY(var(--ns-dimension-x8));
  transition: opacity 520ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s9[data-step="1"] .s9__question, .s9[data-step="2"] .s9__question,
.s9[data-step="3"] .s9__question, .s9[data-step="4"] .s9__question { opacity: 1; transform: none; }
.s9__composer {
  min-height: var(--ns-dimension-x20);
  display: flex;
  align-items: center;
  padding: var(--ns-dimension-x5) var(--ns-dimension-x7);
  border-radius: var(--ns-radius-r4);
  background: var(--ns-color-bg-neutral-weak-alpha);
  font-size: var(--ns-font-size-t11);
  line-height: var(--ns-line-height-t11);
  letter-spacing: -0.025em;
  font-weight: var(--ns-font-weight-medium);
  transition: opacity 420ms var(--ns-timing-function-easing), transform 520ms var(--ns-timing-function-enter);
}
.s9__caret {
  display: inline-block;
  width: var(--ns-dimension-x0_5);
  height: var(--ns-dimension-x8);
  margin-left: var(--ns-dimension-x1);
  background: var(--ns-color-bg-neutral-solid);
  opacity: 0;
}
.s9[data-step="2"] .s9__caret { animation: s9-caret 720ms steps(1, end) infinite; }
.s9[data-step="3"] .s9__composer, .s9[data-step="4"] .s9__composer { opacity: 0.38; transform: translateY(calc(var(--ns-dimension-x2) * -1)); }
@keyframes s9-caret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.s9__processing {
  margin-top: var(--ns-dimension-x8);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x4));
  transition: opacity 520ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s9[data-step="3"] .s9__processing, .s9[data-step="4"] .s9__processing { opacity: 1; transform: none; }
.s9__processing-label {
  margin-bottom: var(--ns-dimension-x4);
  display: flex;
  align-items: center;
  gap: var(--ns-dimension-x3);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t5);
  line-height: var(--ns-line-height-t5);
  letter-spacing: 0.08em;
  color: var(--ns-color-fg-neutral-subtle);
}
.s9__spinner {
  width: var(--ns-dimension-x5);
  height: var(--ns-dimension-x5);
  border: var(--ns-dimension-x0_5) solid var(--ns-color-stroke-neutral-weak);
  border-top-color: var(--ns-color-stroke-neutral-contrast);
  border-radius: var(--ns-radius-full);
}
.s9[data-step="3"] .s9__spinner { animation: s9-spin 760ms linear infinite; }
@keyframes s9-spin { to { transform: rotate(360deg); } }
.s9__graph {
  position: relative;
  width: 900px;
  height: 180px;
}
.s9__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s9__links path {
  fill: none;
  stroke: var(--ns-color-stroke-neutral-weak);
  stroke-width: var(--ns-dimension-x0_5);
  stroke-linecap: round;
  stroke-dasharray: 12 10;
  opacity: 0;
}
.s9[data-step="3"] .s9__links path {
  opacity: 1;
  animation: s9-search 900ms linear infinite;
  animation-delay: calc(var(--item-index) * 240ms);
}
@keyframes s9-search { to { stroke-dashoffset: -44; } }
.s9__origin, .s9__check {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: var(--ns-dimension-x20);
  min-height: var(--ns-dimension-x12);
  padding: 0 var(--ns-dimension-x4);
  border-radius: var(--ns-radius-full);
  background: var(--ns-color-bg-layer-basement);
  font-size: var(--ns-font-size-t6);
  line-height: var(--ns-line-height-t6);
  font-weight: var(--ns-font-weight-medium);
}
.s9__origin {
  left: var(--ns-dimension-x13);
  top: 66px;
  background: var(--ns-color-bg-neutral-solid);
  color: var(--ns-color-fg-neutral-inverted);
}
.s9__checks { position: absolute; inset: 0; }
.s9__check {
  opacity: 0;
  transform: scale(0.84);
  transition: opacity 420ms var(--ns-timing-function-enter), transform 520ms var(--ns-timing-function-enter-expressive);
  transition-delay: calc(var(--item-index) * 280ms);
}
.s9__check:nth-child(1) { left: 360px; top: 10px; }
.s9__check:nth-child(2) { left: 540px; top: 66px; }
.s9__check:nth-child(3) { left: 730px; top: 122px; }
.s9[data-step="3"] .s9__check, .s9[data-step="4"] .s9__check { opacity: 1; transform: none; }
.s9__answer {
  display: grid;
  grid-template-columns: var(--ns-dimension-x14) minmax(0, 1fr);
  gap: var(--ns-dimension-x4);
  align-items: start;
  width: 100%;
  opacity: 0;
  transform: translateY(var(--ns-dimension-x8));
  transform-origin: left top;
  transition: width 860ms var(--ns-timing-function-enter-expressive), opacity 620ms var(--ns-timing-function-enter), transform 860ms var(--ns-timing-function-enter-expressive);
}
.s9__avatar {
  display: grid;
  place-items: center;
  width: var(--ns-dimension-x14);
  height: var(--ns-dimension-x14);
  border-radius: var(--ns-radius-full);
  overflow: hidden;
  background: var(--ns-color-bg-layer-default);
}
.s9__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.7);
}
.s9[data-step="4"] .s9__answer { opacity: 1; transform: none; }
.s9[data-step="5"] .s9__answer {
  width: 1300px;
  opacity: 1;
  transform: translate(-360px, -260px);
  z-index: 4;
}
.s9__reply .s9__speaker { margin-bottom: var(--ns-dimension-x2); }
.s9__bubble {
  position: relative;
  min-height: var(--ns-dimension-x20);
  padding: var(--ns-dimension-x5) var(--ns-dimension-x6);
  border-radius: 0 var(--ns-radius-r4) var(--ns-radius-r4) var(--ns-radius-r4);
  background: var(--ns-color-bg-neutral-weak-alpha);
  transition: min-height 860ms var(--ns-timing-function-enter-expressive), padding 860ms var(--ns-timing-function-enter-expressive);
}
.s9[data-step="5"] .s9__bubble { min-height: 300px; padding: var(--ns-dimension-x8) var(--ns-dimension-x10); }
.s9__replying {
  position: absolute;
  inset: 0 auto 0 var(--ns-dimension-x6);
  display: flex;
  align-items: center;
  gap: var(--ns-dimension-x2);
  opacity: 0;
}
.s9__replying i {
  width: var(--ns-dimension-x2);
  height: var(--ns-dimension-x2);
  border-radius: var(--ns-radius-full);
  background: var(--ns-color-bg-neutral-solid-muted);
}
.s9[data-step="4"] .s9__replying { opacity: 1; }
.s9[data-step="5"] .s9__replying {
  inset: 0;
  justify-content: center;
  animation: s9-replying 760ms var(--ns-timing-function-easing) both;
}
.s9[data-step="4"] .s9__replying i { animation: s9-dot 620ms var(--ns-timing-function-easing) infinite; }
.s9[data-step="5"] .s9__replying i { animation: s9-dot 520ms var(--ns-timing-function-easing) infinite; }
.s9[data-step="4"] .s9__replying i:nth-child(2) { animation-delay: 120ms; }
.s9[data-step="4"] .s9__replying i:nth-child(3) { animation-delay: 240ms; }
@keyframes s9-replying { 0%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes s9-dot { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(calc(var(--ns-dimension-x1) * -1)); opacity: 1; } }
.s9__message { opacity: 0; transform: translateY(var(--ns-dimension-x2)); }
.s9[data-step="4"] .s9__message { opacity: 0; }
.s9[data-step="5"] .s9__message { animation: s9-message-in 520ms var(--ns-timing-function-enter) 560ms both; }
@keyframes s9-message-in { to { opacity: 1; transform: none; } }
.s9[data-instant="true"] .s9__replying { display: none; }
.s9[data-instant="true"] .s9__message { opacity: 1; transform: none; animation: none; }
.s9__answer-lead {
  margin-bottom: var(--ns-dimension-x3);
  font-size: var(--ns-font-size-t11);
  line-height: var(--ns-line-height-t11);
  letter-spacing: -0.035em;
  font-weight: var(--ns-font-weight-heavy);
}
.s9[data-step="5"] .s9__answer-lead { margin-bottom: var(--ns-dimension-x6); font-size: var(--ns-font-size-t14); line-height: var(--ns-line-height-t14); }
.s9__answer-detail {
  max-width: 880px;
  font-size: var(--ns-font-size-t7);
  line-height: var(--ns-line-height-t7);
  color: var(--ns-color-fg-neutral-muted);
}
.s9[data-step="5"] .s9__answer-detail { max-width: 1160px; font-size: var(--ns-font-size-t9); line-height: var(--ns-line-height-t9); }
.s9[data-step="4"] .s9__question { opacity: 0.42; }
.s9[data-step="5"] .s9__feature,
.s9[data-step="5"] .s9__question { opacity: 0; transform: scale(0.96); }