/* Product “how it works” + info cards motion.
   Armed via [data-fgs-steps-seq] / [data-fgs-info-seq] + .is-seq-in. */

body.fgs-steps-motion {
  --fgs-seq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fgs-seq-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

.fgs-steps-wrap {
  position: relative;
}

/* ---- Step cards: initial (js only) ------------------------------------ */
html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step__num {
  opacity: 0;
  transform: scale(0.62);
}
html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step::before {
  opacity: 0;
}

html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step {
  animation: fgs-step-rise 0.55s var(--fgs-seq-ease) forwards;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(1) {
  animation-delay: 0.08s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(2) {
  animation-delay: 0.18s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(3) {
  animation-delay: 0.28s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(4) {
  animation-delay: 0.38s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(5) {
  animation-delay: 0.48s;
}
@keyframes fgs-step-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Badge stamp — elastic pop just before / as card lands */
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step__num {
  animation: fgs-badge-pop 0.48s var(--fgs-seq-pop) forwards;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(1) .fgs-step__num {
  animation-delay: 0s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(2) .fgs-step__num {
  animation-delay: 0.1s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(3) .fgs-step__num {
  animation-delay: 0.2s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(4) .fgs-step__num {
  animation-delay: 0.3s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(5) .fgs-step__num {
  animation-delay: 0.4s;
}
@keyframes fgs-badge-pop {
  0% {
    opacity: 0;
    transform: scale(0.62);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Watermark numeral — slow settle after card */
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step::before {
  animation: fgs-wm-in 0.7s var(--fgs-seq-ease) forwards;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(1)::before {
  animation-delay: 0.28s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(2)::before {
  animation-delay: 0.38s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(3)::before {
  animation-delay: 0.48s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(4)::before {
  animation-delay: 0.58s;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-step:nth-child(5)::before {
  animation-delay: 0.68s;
}
@keyframes fgs-wm-in {
  from { opacity: 0; }
  to { opacity: 0.08; }
}

/* After entrance settles, clear fill so hover transform/shadow works */
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in.is-landed .fgs-step,
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in.is-landed .fgs-step__num {
  animation: none;
  opacity: 1;
  transform: none;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in.is-landed .fgs-step::before {
  animation: none;
  opacity: 0.08;
}

/* Hover: soft shadow bloom + badge pulse (after land) */
body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step:hover {
  box-shadow:
    0 14px 32px -12px rgba(10, 108, 255, 0.22),
    0 8px 20px -10px rgba(13, 12, 10, 0.12);
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-landed .fgs-step:hover .fgs-step__num {
  animation: fgs-badge-pulse 0.55s var(--fgs-seq-ease) 1;
}
@keyframes fgs-badge-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); }
}

/* Connecting thread under the row */
.fgs-steps__thread {
  display: none;
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14px;
  height: 2px;
  border-radius: 99px;
  background: rgba(13, 12, 10, 0.06);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
@media (min-width: 900px) {
  .fgs-steps__thread { display: block; }
}
.fgs-steps__thread > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a6cff, #44d1fd);
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-steps__thread {
  opacity: 1;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-steps__thread > span {
  animation: fgs-thread-draw 0.85s var(--fgs-seq-ease) 0.05s forwards;
}
html.js body.fgs-steps-motion [data-fgs-steps-seq].is-seq-in .fgs-steps__thread {
  animation: fgs-thread-fade 0.45s var(--fgs-seq-ease) 1.05s forwards;
}
@keyframes fgs-thread-draw {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes fgs-thread-fade {
  to { opacity: 0; }
}

/* ---- Info cards (pair) ------------------------------------------------ */
html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card__icon,
html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card h3,
html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card > p {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in .fgs-card {
  animation: fgs-info-card-in 0.55s var(--fgs-seq-ease) forwards;
}
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in .fgs-card__icon {
  animation: fgs-info-part-in 0.45s var(--fgs-seq-ease) 0.08s forwards;
}
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in .fgs-card h3 {
  animation: fgs-info-part-in 0.45s var(--fgs-seq-ease) 0.17s forwards;
}
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in .fgs-card > p {
  animation: fgs-info-part-in 0.5s var(--fgs-seq-ease) 0.26s forwards;
}
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in.is-landed .fgs-card,
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in.is-landed .fgs-card__icon,
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in.is-landed .fgs-card h3,
html.js body.fgs-steps-motion [data-fgs-info-seq].is-seq-in.is-landed .fgs-card > p {
  animation: none;
  opacity: 1;
  transform: none;
}
@keyframes fgs-info-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fgs-info-part-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

body.fgs-steps-motion [data-fgs-info-seq] .fgs-card__icon {
  transition: transform 0.28s var(--fgs-seq-ease), filter 0.28s ease,
    background 0.28s ease;
}
body.fgs-steps-motion [data-fgs-info-seq].is-landed .fgs-card:hover .fgs-card__icon {
  filter: brightness(1.08);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step,
  html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step__num,
  html.js body.fgs-steps-motion [data-fgs-steps-seq] .fgs-step::before,
  html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card,
  html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card__icon,
  html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card h3,
  html.js body.fgs-steps-motion [data-fgs-info-seq] .fgs-card > p {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .fgs-steps__thread { display: none !important; }
}