/* ------------------------------------------------------------------
   Homepage "Quick & Easy Setup" band: scroll reveal (Oct 2026).
   Motion only — every layout, type and colour rule for this band lives
   with the other `setup-` rules at the end of css/templatebio.webflow.css.

   The heading settles first, then steps 1, 2 and 3 arrive in order, and a
   thin connector grows from the first numbered circle to the third behind
   them (desktop/tablet only; the grid is single-column below 768px).

   Webflow's IX2 is deliberately not used: its scroll-into-view preset only
   fires once the element's bottom passes a percentage of the viewport,
   which has left elements permanently invisible on this site (see the hero
   mockup note in css/hero.css). Instead js/setup-steps.js adds
   `setup-motion` to the section — so the hidden state exists only when the
   script runs — and `setup-revealed` when the section first scrolls in.
   Only opacity and transform are animated, so nothing reflows.
   ------------------------------------------------------------------ */

/* Hidden state: applied by the script, never baked into the markup. */
.setup-section.setup-motion .setup-heading,
.setup-section.setup-motion .setup-step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sibling chains rather than :nth-child, so the connector element's position
   among the grid children does not matter. */
.setup-section.setup-motion .setup-step { transition-delay: 0.14s; }
.setup-section.setup-motion .setup-step + .setup-step { transition-delay: 0.28s; }
.setup-section.setup-motion .setup-step + .setup-step + .setup-step { transition-delay: 0.42s; }

.setup-section.setup-motion.setup-revealed .setup-heading,
.setup-section.setup-motion.setup-revealed .setup-step {
  opacity: 1;
  transform: translateY(0);
}

/* Connector line between the numbered circles.
   The grid is three equal columns, so a circle centre sits half a column in
   from each end; the line starts and stops at the circle edges so it never
   crosses them. Sizes mirror the circle/gap values in the main stylesheet. */
.setup-steps {
  position: relative;
  --setup-gap: 40px;
  --setup-circle: 76px;
}

.setup-connector {
  position: absolute;
  top: calc(var(--setup-circle) / 2 - 1px);
  left: calc((100% - 2 * var(--setup-gap)) / 6 + var(--setup-circle) / 2 + 8px);
  right: calc((100% - 2 * var(--setup-gap)) / 6 + var(--setup-circle) / 2 + 8px);
  height: 2px;
  border-radius: 1px;
  background-color: #0099f03d;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.setup-section.setup-motion .setup-connector {
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s;
}

.setup-section.setup-revealed .setup-connector,
.setup-section:not(.setup-motion) .setup-connector {
  transform: scaleX(1);
}

@media screen and (max-width: 991px) {
  .setup-steps {
    --setup-gap: 24px;
    --setup-circle: 64px;
  }
}

/* Single-column grid from here down: there is no left-to-right run to draw. */
@media screen and (max-width: 767px) {
  .setup-connector { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .setup-section.setup-motion .setup-heading,
  .setup-section.setup-motion .setup-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .setup-connector,
  .setup-section.setup-motion .setup-connector {
    transform: scaleX(1);
    transition: none;
  }
}