/* The homepage's motion for the flow (flow.css is the look). Not loaded by
   the videos: HyperFrames drives those from a paused GSAP timeline. */
.af-flow-trade { transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.af-flow-fill { transition: width .9s var(--ease), height .9s var(--ease); }
.af-flow-spark { transition: left .9s var(--ease), top .9s var(--ease), opacity .3s; }
.af-flow-node .af-flow-card { transform: translateY(.6em); transition: opacity .45s var(--ease), filter .45s, transform .7s var(--ease), border-color .45s, box-shadow .45s var(--ease); }
.af-flow-node.on .af-flow-card { transform: none; }
.af-flow-dot { transition: background .3s, color .3s, border-color .3s, box-shadow .45s var(--ease); }
.af-flow-node.now .af-flow-caret { animation: af-flow-blink 1s steps(1) infinite; }
.af-flow-tag { transform: scale(.85); transition: transform .5s var(--ease) .35s, opacity .3s .35s; }
.af-flow-node.on .af-flow-tag { transform: none; }
.af-flow-row { transition: opacity .4s var(--ease); }
@keyframes af-flow-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .af-flow *, .af-flow { transition: none !important; animation: none !important; transform: none !important; }
  .af-flow-spark { display: none; }
}