/* Keep the finished glyph outside the active frame, including narrow phones. */
.stroke-sequence {
  --stroke-size:184px;
  --past-scale:.38;
  --past-gap:20px;
  --past-step:78px;
  --active-shift:0px;
  --settle-from:0px;
  --past-width:calc(var(--stroke-size) * var(--past-scale));
  --past-offset:calc(-1 * (var(--stroke-size) / 2 + var(--past-gap) + var(--past-width) / 2));
}
.stroke-sequence .stroke-box,
.stroke-sequence .stroke-past {
  left:calc(50% + var(--active-shift));
  top:calc((184px - var(--stroke-size)) / 2);
  width:var(--stroke-size);
  height:var(--stroke-size);
  margin-left:calc(var(--stroke-size) / -2);
}
.stroke-sequence .stroke-past {
  color:#d8cdd0;
  pointer-events:none;
  transform:translate(var(--past-offset),calc(var(--past-row) * var(--past-step))) scale(var(--past-scale));
}
.stroke-sequence .stroke-past svg,
.stroke-sequence .stroke-box svg { display:block; width:100%; height:100%; }
.stroke-sequence .stroke-placeholder { width:100%; height:100%; font-size:calc(var(--stroke-size) * .79); }
.stroke-sequence .stroke-past.just-finished { animation:stroke-history-settle .65s ease both; }
.stroke-sequence.first-history { --settle-from:calc(-1 * var(--active-shift)); }
@keyframes stroke-history-settle {
  from { transform:translate(var(--settle-from),0) scale(1); color:var(--wine); }
  to { transform:translate(var(--past-offset),calc(var(--past-row) * var(--past-step))) scale(var(--past-scale)); color:#d8cdd0; }
}
@media(max-width:600px) {
  .stroke-sequence { --stroke-size:clamp(144px,calc(100vw - 160px),184px); --past-scale:.28; --past-gap:12px; --past-step:56px; }
  .stroke-sequence.has-history { --active-shift:calc((var(--past-width) + var(--past-gap)) / 2); }
}
@media(prefers-reduced-motion:reduce) {
  .stroke-sequence .stroke-past.just-finished { animation:none; }
}