/* Page transition animations */

@keyframes cardMorphIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop-open {
  0% { 
    transform: scale(0.45);
    opacity: 0; 
  }
  75% { 
    transform: scale(1.1); 
    opacity: 1; 
  }
  100% { 
    transform: scale(1); 
  }
}

@keyframes fade-in {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: 1; 
  }
}

@keyframes slide-up {
  0% { 
    transform: translateY(20px); 
    opacity: 0; 
  }
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes bounce-in {
  0% { 
    transform: scale(0.5); 
    opacity: 0; 
  }
  50% { 
    transform: scale(1.2); 
    opacity: 0.8; 
  }
  100% { 
    transform: scale(1); 
    opacity: 1; 
  }
}

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

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

@keyframes squeeze {
  0% { 
    transform: scale(1); 
  }
  25% { 
    transform: scale(0.95) rotateZ(-2deg); 
  }
  50% { 
    transform: scale(0.85) rotateZ(1deg); 
  }
  75% { 
    transform: scale(0.95) rotateZ(-1deg); 
  }
  100% { 
    transform: scale(1) rotateZ(0deg); 
  }
}

/* Add a subtle animation for the squeeze action */
@keyframes squeeze-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Apply animations to page elements */
.squeezers,
.squeezers--card-panel {
  -webkit-animation: cardMorphIn 0.1s ease-out;
  animation: cardMorphIn 0.1s ease-out;
}

.no-animation {
  animation: none !important;
}

.action-menu {
  -webkit-animation: menuSlideIn 0.1s ease-out 0.1s both;
  animation: menuSlideIn 0.1s ease-out 0.1s both;
}

.animate-pop-open {
  animation: pop-open 0.15s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-bounce-in {
  animation: bounce-in 0.4s ease-out;
}

.animate-pulse {
  animation: pulse 1s ease-in-out infinite;
}

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

.animate-squeeze {
  animation: squeeze 0.6s ease-in-out;
}