/* Shared forward-action link for portfolio content. Header and back-navigation links do not use this class. */
.text-link:not(.secondary-button),
.cta-link {
  display: inline-block;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.text-link__label {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 6px;
  position: relative;
}

.text-link__label::after {
  background-color: currentColor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  max-width: 100%;
  min-height: 1px;
  position: absolute;
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  width: 100%;
}

@keyframes text-link-line-sweep {
  0% {
    transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  49% {
    transform: translate3d(100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  50% {
    transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  100% {
    transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

.text-link__arrow-frame {
  display: inline-block;
  height: 1em;
  margin-left: 4px;
  overflow: hidden;
  position: relative;
  top: -9px;
  vertical-align: middle;
  width: 1.1em;
}

.text-link__arrow {
  left: 0;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  transform-style: preserve-3d;
}

/* Primary navigation uses the same swept line, without the forward arrow. */
.site-header .links a {
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.site-header .links a::after {
  background-color: currentColor;
  bottom: 6px;
  content: "";
  height: 2px;
  left: 0;
  min-height: 2px;
  opacity: 0;
  position: absolute;
  transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
  width: 100%;
}

.site-header .links a.is-active::after {
  opacity: 1;
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

@keyframes text-link-arrow-cycle {
  0% {
    transform: translate3d(0, -50%, 0) rotate(0deg);
  }

  49% {
    transform: translate3d(100%, -160%, 0) rotate(-4deg);
  }

  50% {
    transform: translate3d(-100%, 60%, 0) rotate(4deg);
  }

  100% {
    transform: translate3d(0, -50%, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .text-link__label::after {
    transition: transform .8s ease;
  }

  .text-link:not(.secondary-button):hover .text-link__arrow,
  .text-link:not(.secondary-button):focus-visible .text-link__arrow,
  .cta-link:hover .text-link__arrow,
  .cta-link:focus-visible .text-link__arrow {
    animation: text-link-arrow-cycle .8s ease both;
  }

  .text-link:not(.secondary-button):hover .text-link__label::after,
  .text-link:not(.secondary-button):focus-visible .text-link__label::after,
  .cta-link:hover .text-link__label::after,
  .cta-link:focus-visible .text-link__label::after {
    animation: text-link-line-sweep .8s ease both;
  }

  .site-header .links a:hover::after,
  .site-header .links a:focus-visible::after {
    opacity: 1;
    animation: text-link-line-sweep .8s ease both;
  }
}