/* Quiet, illustrative product sequences. All copy remains available without motion. */
.index-site [data-ui-demo]{--demo-ease:cubic-bezier(.22,.72,.24,1);--demo-time:3000ms}
.index-site .demo-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:23px;font:10px/1.5 var(--font-sans);color:var(--index-ink-secondary);letter-spacing:.01em}
.index-site .demo-sequence>span{position:relative;padding-top:9px;border-top:1px solid var(--index-mist)}
.index-site .demo-sequence>span::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--index-blue-deep);transform:scaleX(0);transform-origin:left}
.index-site .demo-sequence>.is-demo-current{color:var(--index-blue-deep)}
.index-site .ui-board[data-ui-demo]>.ui-pylon{bottom:100px}
.index-site .ui-board[data-ui-demo] .demo-sequence{gap:10px;margin-top:4px;padding-top:18px}
.index-site .ui-volt[data-ui-demo]>.demo-sequence{padding:0 20px 20px}
.index-site .overview-composition[data-ui-demo] .demo-sequence{padding:21px 5px 0;font-size:11px}
.index-site .volt-example[data-ui-demo]>.demo-sequence{padding-top:24px}
.index-site .demo-answer{position:relative;overflow:hidden}
.index-site .demo-answer-line{display:block}
.index-site .demo-retrieval{display:none;position:absolute;inset:0;align-content:center;padding:28px;color:var(--index-blue-deep);font:17px/1.4 'Index Wordmark',var(--font-sans)}
.index-site .demo-retrieval>span{display:block;margin-top:6px;font:11px/1.5 var(--font-sans);color:var(--index-ink-secondary)}
.index-site .demo-retrieval::before{content:"";display:block;width:7px;height:7px;margin-bottom:13px;background:var(--index-blue);box-shadow:11px 0 0 var(--index-mist),22px 0 0 var(--index-ice)}
.index-site .handoff-steps[data-ui-demo]>li{position:relative}
.index-site .handoff-steps[data-ui-demo]>li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--index-mist);transform:scaleX(0);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
  .index-site .is-demo-ready .demo-sequence>.is-demo-current::before,
  .index-site .handoff-steps.is-demo-ready>.is-demo-current::after{animation:index-demo-progress var(--demo-time) linear both;animation-play-state:paused}
  .index-site .is-demo-running .demo-sequence>.is-demo-current::before,
  .index-site .handoff-steps.is-demo-running>.is-demo-current::after{animation-play-state:running}
  .index-site .is-demo-ready .demo-sequence>.is-demo-complete::before{transform:scaleX(1)}
  .index-site [data-ui-demo="board"].is-demo-ready .demo-saved-memory{transition:opacity 520ms var(--demo-ease),translate 520ms var(--demo-ease)}
  .index-site [data-ui-demo="board"].is-demo-ready[data-demo-phase="0"] .demo-saved-memory{opacity:.25;translate:0 5px}
  .index-site [data-ui-demo="board"].is-demo-ready .demo-source{transition:color 400ms ease}
  .index-site [data-ui-demo="board"].is-demo-ready[data-demo-phase="2"] .demo-source{color:var(--index-blue-deep)}
  .index-site .handoff-steps.is-demo-ready>li{transition:background-color 650ms var(--demo-ease)}
  .index-site .handoff-steps.is-demo-ready>.is-demo-current{background:var(--index-blue-deep)}
  .index-site .handoff-steps.is-demo-ready>.memory-step:not(.is-demo-current){background:var(--index-slate)}
  .index-site .handoff-steps.is-demo-ready .memory-example{transition:translate 550ms var(--demo-ease),border-color 550ms ease;border:1px solid transparent}
  .index-site .handoff-steps.is-demo-ready>.is-demo-current .memory-example{translate:0 -3px;border-color:var(--index-mist)}
  .index-site [data-ui-demo="workspace"].is-demo-ready .demo-project-board{transition:border-color 600ms ease,background-color 600ms ease}
  .index-site [data-ui-demo="workspace"].is-demo-ready[data-demo-phase="0"] .demo-project-board{border-color:var(--index-blue);background:var(--index-ice)}
  .index-site [data-ui-demo="workspace"].is-demo-ready .ui-floating-memory{transition:opacity 550ms var(--demo-ease),translate 650ms var(--demo-ease)}
  .index-site [data-ui-demo="workspace"].is-demo-ready[data-demo-phase="0"] .ui-floating-memory{opacity:.3;translate:0 9px}
  .index-site [data-ui-demo="workspace"].is-demo-ready .demo-source{transition:color 500ms ease}
  .index-site [data-ui-demo="workspace"].is-demo-ready[data-demo-phase="2"] .demo-source{color:var(--index-blue-deep)}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-answer-line{transition:opacity 430ms var(--demo-ease),translate 550ms var(--demo-ease);transition-delay:110ms}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-answer-line+ .demo-answer-line{transition-delay:260ms}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-source{transition:opacity 430ms var(--demo-ease);transition-delay:480ms}
  .index-site [data-ui-demo="answer"].is-demo-ready:not([data-demo-phase="2"]) :is(.demo-answer-line,.demo-source){opacity:0;translate:0 5px;transition-delay:0ms}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-answer>.ui-eyebrow,
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-answer>.memory-category{transition:opacity 300ms ease}
  .index-site [data-ui-demo="answer"].is-demo-ready:not([data-demo-phase="2"]) .demo-answer>.ui-eyebrow,
  .index-site [data-ui-demo="answer"].is-demo-ready:not([data-demo-phase="2"]) .demo-answer>.memory-category{opacity:0}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-retrieval{display:grid;opacity:0;transition:opacity 300ms ease}
  .index-site [data-ui-demo="answer"].is-demo-ready[data-demo-phase="1"] .demo-retrieval{opacity:1}
  .index-site [data-ui-demo="answer"].is-demo-ready .demo-question{transition:opacity 500ms ease}
  .index-site [data-ui-demo="answer"].is-demo-ready[data-demo-phase="2"] .demo-question{opacity:.68}
}
@keyframes index-demo-progress{to{transform:scaleX(1)}}
@media(max-width:700px){
  .index-site .demo-sequence{font-size:10px;gap:9px}
  .index-site .overview-composition[data-ui-demo] .demo-sequence{font-size:10px;gap:9px}
  .index-site .handoff-steps[data-ui-demo]>li::after{left:0;right:auto;top:0;bottom:0;height:auto;width:2px;transform:scaleY(0);transform-origin:top}
  @keyframes index-demo-progress{to{transform:scale(1)}}
}
@media(prefers-reduced-motion:reduce){
  .index-site .demo-retrieval{display:none}
  .index-site [data-ui-demo] .demo-sequence>span::before,.index-site .handoff-steps[data-ui-demo]>li::after{animation:none}
}