/* The mark assembling. 1.4s total — ring 0-600ms, the 1 at 500-900ms, the X
   breaking out at 800-1400ms. Plays once. Nothing here loops. */

.mark { width: 100%; height: auto; overflow: visible; }
.mark__sweep { stroke-dasharray: 1361; stroke-dashoffset: 0; }

.mark--assemble .mark__sweep {
  stroke-dashoffset: 1361;
  transform: rotate(-90deg);
  transform-origin: 602px 517.5px;
  animation: mark-ring 600ms var(--ease) forwards;
}
.mark--assemble .mark__one {
  opacity: 0;
  transform: translateY(-28px);
  animation: mark-one 400ms var(--ease) 500ms forwards;
}
.mark--assemble .mark__x {
  opacity: 0;
  transform: translate(-26px, -22px);
  animation: mark-x 600ms var(--ease) 800ms forwards;
}

@keyframes mark-ring { to { stroke-dashoffset: 0; } }
@keyframes mark-one  { to { opacity: 1; transform: none; } }
@keyframes mark-x    { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mark--assemble .mark__sweep { stroke-dashoffset: 0; animation: none; }
  .mark--assemble .mark__one,
  .mark--assemble .mark__x { opacity: 1; transform: none; animation: none; }
}