.ec-link {
  --ec-link-duration: 180ms;
  position: relative;
}

/* The source stays in the line box and keeps the accessible name. */
.ec-link__source {
  opacity: 0 !important;
}

.ec-link__label {
  position: absolute;
  top: var(--ec-link-label-top, 0px);
  left: var(--ec-link-label-left, 0px);
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  line-height: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.ec-link__row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: visible;
  white-space: pre;
  line-height: inherit;
  pointer-events: none;
}

.ec-link__char {
  display: inline-block;
  flex: 0 0 auto;
  height: 100%;
  white-space: pre;
  line-height: inherit;
  letter-spacing: inherit;
  transform: translateY(0);
  transition: transform var(--ec-link-duration) var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.ec-link__row--next .ec-link__char {
  transform: translateY(calc(100% + 2px));
}

.ec-link:focus-visible .ec-link__row--current .ec-link__char {
  transform: translateY(calc(-100% - 2px));
}

.ec-link:focus-visible .ec-link__row--next .ec-link__char {
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .ec-link:hover .ec-link__row--current .ec-link__char {
    transform: translateY(calc(-100% - 2px));
  }

  .ec-link:hover .ec-link__row--next .ec-link__char {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ec-link__char {
    transition: none !important;
    transform: translateY(0) !important;
  }

  .ec-link__row--next {
    visibility: hidden;
  }

  .ec-link .link-arrow {
    transform: none !important;
    transition: none !important;
  }

  .ec-link:focus-visible {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .ec-link:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
  }
}