@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* Spinner (circular rotation) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Subtle scale in (cards, images) */
@keyframes scaleIn {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Fade + slight upward motion */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse (soft emphasis) */
@keyframes pulseSoft {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* Wiggle (attention) */
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(1deg);
  }
}

/* Shimmer (skeleton loaders) */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Progress bar / width grow */
@keyframes growX {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* Inline reveal with width */
@keyframes revealWidth {
  0% {
    width: 0vw;
    opacity: 0;
    overflow-x: hidden;
  }
  100% {
    width: 100vw;
    opacity: 1;
    overflow-x: hidden;
  }
}

/* Opacity breathing */
@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}