.reveal,
.reveal-top,
.reveal-right,
.reveal-bottom,
.reveal-left {
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes reveal-top {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes reveal-bottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.reveal.revealed {
    animation: fade-in 1s ease-in forwards;
}

.reveal-top.revealed {
    animation: reveal-top 1s ease-out forwards;
}

.reveal-right.revealed {
    animation: reveal-right 1s ease-out forwards;
}

.reveal-bottom.revealed {
    animation: reveal-bottom 1s ease-out forwards;
}

.reveal-left.revealed {
    animation: reveal-left 1s ease-out forwards;
}