body {
  overscroll-behavior-x: contain;
}
/* Flip elements in RTL mode */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}
/* General Animations */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes scale-in-up {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
 @keyframes scale-out-down {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.95) translateY(10px); }
}
@keyframes scale-out-up {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.95) translateY(-10px); }
}
@keyframes list-item-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fade-in 0.25s ease-out forwards; }
.animate-fade-out { animation: fade-out 0.25s ease-out forwards; }
.animate-scale-in-up { animation: scale-in-up 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.animate-scale-out-down { animation: scale-out-down 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; }
.animate-scale-out-up { animation: scale-out-up 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; }
.animate-list-item-in { animation: list-item-in 0.4s ease-out forwards; }

/* Interactive Effects */
.press-effect {
  transition: transform 0.1s ease-out, background-color 0.2s;
}
.press-effect:active {
  transform: scale(0.95);
}

/* Voice Input Animations */
@keyframes pulse-mic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 25px rgba(59, 130, 246, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.mic-pulse {
    animation: pulse-mic 2s infinite;
}

@keyframes fly-to-cart {
  0% {
    transform: translate(0, 0) scale(3);
    opacity: 1;
  }
  100% {
    transform: translate(calc(50vw - 60px), calc(100vh - 100px)) scale(0.1);
    opacity: 0;
  }
}
.animate-fly-to-cart {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  font-size: 3rem;
  z-index: 100;
  pointer-events: none;
  animation: fly-to-cart 1.2s cubic-bezier(0.5, -0.2, 1, 0.5) forwards;
}

/* Confetti Animation */
@keyframes confetti-burst {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0); opacity: 0; }
}
.confetti {
  position: absolute;
  width: 6px;
  height: 10px;
  background-color: var(--color);
  opacity: 0;
}
.confetti-active.confetti {
  animation-name: confetti-burst;
  animation-timing-function: cubic-bezier(0.1, 1, 0.7, 1);
  animation-fill-mode: forwards;
}

/* Animated Background Styles */
@keyframes pulse-and-float-1 {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-70px) translateX(50px) rotate(100deg) scale(1.25);
  }
  50% {
    transform: translateY(50px) translateX(-70px) rotate(220deg) scale(0.85);
  }
  75% {
    transform: translateY(-30px) translateX(30px) rotate(360deg) scale(1.1);
  }
}
@keyframes pulse-and-float-2 {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(60px) translateX(-70px) rotate(-90deg) scale(0.9);
  }
  50% {
    transform: translateY(-60px) translateX(60px) rotate(-190deg) scale(1.2);
  }
  75% {
    transform: translateY(40px) translateX(-40px) rotate(-360deg) scale(1);
  }
}
@keyframes pulse-and-float-3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(80px, -60px) rotate(90deg) scale(1.15);
  }
  50% {
    transform: translate(100px, 100px) rotate(180deg) scale(1.25);
  }
  75% {
    transform: translate(-60px, 80px) rotate(270deg) scale(0.95);
  }
}

.blob {
  transition: opacity 1.5s ease-in-out;
}

.animate-pulse-1 {
  animation: pulse-and-float-1 18s ease-in-out infinite;
}
.animate-pulse-2 {
  animation: pulse-and-float-2 24s ease-in-out infinite;
}
.animate-pulse-3 {
  animation: pulse-and-float-3 20s ease-in-out infinite reverse;
}

.bg-transition {
  transition: background-color 0.3s ease;
}