/* Served outside Tailwind so logo color animation is not stripped. */

@keyframes brand-cycle-color {
  0% {
    color: #2dacf9;
  }
  20% {
    color: #7ce95a;
  }
  40% {
    color: #ffdf5f;
  }
  60% {
    color: #fa73da;
  }
  80% {
    color: #ff3c32;
  }
  100% {
    color: #2dacf9;
  }
}

.color-shift-logo {
  color: #2dacf9;
  animation: brand-cycle-color 10s linear infinite;
}

.color-shift-logo__main {
  color: inherit;
}

/* Masked SVG marks that inherit the same brand color cycle */
.color-shift-mask {
  color: #2dacf9;
  animation: brand-cycle-color 10s linear infinite;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.scroll-logo__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .color-shift-logo,
  .color-shift-mask {
    animation: none;
    color: #d60d0d;
  }
}