@charset "UTF-8";
/* ==========================================================================
   THE ROUTE — how it works
   --------------------------------------------------------------------------
   The four steps under the hero were a row of identical cards, each carrying a
   filled circle with a number in it. The number said the order and nothing
   else. It never said which steps you had actually looked at, and it gave the
   product's own walking figure — the thing already on the page, and the thing
   the brand is named after — nothing to do.

   So the numbers moved up onto a route line that runs above the cards, and the
   companion keeps your place on it: open a step, and the figure walks to that
   stop and the line behind it fills in. It is a progress record of *your* route
   through the four steps, which is truthful, rather than a scroll animation
   pretending to know which card you are reading. Open all four and the figure
   has arrived — the section says so, once, in the product's own voice.

   Design constraints this system honours:
     - The line carries real information (order, and what you have seen), so it
       is not decoration and the stops are the only numerals on the section.
     - Stops are aligned to the actual card columns on wide screens, so the
       line and the cards read as one object rather than two stacked lists.
     - The walk is driven by a click, so it is still correct on the hundredth
       read, and it never moves on its own while nobody is looking.
     - No sound, no autoplay, nothing that delays or blocks the step modal.
     - Under prefers-reduced-motion the walker is withdrawn and the figure's
       position is stated in the status line instead. A GIF cannot be paused
       from CSS, so showing it at all would ignore the preference.
   ========================================================================== */

.sc-steps {
  --sc-rail-track: #cfdcdf;
  --sc-rail-live: var(--bs-primary);
  --sc-rail-ink: #16201f;
  /* The track sits low in the rail box: the companion's feet rest on it and
     the step numbers hang above it. Nothing shares a pixel, so the figure is
     never hidden behind the stop it is standing on. */
  --sc-rail-ground: 1.15rem;
}

/* --------------------------------------------------------------------------
   The route line.
   -------------------------------------------------------------------------- */

.sc-rail {
  position: relative;
  height: 3.4rem;
  /* The rail is inset from the card row so the companion, which stands beside
     its stop rather than on it, has somewhere to stand at either end without
     hanging over the edge of the section. */
  margin: 0 1.15rem 0.25rem;
}

/* The track and the travelled fill share one wrapper so the fill's percentage
   width resolves against the line's real length. As two siblings measured
   against the whole rail, a 100% fill ran past the last stop by the width of
   its own insets. */
.sc-rail__line {
  position: absolute;
  top: var(--sc-rail-ground);
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}

.sc-rail__track {
  position: absolute;
  inset: 0;
  background: var(--sc-rail-track);
  border-radius: 2px;
}

/* The travelled fill. It is driven with scaleX rather than an animated width:
   width is a layout property, so transitioning it makes the browser re-lay-out
   the line on every frame of the walk. scaleX composites on the GPU and keeps
   the animation off the layout path entirely. The transform origin is the left
   edge so the fill grows away from the first stop, as a travelled line should. */
.sc-rail__fill {
  position: absolute;
  inset: 0;
  background: var(--sc-rail-live);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Stops. A dot on the line with the step number above it, the way stops sit on
   a route map. They are inside an aria-hidden rail, because the <ol> below
   already carries the order and the section's status line carries the
   position — announcing "2" again would be noise.
   -------------------------------------------------------------------------- */

.sc-rail__station {
  position: absolute;
  top: var(--sc-rail-ground);
  left: 0;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sc-rail-track);
  border-radius: 50%;
  background: #ffffff;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms ease-out;
}

.sc-rail__station::after {
  content: attr(data-step);
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #5c6b73;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 320ms ease-out;
}

/* Behind you — a stop the companion has walked past. */
.sc-rail__station[data-state="done"] {
  border-color: var(--sc-rail-live);
  background: var(--sc-rail-live);
}

.sc-rail__station[data-state="done"]::after {
  color: #6a7a82;
}

/* Where the companion is standing. The ring distinguishes it from "done" at a
   glance and without relying on colour alone. */
.sc-rail__station[data-state="current"] {
  border-color: var(--sc-rail-live);
  background: var(--sc-rail-live);
  box-shadow: 0 0 0 5px rgba(54, 77, 84, 0.16);
}

.sc-rail__station[data-state="current"]::after {
  color: var(--sc-rail-ink);
  font-weight: 800;
}

/* The arrival. Fires once, when the fourth stop opens — the one moment on this
   page where something has genuinely been completed. A travelling ring, not a
   burst: it reads as arriving, not as confetti. */
.sc-rail--arrived .sc-rail__station[data-state="current"] {
  animation: sc-arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes sc-arrive {
  0% {
    box-shadow: 0 0 0 0 rgba(54, 77, 84, 0.4);
  }
  55% {
    box-shadow: 0 0 0 14px rgba(54, 77, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(54, 77, 84, 0.16);
  }
}

/* --------------------------------------------------------------------------
   The companion. A line-art walking figure, multiplied against the section's
   pale surface so the GIF's white background disappears without needing a
   second asset or an alpha matte.

   It stands BESIDE its stop, not on it. An earlier version sat centred on the
   dot, which produced a dot with legs: the stop was buried under the figure's
   feet and the two read as one mangled shape. Standing the figure a short
   walk to the side keeps the stop fully legible as a stop, and puts the
   companion where a walking person actually is — on the path, next to the
   marker. The rail is inset by the same amount in CSS above so the figure has
   room at the first and last stop instead of hanging off the section.
   -------------------------------------------------------------------------- */

.sc-rail__walker {
  position: absolute;
  top: var(--sc-rail-ground);
  left: 0;
  z-index: 3;
  /* How far to one side of its stop the companion stands. Read by story-line.js
     so the figure and the dot can never drift apart, and mirrored in the rail's
     horizontal margin so there is room for it at the first and last stop. */
  --sc-walker-offset: 0.95rem;
  width: 1.05rem;
  height: 1.85rem;
  background: url("../img/stick1c.gif") center bottom / contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: translateX(-50%);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* A soft contact shadow so the figure is standing on the line rather than
   floating over it. Offset and blurred, never a flat halo. */
.sc-rail__walker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 0.95rem;
  height: 0.24rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(22, 31, 34, 0.24);
  filter: blur(2px);
}

/* --------------------------------------------------------------------------
   The status line. This is what carries the position when the walker is
   withdrawn for reduced motion, and it is the section's only place that states
   progress in words.
   -------------------------------------------------------------------------- */

.sc-route-status {
  min-height: 1.5rem;
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #5c6b73;
  transition: color 320ms ease-out;
}

.sc-route-status b {
  color: var(--sc-rail-ink);
  font-weight: 700;
}

.sc-route-status[data-arrived="true"] {
  color: #3d6353;
}

.sc-route-status[data-arrived="true"] b {
  color: #2f5a48;
}

/* --------------------------------------------------------------------------
   Narrow screens. The cards stack, so aligning stops to card columns stops
   meaning anything; even spacing across the full width is the honest answer.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .sc-rail {
    margin-inline: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-rail__walker {
    display: none;
  }

  .sc-rail__fill,
  .sc-rail__station,
  .sc-rail__station::after,
  .sc-route-status {
    transition: none;
  }
  .sc-rail--arrived .sc-rail__station[data-state="current"] {
    animation: none;
  }
}