/* ==========================================================================
   09-PROCESS.CSS  —  "How It Works", the three numbered steps
   --------------------------------------------------------------------------
   No background wash and no border on this section. It is separated from the
   templates above it by whitespace alone, so the page never turns stripey.

   THE SIGNATURE PIECE is the vertical line down the left-hand rail. It draws
   itself downward as the visitor scrolls, and each circle lights up as the
   line reaches it. Once a step is lit it stays lit — reversing it on the way
   back up reads as flickering rather than as feedback.

   The steps themselves are built by js/process.js from the `process.steps`
   list in js/data/site-config.js.
   ========================================================================== */

.process__inner {
  max-width: var(--process-max);
  margin-inline: auto;
}

/* ==========================================================================
   HEADING BLOCK
   ========================================================================== */

/* The heading rises up from behind a hidden edge, rather than simply fading.
   The overflow: hidden on the h2 is the mask; the span inside is what moves. */
.process__heading {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  /* a little breathing room so letter tails are never clipped by the mask */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* Cancel the generic fade-and-rise for this heading — it gets the mask
   reveal below instead of moving as a whole block. */
.js .process__heading[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .process__heading .process__heading-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.js .process__heading[data-reveal].is-visible .process__heading-inner {
  transform: translateY(0);
}

.process__lead {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  text-align: center;
  text-wrap: pretty;
}


/* ==========================================================================
   THE STEPS
   ========================================================================== */

/* Holds the rail line. The line has to sit outside the <ol> because an
   ordered list may only contain list items. */
.process__steps-wrap {
  position: relative;
  margin-top: var(--space-7);
}

.process__steps {
  list-style: none;
}

/* Two columns: the rail on the left, the words on the right. This never
   becomes one column — the circle stays beside the text at every width. */
.process__step {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: var(--space-4);
  align-items: start;
}

.process__step + .process__step {
  margin-top: var(--space-6);
}


/* ==========================================================================
   THE CONNECTING LINE
   Two layers stacked on top of each other, both centred in the rail:
     track — the faint grey line, always full height
     fill  — the orange line, squashed to nothing and stretched downward as
             --progress climbs from 0 to 1 (set by js/process.js on scroll)

   Its exact top and height are measured once by js/process.js so it starts
   at the centre of the first circle and ends at the centre of the last —
   whatever the steps say and however many there are.
   ========================================================================== */
.process__rail {
  position: absolute;
  left: 0;
  width: var(--rail-w);
  pointer-events: none;
}

.process__rail-track,
.process__rail-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--rail-line);
  margin-left: calc(var(--rail-line) / -2);
  border-radius: var(--rail-line);
}

.process__rail-track {
  background-color: var(--hairline-strong);
}

.process__rail-fill {
  background-image: var(--brand-gradient);
  transform-origin: top center;
  /* Driven straight from the scroll position — no transition, so it tracks
     the visitor's finger or wheel exactly instead of lagging behind it. */
  transform: scaleY(var(--progress, 0));
}


/* ==========================================================================
   THE NUMBERED CIRCLE
   ========================================================================== */
.process__num {
  position: relative;
  z-index: 1;                 /* sits on top of the line */
  justify-self: center;       /* dead centre of the rail, like the line */

  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  display: grid;
  place-items: center;

  background-color: var(--cream-deep);
  border: 1px solid var(--hairline-strong);

  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out);
}

.process__num-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-step-num);
  line-height: 1;
  color: var(--ink-muted);
  transition: color var(--dur-base) var(--ease-out);
}

/* --- lit up, as the line arrives ---------------------------------------- */
.process__step--active .process__num {
  background-color: transparent;
  background-image: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 6px var(--orange-ring);
}

.process__step--active .process__num-text {
  color: var(--on-brand);
  /* One clean pop, 60ms after the circle starts filling, so the number
     lands on top of the finished circle. No bounce, no spin. */
  animation: num-pop var(--dur-base) var(--ease-out) 60ms both;
}

@keyframes num-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   THE WORDS
   Title and body rise into place just behind the number, 90ms apart, so the
   whole row assembles as one movement: circle fills, number lands, title
   rises, body follows.

   The .js prefix means that if JavaScript is unavailable the text is simply
   there from the start, rather than stuck invisible.
   ========================================================================== */
.process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-step-title);
  line-height: 1.25;
  color: var(--ink);
}

.process__body {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--measure-step);
  text-wrap: pretty;
}

.js .process__title,
.js .process__body {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .process__step--active .process__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.js .process__step--active .process__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 90ms;
}


/* ==========================================================================
   CLOSING BUTTON
   ========================================================================== */
.process__cta {
  margin-top: var(--space-7);
  text-align: center;
}


/* ==========================================================================
   REDUCED MOTION
   Nothing animates, and nothing waits to be scrolled to. The line is drawn
   in full, all three circles are lit, and every word is simply present.
   js/process.js also returns before attaching any scroll listener at all,
   so none of that work even runs.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .process__rail {
    --progress: 1;
  }

  .process__num {
    background-color: transparent;
    background-image: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 0 0 6px var(--orange-ring);
  }

  .process__num-text {
    color: var(--on-brand);
  }

  .js .process__title,
  .js .process__body {
    opacity: 1;
    transform: none;
  }

  .js .process__heading .process__heading-inner {
    transform: none;
  }
}