/* Kodza — Arrow Link
   A link that points the way. At rest a chevron sits after the words; on hover the arrow's
   shaft draws itself in and the head moves on, so › becomes →, and the words lean forward a
   hair. --back points the other way. Pure CSS.
   Everything is tuned with the --kz-arrow-link-* variables. */
.kodza-arrow-link {
  --kz-arrow-link-size: 0.82em;
  --kz-arrow-link-gap: 0.3em;
  --kz-arrow-link-duration: 0.45s;
  --kz-arrow-link-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: inline-flex;
  align-items: center;
  gap: var(--kz-arrow-link-gap);
  color: inherit;
  text-decoration: none;
}

.kodza-arrow-link__arrow {
  display: inline-block;
  flex: none;
  width: var(--kz-arrow-link-size);
  height: var(--kz-arrow-link-size);
  overflow: visible;
}

.kodza-arrow-link__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* At rest: the head alone, a little back; the shaft not drawn yet */
.kodza-arrow-link__head {
  transform: translateX(-3.5px);
  transition: transform var(--kz-arrow-link-duration) var(--kz-arrow-link-ease);
}

.kodza-arrow-link__shaft {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--kz-arrow-link-duration) var(--kz-arrow-link-ease);
}

.kodza-arrow-link:hover .kodza-arrow-link__head,
.kodza-arrow-link:focus-visible .kodza-arrow-link__head {
  transform: translateX(1.5px);
}

.kodza-arrow-link:hover .kodza-arrow-link__shaft,
.kodza-arrow-link:focus-visible .kodza-arrow-link__shaft {
  stroke-dashoffset: 0;
}

/* Back: the same, facing the other way */
.kodza-arrow-link--back .kodza-arrow-link__head {
  transform: translateX(3.5px);
}

.kodza-arrow-link--back:hover .kodza-arrow-link__head,
.kodza-arrow-link--back:focus-visible .kodza-arrow-link__head {
  transform: translateX(-1.5px);
}

.kodza-arrow-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-arrow-link__head,
  .kodza-arrow-link__shaft {
    transition-duration: 0.01ms !important;
  }
}