/*
 * "Giữa ý định của AI và hành động trên máy" (4 steps), made livelier 20/10/2026 (owner: "đơ").
 * A glowing request travels along the line as you scroll and waits at each step; each step
 * springs up as the request reaches it; hovering a step makes it spring; the "Tiếp theo" arrow
 * bounces on hover. Scroll-driven on the compositor; still when the page is still.
 */
.home-page .home-flow-steps .flow-token {
  position: absolute; left: 0; top: -9px; z-index: 2;
  width: 16px; height: 16px; padding: 0; margin: 0 0 0 -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #7aa2ff 45%, #4f80ff);
  box-shadow: 0 0 0 6px rgba(79, 128, 255, .18), 0 0 22px 6px rgba(79, 128, 255, .45);
  opacity: 0;
}
.home-page .home-flow-steps .flow-token::before { display: none }

.home-page .home-flow-steps li:not(.flow-token) {
  --spring: cubic-bezier(.34, 1.8, .5, 1);
  transition: scale .55s var(--spring);
  transform-origin: 20% 0;
}
@supports (transition-timing-function: linear(0, 1)) {
  .home-page .home-flow-steps li:not(.flow-token) { --spring: linear(0, .22 6%, .76 14%, 1.06 21%, 1.13 26%, 1.08 32%, .98 41%, .96 47%, 1 58%, 1.01 68%, 1) }
}
.home-page .home-flow-steps li:not(.flow-token):hover { scale: 1.05 }
.home-page .home-flow-steps li:not(.flow-token):hover::before { box-shadow: 0 0 0 9px #e3edf7, 0 0 18px 4px rgba(79, 128, 255, .45) }

.home-page .home-next b { display: inline-block; transition: translate .5s cubic-bezier(.34, 1.8, .5, 1) }
.home-page .home-next:hover b { animation: flow26-bounce .9s ease-in-out infinite }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-page .home-flow-steps .flow-token { animation: flow26-travel linear both; animation-timeline: --flow; animation-range: entry 70% cover 55% }
    .home-page .home-flow-steps li:not(.flow-token) { animation: flow26-pop linear both; animation-timeline: --flow }
    .home-page .home-flow-steps li:nth-child(2) { animation-range: entry 66% entry 86% }
    .home-page .home-flow-steps li:nth-child(3) { animation-range: entry 88% cover 34% }
    .home-page .home-flow-steps li:nth-child(4) { animation-range: cover 32% cover 46% }
    .home-page .home-flow-steps li:nth-child(5) { animation-range: cover 44% cover 58% }
  }
}
/* The request waits a moment at each step (dots sit at 0, 25, 50 and 75% of the line). */
@keyframes flow26-travel {
  0% { left: 0; opacity: 0 }
  6%, 14% { left: 0; opacity: 1 }
  30%, 40% { left: 25% }
  58%, 68% { left: 50% }
  86%, 100% { left: 75%; opacity: 1 }
}
/* Rise with an overshoot, then settle: a spring drawn as keyframes so it can follow the scroll. */
@keyframes flow26-pop {
  0% { opacity: .2; translate: 0 34px; scale: .92 }
  55% { opacity: 1; translate: 0 -8px; scale: 1.04 }
  78% { translate: 0 3px; scale: .99 }
  100% { opacity: 1; translate: 0 0; scale: 1 }
}
@keyframes flow26-bounce { 0%, 100% { translate: 0 0 } 45% { translate: 0 7px } 70% { translate: 0 -2px } }

@media (prefers-reduced-motion: reduce) {
  .home-page .home-flow-steps .flow-token { display: none }
  .home-page .home-next:hover b { animation: none }
}