@keyframes move-bg {
  from { background-position: 0% center; }
  to { background-position: 200% center; }
}

/* rainbow */
.rainbow-animated {
  background: linear-gradient(to right, rgb(252, 104, 110), rgb(255, 255,110), rgb(155, 255, 110), rgb(252, 102, 255), rgb(153, 100, 255), rgb(114, 255, 255), rgb(252, 104, 110));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-animation: move-bg 3s linear infinite;
  animation: move-bg 3s linear infinite;
  
  animation-direction: reverse;
  margin: 0;
}

/* magic (js needed) */
.magic-animated {
  background: linear-gradient(to right, rgb(123, 31, 162), rgb(103, 58, 183), rgb(244, 143, 177), rgb(123, 31, 162));
  background-size: 200%;

  display: inline-block;
  position: relative;
  
  white-space: pre-wrap;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  -webkit-animation: move-bg 3s linear infinite;
  animation: move-bg 3s linear infinite;
  animation-direction: reverse;
}

.magic-animated > .magic-star {
  fill: rgb(123, 31, 162);
  --size: clamp(0.4em, 0.6em, 0.8em);
  
  animation: magic-scale 0.7s ease forwards;
  
  display: inline-block;

  position: absolute;
  left: var(--star-left);
  top: var(--star-top);

  height: var(--size);
  width: var(--size);
}

.magic-animated > .magic-star > svg {
  animation: magic-rotate 1s linear infinite;
  display: block;
  opacity: 0.7;
}

@keyframes magic-scale {
  from, to { transform: scale(0); }
  50% { transform: scale(1); }
}

@keyframes magic-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

/* blink */
.blink-animated {
  -webkit-animation: blink 1s linear infinite;
  animation: blink 1s steps(1, end) infinite;
  
  margin: 0;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* gold */
.gold-animated {
  background: linear-gradient(to right, #FEDB37, #FDB931, #9f7928, #8A6E2F, #FEDB37);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  -webkit-animation: move-bg 3s linear infinite;
  animation: move-bg 3s linear infinite;
  
  animation-direction: reverse;
  margin: 0;
}

/* bronze */
.bronze-animated {
  background: linear-gradient(to right, #ffdeca, #ca7345, #a14521, #732100, #ffdeca);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  -webkit-animation: move-bg 3s linear infinite;
  animation: move-bg 3s linear infinite;
  
  animation-direction: reverse;
  margin: 0;
}

/* silver */
.silver-animated {
  background: linear-gradient(to right, #fff, #555, #555, #555, #fff);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  -webkit-animation: move-bg 3s linear infinite;
  animation: move-bg 3s linear infinite;
  
  animation-direction: reverse;
  margin: 0;
}

/* shake (js needed) */
.shake-animated {
  display: inline-flex;
  margin: 0;
}

.shake { animation: shake 0.5s linear infinite; }
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* jump (js needed) */
.jump-animated {
  display: inline-flex;
  margin: 0;
}

.jump { animation: jump 0.5s ease infinite; }
@keyframes jump {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-8px);}
  100%  { transform: translateY(4px);}
}