/*
* Author: Mastering-Web
*/

/* Wave Zoom Effect */
@keyframes waveZoomEffect {
  0% {
    transform: translateX(0) scale(1);
  }
  2% {
    transform: translateX(-30px) scale(1.4);
  }
  4% {
    transform: translateX(25px) scale(1.36);
  }
  6% {
    transform: translateX(-22px) scale(1.32);
  }
  8% {
    transform: translateX(20px) scale(1.28);
  }
  10% {
    transform: translateX(-18px) scale(1.25);
  }
  12% {
    transform: translateX(15px) scale(1.22);
  }
  15% {
    transform: translateX(-12px) scale(1.18);
  }
  20% {
    transform: translateX(10px) scale(1.15);
  }
  25% {
    transform: translateX(-8px) scale(1.12);
  }
  30% {
    transform: translateX(6px) scale(1.1);
  }
  40% {
    transform: translateX(-4px) scale(1.08);
  }
  50% {
    transform: translateX(3px) scale(1.06);
  }
  60% {
    transform: translateX(-2px) scale(1.04);
  }
  70% {
    transform: translateX(1px) scale(1.02);
  }
  80% {
    transform: translateX(-1px) scale(1.01);
  }
  90% {
    transform: translateX(0.5px) scale(1.005);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

/* Shake Effect */
@keyframes shake {
  0%, 100% { 
    transform: translateX(0); 
  }
  25% { 
    transform: translateX(-5px); 
  }
  50% { 
    transform: translateX(5px); 
  }
  75% { 
    transform: translateX(-5px); 
  }
}

@keyframes animate-gap-custom {
  0%, 100% {
      gap: 10px;
  }
  50% {
      gap: 8px;
  }
}

@keyframes wave-custom {
  0%, 100% {
      transform: translateY(0);
      background-color: #eeeeee;
  }
  50% {
      transform: translateY(-30px);
      background-color: #ffffff;
  }
}

@keyframes wave-reverse-custom {
  0%, 100% {
      transform: translateY(0);
      background-color: #eeeeee;
  }
  50% {
      transform: translateY(30px);
      background-color: #ffffff;
  }
}

/* Applying Animations */
.background-vibration {
  animation: waveZoomEffect 1.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}

.shake {
  animation: shake 0.5s ease-in-out;
}