/* Steps live in core.css; this file carries the connected variant, where the
   four markers are joined by a rail and a dot travels along it while the row
   is on screen. */

.shk-steps--line{ position:relative }

@media (min-width:900px){
  /* Centre each step over its column so the rail can run marker to marker. */
  .shk-steps--line{ grid-template-columns:repeat(var(--steps,4),minmax(0,1fr)) }
  .shk-steps--line li{ text-align:center; padding-top:.5rem }
  .shk-steps--line .shk-step-n{ margin-inline:auto }

  /* Half a column in from each edge is the centre of the first and last
     marker, whatever the column count. */
  .shk-steps--line .shk-steps-rail{
    --half: calc((100% - (var(--steps,4) - 1) * var(--sp-sm)) / (2 * var(--steps,4)));
    position:absolute; z-index:0; pointer-events:none;
    left:var(--half); right:var(--half); top:calc(.5rem + 21px);
    height:2px;
    background:repeating-linear-gradient(90deg,var(--c-line) 0 7px,transparent 7px 15px);
  }
  .shk-dark .shk-steps--line .shk-steps-rail{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 15px);
  }

  .shk-steps--line .shk-steps-fill{
    position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
    background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
    border-radius:2px; opacity:0;
  }
  .shk-steps--line .shk-steps-dot{
    position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%;
    margin:-6.5px 0 0 -6.5px; opacity:0;
    background:var(--c-primary);
    box-shadow:0 0 0 4px rgba(201,195,187,.35), 0 3px 10px rgba(42,31,23,.35);
    will-change:left;
  }

  .shk-steps--line li{ position:relative; z-index:1 }
  .shk-steps--line .shk-step-n{
    position:relative; z-index:2;
    box-shadow:0 0 0 6px var(--c-bg);
  }
  .shk-tint .shk-steps--line .shk-step-n{ box-shadow:0 0 0 6px var(--c-surface-2) }

  /* The loop runs only while the row is in view, so it is not burning frames
     at the bottom of a long page. */
  .shk-steps--line.is-live .shk-steps-fill{ animation:shk-step-fill 4.6s ease-in-out infinite }
  .shk-steps--line.is-live .shk-steps-dot{ animation:shk-step-dot 4.6s ease-in-out infinite }
  .shk-steps--line.is-live li .shk-step-n{
    animation:shk-step-pop 4.6s linear infinite;
    animation-delay:calc(.37s + var(--i, 0) * (3.86s / (var(--steps,4) - 1)));
  }
}

@keyframes shk-step-dot{
  0%      { left:0;    opacity:0 }
  8%      { left:0;    opacity:1 }
  84%     { left:100%; opacity:1 }
  95%,100%{ left:100%; opacity:0 }
}
@keyframes shk-step-fill{
  0%      { transform:scaleX(0); opacity:1 }
  8%      { transform:scaleX(0); opacity:1 }
  84%     { transform:scaleX(1); opacity:1 }
  95%,100%{ transform:scaleX(1); opacity:0 }
}
@keyframes shk-step-pop{
  0%     { transform:scale(1);    box-shadow:0 0 0 6px var(--c-bg), 0 0 0 0 rgba(201,195,187,.6) }
  3.2%   { transform:scale(1.13); box-shadow:0 0 0 6px var(--c-bg), 0 0 0 9px rgba(201,195,187,0) }
  9%,100%{ transform:scale(1);    box-shadow:0 0 0 6px var(--c-bg), 0 0 0 0 rgba(201,195,187,0) }
}

@media (prefers-reduced-motion:reduce){
  .shk-steps--line .shk-steps-dot{ display:none }
  .shk-steps--line .shk-steps-fill{ animation:none; transform:scaleX(1); opacity:.5 }
  .shk-steps--line.is-live li .shk-step-n{ animation:none }
}