/* ==========================================================================
   COSMOSKIN — progress motion
   The sheen that passes over a meter as it fills. The fill itself is driven
   from progress-motion.js, because the distance travelled has to be measured
   from whatever the layout already resolved to.
   ========================================================================== */

.cs-bar-sheen {
  position: relative;
  overflow: hidden;
}

/* A single pass of light, clipped to the track. Sits above the fill but below
   anything the bar labels itself with. */
.cs-bar-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 249, 0) 0%,
    rgba(255, 253, 249, .42) 50%,
    rgba(255, 253, 249, 0) 100%
  );
  transform: translate3d(-120%, 0, 0);
  animation: csBarSheen 1.5s cubic-bezier(.16, 1, .3, 1) .12s 1 both;
}

@keyframes csBarSheen {
  from { transform: translate3d(-120%, 0, 0); }
  to   { transform: translate3d(320%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bar-sheen::after {
    animation: none;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Order steppers
   Not meters: a five-step <ol>. The steps already reached light up in sequence
   so the row reads as progress made rather than five dots that were always on.
   -------------------------------------------------------------------------- */
.cs-step-lit {
  animation: csStepLit 420ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--cs-step-delay, 0ms);
}

@keyframes csStepLit {
  0%   { opacity: .45; }
  40%  { opacity: 1; }
  100% { opacity: 1; }
}

/* The dot takes the beat; the label stays put so no text jitters. */
.cs-step-lit > span[aria-hidden="true"] {
  animation: csStepDot 420ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--cs-step-delay, 0ms);
  transform-origin: 50% 50%;
}

@keyframes csStepDot {
  0%   { transform: scale(.55); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-step-lit,
  .cs-step-lit > span[aria-hidden="true"] {
    animation: none;
  }
}