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

/* Define keyframes for a playful jump */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px);
  }
  28% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  95% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Keyframes for the upward movement */
@keyframes moveUp {
  0% {
    transform: translate(-50%, -10%); /* Start at the center */
  }
  100% {
    transform: translate(-50%, -50%); /* End 15% away from the top */
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropZ {
  from {
    z-index: 999;
  } /* just keeps it during fade */
  to {
    z-index: 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}




@keyframes glow {
  0% {
    background-color: color-mix(in srgb, var(--backgroundPrimary) 0%, transparent);
  }
  50% {
    background-color: color-mix(in srgb, var(--backgroundPrimary) 100%, transparent);
  }
  100% {
    background-color: color-mix(in srgb, var(--backgroundPrimary) 0%, transparent);
  }
}

.glow-once {
  animation: glow 2.5s ease-out;
}