/* ====================================================================
 * WHY CARTCRAFT: the step strip under the three pillars
 * (home page, section 5da8cd69, class stem .ccwhy-)
 *
 * The section carries its own look through its Elementor settings and its
 * section stylesheet: the two grids, the glass frame of a card, the ghost
 * numeral, the round icon tile, the orange circle of a step and the line
 * that runs between the three circles all live there, and none of it is
 * repeated here.
 *
 * Two things cannot live there, and both are about the strip:
 *
 *   the circle frame, because it belongs to a plugin class and the same
 *   trap waits on every future host of that class
 *   the travelling light, because it starts on a class the page cannot
 *   set, only assets/ccx-why.js can
 * ==================================================================== */


/* --------------------------------------------------------------------
 * THE FRAME AROUND A STEP NUMBER
 *
 * ccfx-pulseframe draws its ring one pixel outside its host and takes the
 * shape from it with border-radius: inherit. On the step numbers the class
 * sits on the heading widget while the round shape sits on the title
 * inside it, and a widget box has no radius of its own, so the ring came
 * out as a square standing around a circle.
 *
 * The widget box is already exactly the 52px of the circle, because the
 * step container centres its children and the box shrinks to the title.
 * Giving that box the same radius is therefore the whole correction: the
 * ring closes around the circle and keeps pulsing as before.
 *
 * Worth remembering for the next host: the pulse frame needs its radius on
 * the element that carries the class, not on the shape inside it.
 * -------------------------------------------------------------------- */
.ccwhy-stepn.ccwhy-stepn {
  border-radius: 50%;
}


/* --------------------------------------------------------------------
 * THE LIGHT THAT RUNS THE STRIP
 *
 * The line between the three circles fades out towards both ends, which
 * reads as a track. Once the strip comes into view a point of light runs
 * that track from the first circle to the third, passing behind each
 * circle on the way, and then it is gone. It runs once per page load:
 * assets/ccx-why.js hands out .ccwhy-lit and stops watching.
 *
 * The light is a small radial gradient moved along the box by its
 * background position, not an element travelling on the compositor. That
 * keeps the repaint inside a strip five pixels tall and needs no second
 * element in the page.
 *
 * Geometry is read off the line rather than repeated from it: same 16
 * percent inset on both sides, and the box is centred on the line, top
 * 24px plus five pixels of height against the line at top 26px, height 1.
 * The light itself is a tenth of the track wide and flattened by the five
 * pixels it has to live in, which is what turns the round gradient into a
 * point with a short trail on either side.
 *
 * position: relative is set by the section stylesheet as well. It stays
 * here because it is the anchor of this light: without it the light would
 * measure itself against the page instead of the strip, and it is not a
 * value that can drift.
 * -------------------------------------------------------------------- */
.ccwhy-steps {
  position: relative;
}

.ccwhy-steps::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 24px;
  height: 5px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(closest-side,
    rgba(255, 219, 175, 0.95) 0%,
    rgba(255, 142, 43, 0.55) 42%,
    rgba(255, 142, 43, 0) 100%);
  background-repeat: no-repeat;
  background-size: 10% 240%;
  background-position: -18% 50%;
}

.ccwhy-steps.ccwhy-lit::after {
  animation: ccwhy-run 1.9s cubic-bezier(0.36, 0.1, 0.22, 1) 0.3s 1 both;
}

@keyframes ccwhy-run {
  0%   { opacity: 0; background-position: -18% 50%; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; background-position: 118% 50%; }
}

/* Below 768px the strip becomes a column and the section stylesheet takes
 * the line away. The light has nothing left to run on and goes with it. */
@media (max-width: 767px) {
  .ccwhy-steps::after {
    content: none;
  }
}

/* No motion: the light stays, parked over the middle of the line where the
 * line is brightest anyway, so the strip keeps its accent and nothing
 * moves. */
@media (prefers-reduced-motion: reduce) {
  .ccwhy-steps.ccwhy-lit::after {
    animation: none;
    opacity: 0.55;
    background-position: 50% 50%;
  }
}