/* Cart Flying Animation Styles */

/* Flying image animation container */
.flying-image {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Force hardware acceleration */
  transform: translateZ(0);
  /* Improve rendering performance */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Keyframe animation for flying to cart */
@keyframes flyToCart {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: scale(0.9) rotate(5deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(0.6) rotate(10deg);
    opacity: 0.8;
  }
  80% {
    transform: scale(0.3) rotate(15deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.1) rotate(20deg);
    opacity: 0;
  }
}

/* Animation class to be applied dynamically */
.flying-image.animate {
  animation: flyToCart 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Cart button pulse effect when item is added */
@keyframes cartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.cart-pulse {
  animation: cartPulse 0.3s ease-in-out;
}

/* Badge bounce effect */
@keyframes badgeBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

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

/* Success feedback animation */
@keyframes successFeedback {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.success-feedback {
  position: fixed;
  z-index: 9998;
  background: rgba(34, 197, 94, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  animation: successFeedback 1s ease-out forwards;
}

#cart-badge {
  transition: all 0.3s ease-in-out;
}

/* Hover effects for better UX */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .flying-image {
    max-width: 80px;
    max-height: 80px;
  }
  
  @keyframes flyToCart {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    20% {
      transform: scale(0.8) rotate(3deg);
      opacity: 0.9;
    }
    50% {
      transform: scale(0.5) rotate(6deg);
      opacity: 0.8;
    }
    80% {
      transform: scale(0.2) rotate(9deg);
      opacity: 0.5;
    }
    100% {
      transform: scale(0.05) rotate(12deg);
      opacity: 0;
    }
  }
}

/* High performance animation settings */
.flying-image.animate {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Fallback for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .flying-image.animate {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  
  .cart-pulse,
  .badge-bounce {
    animation: none;
  }
}