.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

.fade-in {
    opacity: 0;
    transition: opacity 1s ease;
}

    .fade-in.active {
        opacity: 1;
    }

.slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s ease;
}

    .slide-left.active {
        opacity: 1;
        transform: translateX(0);
    }

.slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s ease;
}

    .slide-right.active {
        opacity: 1;
        transform: translateX(0);
    }