/* === PROFESSIONAL KEYFRAME ANIMATIONS === */

/* === ENTRY ANIMATIONS === */
@keyframes searchModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* === ATTENTION SEEKERS === */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1) translateZ(0);
  }
  10%,
  30% {
    transform: scale(1.1) translateZ(0);
  }
  20%,
  40% {
    transform: scale(1.05) translateZ(0);
  }
}

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

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-10px) translateZ(0);
  }
}

@keyframes swing {
  20% {
    transform: rotate(15deg) translateZ(0);
  }
  40% {
    transform: rotate(-10deg) translateZ(0);
  }
  60% {
    transform: rotate(5deg) translateZ(0);
  }
  80% {
    transform: rotate(-5deg) translateZ(0);
  }
  100% {
    transform: rotate(0deg) translateZ(0);
  }
}

/* === UTILITY ANIMATIONS === */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    max-height: 500px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

/* === SKELETON LOADING === */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes shimmerWave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* === PROGRESS ANIMATIONS === */
@keyframes progressBar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* === NOTIFICATION ANIMATIONS === */
@keyframes slideInNotification {
  from {
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateZ(0);
    opacity: 1;
  }
}

@keyframes slideOutNotification {
  from {
    transform: translateX(0) translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
}

/* === BACKGROUND ANIMATIONS === */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-10px) translateZ(0);
  }
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-20px) translateZ(0);
  }
}