/* Scene 12 — 현재 포트폴리오 위에 주문 후 가상 포트폴리오를 겹쳐 변화를 본다. */
.s12__inner {
  position: absolute;
  left: var(--ns-stage-inset);
  right: var(--ns-stage-inset);
  top: var(--ns-dimension-x14);
  bottom: var(--ns-dimension-x20);
  display: grid;
  grid-template-rows: auto 1fr;
}
.s12__feature {
  opacity: 0;
  transform: translateY(var(--ns-dimension-x9));
  transition: opacity 620ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s12[data-step="1"] .s12__feature,
.s12[data-step="2"] .s12__feature,
.s12[data-step="3"] .s12__feature,
.s12[data-step="4"] .s12__feature { opacity: 1; transform: none; }
.s12__feature .ns-feature-heading__index { margin-bottom: var(--ns-dimension-x4); }
.s12__analysis { position: relative; align-self: center; justify-self: center; width: 1600px; height: 650px; transform: translateX(var(--ns-dimension-x20)); }
.s12__assumption {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
  font-weight: var(--ns-font-weight-bold);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x4));
  transition: opacity 520ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s12[data-step="1"] .s12__assumption,
.s12[data-step="2"] .s12__assumption,
.s12[data-step="3"] .s12__assumption,
.s12[data-step="4"] .s12__assumption { opacity: 1; transform: none; }
.s12__portfolios { position: absolute; left: 80px; top: 120px; width: 820px; height: 430px; }
.s12__portfolio { position: absolute; left: 0; top: 35px; display: grid; justify-items: center; margin: 0; }
.s12__portfolio--current { opacity: 0; transform: scale(0.78); transition: opacity 520ms var(--ns-timing-function-enter), transform 720ms var(--ns-timing-function-enter-expressive); }
.s12[data-step="2"] .s12__portfolio--current,
.s12[data-step="3"] .s12__portfolio--current,
.s12[data-step="4"] .s12__portfolio--current { opacity: 1; transform: scale(1); }
.s12__portfolio--after {
  opacity: 0;
  transform: translateX(0) scale(0.92);
  transition: opacity 420ms var(--ns-timing-function-enter), transform 900ms var(--ns-timing-function-enter-expressive);
}
.s12[data-step="3"] .s12__portfolio--after,
.s12[data-step="4"] .s12__portfolio--after { opacity: 0.92; transform: translateX(420px) scale(1); }
.s12__donut {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 340px;
  height: 340px;
  border-radius: var(--ns-radius-full);
}
.s12__portfolio--current .s12__donut { background: conic-gradient(var(--ns-color-bg-neutral-solid) 0 60%, var(--ns-color-bg-neutral-solid-muted) 60% 80%, var(--ns-color-bg-neutral-weak) 80% 100%); }
.s12__portfolio--after .s12__donut { background: conic-gradient(var(--ns-color-bg-neutral-solid) 0 68%, var(--ns-color-bg-neutral-solid-muted) 68% 88%, var(--ns-color-bg-neutral-weak) 88% 100%); }
.s12__donut::before { content: ""; position: absolute; z-index: 1; inset: var(--ns-dimension-x8); border-radius: inherit; background: var(--ns-color-bg-layer-default); }
.s12__portfolio--after .s12__donut::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    transparent 0 60%,
    var(--ns-color-bg-up-solid) 60% 68%,
    transparent 68% 80%,
    var(--ns-color-bg-down-solid) 80% 88%,
    transparent 88% 100%
  );
  opacity: 0;
  transform: scale(0.97);
}
.s12__donut span, .s12__donut strong { position: relative; z-index: 2; }
.s12__donut span { margin-bottom: var(--ns-dimension-x2); font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-t4); letter-spacing: 0.12em; color: var(--ns-color-fg-neutral-subtle); }
.s12__donut strong { font-size: var(--ns-font-size-t9); }
.s12__portfolio figcaption { margin-top: var(--ns-dimension-x4); font-size: var(--ns-font-size-t6); color: var(--ns-color-fg-neutral-muted); }
.s12__changes { position: absolute; left: 1050px; top: 120px; display: grid; gap: var(--ns-dimension-x10); }
.s12__change {
  opacity: 0;
  transform: translateX(var(--ns-dimension-x6));
  transition: opacity 460ms var(--ns-timing-function-enter), transform 560ms var(--ns-timing-function-enter);
  transition-delay: calc(var(--item-index) * 150ms);
}
.s12[data-step="4"] .s12__change { opacity: 1; transform: none; }
.s12__change-name { margin-bottom: var(--ns-dimension-x3); font-size: var(--ns-font-size-t7); line-height: var(--ns-line-height-t7); color: var(--ns-color-fg-neutral-subtle); }
.s12__values { display: flex; align-items: baseline; gap: var(--ns-dimension-x4); }
.s12__values span { font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-t8); color: var(--ns-color-fg-neutral-muted); }
.s12__values b { font-size: var(--ns-font-size-t7); font-weight: var(--ns-font-weight-regular); color: var(--ns-color-fg-neutral-subtle); }
.s12__values strong { font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-t12); line-height: 1; }
.s12__change[data-direction="up"] .s12__values strong,
.s12__change[data-direction="up"] .s12__change-message { color: var(--ns-color-fg-up); }
.s12__change[data-direction="down"] .s12__values strong,
.s12__change[data-direction="down"] .s12__change-message { color: var(--ns-color-fg-down); }
.s12__change-message { margin-top: var(--ns-dimension-x3); font-size: var(--ns-font-size-t8); line-height: var(--ns-line-height-t8); }
.s12[data-step="4"] .s12__portfolio--after .s12__donut::after { animation: s12-graph-blink 1080ms var(--ns-timing-function-easing) infinite; }
.s12[data-step="4"] .s12__values strong { animation: s12-value-blink 1080ms var(--ns-timing-function-easing) infinite; }
@keyframes s12-graph-blink {
  0%, 100% { opacity: 0.18; transform: scale(0.97); }
  48% { opacity: 1; transform: scale(1.035); }
}
@keyframes s12-value-blink {
  0%, 100% { opacity: 0.28; }
  48% { opacity: 1; }
}
.s12__note {
  position: absolute;
  left: 80px;
  bottom: 0;
  font-size: var(--ns-font-size-t5);
  color: var(--ns-color-fg-neutral-subtle);
  opacity: 0;
  transition: opacity 420ms var(--ns-timing-function-enter) 520ms;
}
.s12[data-step="4"] .s12__note { opacity: 1; }