/* ── Swarm arrow (scripts/lib/swarm-arrow.mjs, linked by scripts/build-swarm-arrows.mjs) ──
   The brand swarm as a direction mark: a four-dot shaft, a two-dot chevron each side and the
   lead. At rest the shaft fades toward the tail like a motion trail. When its link is pointed at
   or focused, the head pulls ahead and each follower starts a beat later and travels a little
   less, so the flock stretches out along its heading. The 'out' variant flies up and away, and
   its lead breaks from the flock. Static with reduced motion; plain link ink in forced colours. */
.swarm-arrow {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-inline-start: .3em;
  vertical-align: -.22em;
  fill: currentColor;
  overflow: visible;
}
.swarm-arrow--out { rotate: -45deg; }
.swarm-arrow circle {
  transition: transform .42s cubic-bezier(.2, .8, .25, 1.2), opacity .42s ease;
}
.swarm-arrow circle:nth-child(1) { opacity: .4; }
.swarm-arrow circle:nth-child(2) { opacity: .6; }
.swarm-arrow circle:nth-child(3) { opacity: .8; }
.swarm-arrow circle:nth-child(4) { opacity: .95; }

/* The lead moves first and furthest; followers start later and travel less (arrow units). */
:is(a, button):focus-visible .swarm-arrow circle:nth-child(1) { transform: translateX(1px); opacity: 0.8; transition-delay: 180ms; }
:is(a, button):focus-visible .swarm-arrow circle:nth-child(2) { transform: translateX(1.8px); opacity: 0.88; transition-delay: 150ms; }
:is(a, button):focus-visible .swarm-arrow circle:nth-child(3) { transform: translateX(2.6px); opacity: 0.95; transition-delay: 120ms; }
:is(a, button):focus-visible .swarm-arrow circle:nth-child(4) { transform: translateX(3.2px); opacity: 1; transition-delay: 90ms; }
:is(a, button):focus-visible .swarm-arrow circle:is(:nth-child(5), :nth-child(6)) { transform: translateX(3.8px); transition-delay: 60ms; }
:is(a, button):focus-visible .swarm-arrow circle:is(:nth-child(7), :nth-child(8)) { transform: translateX(4.3px); transition-delay: 30ms; }
:is(a, button):focus-visible .swarm-arrow circle:nth-child(9) { transform: translateX(5px); }
:is(a, button):focus-visible .swarm-arrow--out circle:nth-child(9) { transform: translateX(8px); }
@media (hover: hover) {
  :is(a, button):hover .swarm-arrow circle:nth-child(1) { transform: translateX(1px); opacity: 0.8; transition-delay: 180ms; }
  :is(a, button):hover .swarm-arrow circle:nth-child(2) { transform: translateX(1.8px); opacity: 0.88; transition-delay: 150ms; }
  :is(a, button):hover .swarm-arrow circle:nth-child(3) { transform: translateX(2.6px); opacity: 0.95; transition-delay: 120ms; }
  :is(a, button):hover .swarm-arrow circle:nth-child(4) { transform: translateX(3.2px); opacity: 1; transition-delay: 90ms; }
  :is(a, button):hover .swarm-arrow circle:is(:nth-child(5), :nth-child(6)) { transform: translateX(3.8px); transition-delay: 60ms; }
  :is(a, button):hover .swarm-arrow circle:is(:nth-child(7), :nth-child(8)) { transform: translateX(4.3px); transition-delay: 30ms; }
  :is(a, button):hover .swarm-arrow circle:nth-child(9) { transform: translateX(5px); }
  :is(a, button):hover .swarm-arrow--out circle:nth-child(9) { transform: translateX(8px); }
}
/* A press sends the whole flock forward at once: the tap reads as a launch on touch screens. */
:is(a, button):active .swarm-arrow circle { transform: translateX(4px); opacity: 1; transition-duration: .12s; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .swarm-arrow circle { transition: none; }
  :is(a, button):is(:hover, :focus-visible, :active) .swarm-arrow circle { transform: none; }
}
@media (forced-colors: active) {
  .swarm-arrow { fill: LinkText; }
  .swarm-arrow circle { opacity: 1; }
}