/* A single approved sale, four connected results. One compact surface at every size. */
.movement-demo { width: 100%; max-width: 640px; margin: 0; min-width: 0; --story-goal: .84; --story-flow: 1; font-variant-numeric: tabular-nums; }
.movement-board { border: 1px solid #2c2c2c; border-radius: 12px; background: #f8fafb; overflow: hidden; }
.movement-sale { display: flex; justify-content: center; align-items: center; padding: 12px 16px; background: var(--askora-atmosphere-background); color: #171717; }
/* Reuse the opening notification, with a smaller, neutral glass surface. */
.movement-outcomes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); position: relative; }
.movement-connection { position: absolute; z-index: 1; top: 0; inset-inline: 0; height: 2px; background: #2c2c2c; overflow: hidden; }
.movement-connection > i { display: block; height: 100%; background: #00E8F8; transform: scaleX(var(--story-flow)); transform-origin: left; }
.movement-result { position: relative; min-width: 0; padding: 21px 20px 20px; background: #f8fafb; color: #171b20; }
.movement-result:after { content: ""; position: absolute; inset: 0; border: 1px solid #00E8F8; opacity: calc(var(--result-progress, 1) * .32); pointer-events: none; }
.movement-result + .movement-result { border-left: 1px solid #e1e6ea; }
.movement-result-label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #5d6670; white-space: nowrap; }
.movement-result-label .icon { width: 14px; height: 14px; color: #64717a; flex-shrink: 0; }
.movement-value { display: flex; align-items: baseline; gap: 2px; font-size: 38px; line-height: 1.2; font-weight: 450; letter-spacing: -.04em; margin-top: 13px; white-space: nowrap; }
.movement-value small { font-size: .5em; letter-spacing: -.015em; color: #4d5963; font-weight: 400; }
.movement-commission .movement-value { gap: 5px; }
.movement-commission .movement-value small { font-size: 12px; }
.movement-result-detail { height: 28px; margin-top: 13px; font-size: 10px; line-height: 1.6; color: #606b74; }
.movement-goal-track { position: relative; height: 2px; background: #dfe5e9; border-radius: 1px; margin-top: 7px; }
.movement-goal-track > i { display: block; width: 100%; height: 100%; background: #00E8F8; transform-origin: left; transform: scaleX(var(--story-goal)); border-radius: inherit; }
.movement-goal-track > span { position: absolute; left: 100%; top: -2px; height: 6px; width: 1px; background: #777; }
.movement-rank-change { display: flex; align-items: center; gap: 3px; color: #4d5963; }
.movement-rank-change .icon { width: 11px; height: 11px; }
.movement-demo figcaption { margin-top: 11px; font-size: 9px; color: #8d8d8d; line-height: 1.6; text-align: center; }
/* Keep the visible surface opaque: restarting an opacity entrance caused a flash on scroll.
   Data and light travel together. Geometry does not change during playback. */
.movement-demo[data-story-state="waiting"], .movement-demo[data-story-state="running"] { --story-goal: .788888889; --story-flow: 0; }
.movement-demo[data-story-state="waiting"] .movement-rank-change,
.movement-demo[data-story-state="running"] .movement-ranking:not(.is-lit) .movement-rank-change { opacity: 0; }
.movement-result.is-lit .movement-result-label { color: #172d33; font-weight: 550; transition: color .3s; }
@media (max-width:1100px) {
  .movement-result { padding-inline: 16px; }
  .movement-value { font-size: 34px; }
}
@media (max-width:900px) {
  .movement-sale { padding: 12px; }
  .movement-result { padding: 18px 12px; }
  .movement-value { font-size: 30px; }
  .movement-result-label { gap: 5px; }
}
@media (max-width:680px) {
  .movement-demo { max-width: 440px; }
  .movement-sale { padding: 10px; }
  .movement-result { padding: 17px 12px 15px; }
  .movement-result-label .icon { width: 12px; height: 12px; }
  .movement-value { font-size: 28px; margin-top: 12px; }
  .movement-commission .movement-value { gap: 3px; }
  .movement-commission .movement-value small { font-size: 10px; }
  .movement-result-detail { font-size: 9px; margin-top: 11px; }
}
@media (max-width:360px) {
  .movement-sale { padding-inline: 8px; }
  .movement-result { padding-inline: 9px; }
  .movement-result-label { gap: 4px; font-size: 10px; }
  .movement-result-label .icon { width: 11px; height: 11px; }
  .movement-value { font-size: 26px; }
  .movement-result-detail { font-size: 8px; }
  .movement-demo figcaption { font-size: 8px; }
}