@keyframes color-1-anim {
   0%       { fill: var(--sg-color-1); }
   25%      { fill: var(--sg-color-2); }
   50%      { fill: var(--sg-color-1); }
   75%      { fill: var(--sg-color-3); }
}
@keyframes color-2-anim {
   0%       { fill: var(--sg-color-2); }
   25%      { fill: var(--sg-color-3); }
   50%      { fill: var(--sg-color-2); }
   75%      { fill: var(--sg-color-1); }
}
@keyframes color-3-anim {
   0%       { fill: var(--sg-color-3); }
   25%      { fill: var(--sg-color-1); }
   50%      { fill: var(--sg-color-3); }
   75%      { fill: var(--sg-color-2); }
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

@keyframes ping {
   75%, 100% {
      transform: scale(2);
      opacity: 0;
   }
}

@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: .5; }
}

@keyframes bounce {
   0%, 100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
   50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
}

.animate-none {
   animation: none;
}

.animate-spin {
   animation: spin 1s linear infinite;
}

.animate-ping {
   animation: ping 1s linear infinite;
}

.animate-pulse {
   animation: pulse 1s linear infinite;
}

.animate-bounce {
   animation: bounce 1s linear infinite;
}