/* Slide in from left */
@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from right */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from top */
@keyframes slide-in-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Reveal animation */
@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slide-in-left {
    opacity: 0;
}

.slide-in-right {
    opacity: 0;
}

.slide-in-top {
    opacity: 0;
}

.reveal {
    opacity: 0;
}

.animate-slide-in-left {
    animation: slide-in-left 1s ease-out forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 1s ease-out forwards;
}

.animate-slide-in-top {
    animation: slide-in-top 1s ease-out forwards;
}

.animate-reveal {
    animation: reveal 4s ease-out forwards;
}