.link {
  border: none;
  border-radius: 120px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  transition: background-color 1.5s ease;
}

.link .link__text {
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.02em;
  margin: 0 24px;
  animation: textSlideReverse 1.5s ease forwards paused;
}


.link:hover .link__text {
  animation: textSlide 1.5s ease forwards;
}

.link:not(:hover) .link__text {
  animation-play-state: running;
}

.link .link__icon {
  border-radius: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  transition: background-color 1.5s ease;
}

.link:not(:hover) .link__icon {
  animation-play-state: running;
}

.link--visit .link__icon {
  animation: iconSlideReverseVisit 1.5s ease forwards paused;
}

.link--visit:hover .link__icon {
  animation: iconSlideVisit 1.5s ease forwards;
}

.link--read .link__icon {
  animation: iconSlideReverseRead 1.5s ease forwards paused;
}

.link--read:hover .link__icon {
  animation: iconSlideRead 1.5s ease forwards;
}

.link--help .link__icon {
  animation: iconSlideReverseHelp 1.5s ease forwards paused;
}

.link--help:hover .link__icon {
  animation: iconSlideHelp 1.5s ease forwards;
}

.link--message .link__icon {
  animation: iconSlideReverseMessage 1.5s ease forwards paused;
}

.link--message:hover .link__icon {
  animation: iconSlideMessage 1.5s ease forwards;
}

.link--large .link__icon {
  animation: iconSlideReverseLarge 1.5s ease forwards paused;
}

.link--large:hover .link__icon {
  animation: iconSlideLarge 1.5s ease forwards;
}

.link--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  font-size: 32px;
}

.link--dark .link__icon {
  background-color: var(--color-green);
}

.link--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.link--primary .link__icon {
  background-color: var(--color-dark);
}

.link--white {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.link--white .link__icon {
  background-color: var(--color-dark);
}

.link--dark:hover {
  background-color: var(--color-green);
}

.link--dark:hover .link__icon {
  background-color: var(--color-dark);
}

@media screen and (min-width: 1440px) {
  .link .link__text--large {
    font-size: 48px;
  }
}

@keyframes textSlide {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-8px);
  }

  70% {
    transform: translateX(116px);
  }

  100% {
    transform: translateX(108px);
  }
}

@keyframes iconSlideVisit {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(16px);
  }

  70% {
    transform: translateX(-284px);
  }

  100% {
    transform: translateX(-268px);
  }
}

@keyframes textSlideReverse {
  0% {
    transform: translateX(108px);
  }

  30% {
    transform: translateX(116px);
  }

  80% {
    transform: translateX(-8px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes iconSlideReverseVisit {
  0% {
    transform: translateX(-268px);
  }

  30% {
    transform: translateX(-284px);
  }

  70% {
    transform: translateX(16px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes iconSlideRead {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(16px);
  }

  70% {
    transform: translateX(-308px);
  }

  100% {
    transform: translateX(-287px);
  }
}

@keyframes iconSlideReverseRead {
  0% {
    transform: translateX(-287px);
  }

  30% {
    transform: translateX(-308px);
  }

  70% {
    transform: translateX(16px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes iconSlideHelp {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(16px);
  }

  70% {
    transform: translateX(-378px);
  }

  100% {
    transform: translateX(-368px);
  }
}

@keyframes iconSlideReverseHelp {
  0% {
    transform: translateX(-368px);
  }

  30% {
    transform: translateX(-378px);
  }

  70% {
    transform: translateX(16px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes iconSlideMessage {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(16px);
  }

  70% {
    transform: translateX(-339px);
  }

  100% {
    transform: translateX(-323px);
  }
}

@keyframes iconSlideReverseMessage {
  0% {
    transform: translateX(-323px);
  }

  30% {
    transform: translateX(-339px);
  }

  70% {
    transform: translateX(16px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes iconSlideLarge {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(16px);
  }

  70% {
    transform: translateX(-370px);
  }

  100% {
    transform: translateX(-354px);
  }
}

@keyframes iconSlideReverseLarge {
  0% {
    transform: translateX(-354px);
  }

  30% {
    transform: translateX(-370px);
  }

  70% {
    transform: translateX(16px);
  }

  100% {
    transform: translateX(0);
  }
}