/* Common Animation */
.slide-up,
.slide-down,
.slide-left,
.slide-right {
    opacity: 0;
    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Directions */
.slide-up {
    transform: translateY(50px);
}

.slide-down {
    transform: translateY(-50px);
}

.slide-left {
    transform: translateX(-50px);
}

.slide-right {
    transform: translateX(50px);
}

/* Active */
.slide-up.show,
.slide-down.show,
.slide-left.show,
.slide-right.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .slide-up,
    .slide-down,
    .slide-left,
    .slide-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}