/* Swipe / Transition Animations */

/* Base transition class (optional helper) */
.swipe-animating {
  pointer-events: none; /* Prevent interaction during swipe */
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.3s;
}

/* Exiting */
.swipe-exit-left {
  animation: slideOutLeft 0.3s forwards;
}
.swipe-exit-right {
  animation: slideOutRight 0.3s forwards;
}

/* Entering */
.swipe-enter-left {
  animation: slideInRight 0.3s forwards; /* Enter from Right when moving Next (Left swipe) usually implies new content comes from right? No, wait. 
     If I swipe LEFT (drag finger left), I usually want to see the NEXT item which is on the RIGHT. 
     So current item slides out LEFT. New item slides in from RIGHT.
  */
}
.swipe-enter-right {
  animation: slideInLeft 0.3s forwards;
}

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

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

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

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