/* Animation Keyframes */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

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

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

/* Slide Animation Classes */
.slide-enter-next {
    animation: slideInRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.slide-exit-prev {
    animation: slideOutLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.slide-enter-prev {
    animation: slideInLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.slide-exit-next {
    animation: slideOutRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Make sure slides are positioned absolutely to overlap during animation */
.story-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hidden by default */
    opacity: 0;
    transform: translateX(0); /* Reset transform */
    z-index: 1;
}

.story-slide.active {
    display: block;
    opacity: 1;
    z-index: 2;
}

/* Ensure animating slides are visible */
.story-slide.animating {
    display: block;
    z-index: 3;
}