.move-up {
    transform: translateY(100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.move-up.visible {
    transform: translateY(0);
    opacity: 1;
}


.move-down {
    transform: translateY(-100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.move-down.visible {
    transform: translateY(0);
    opacity: 1;
}


.move-left {
    transform: translateX(100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.move-left.visible {
    transform: translateX(0);
    opacity: 1;
}

.move-right {
    transform: translateX(-100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.move-right.visible {
    transform: translateX(0);
    opacity: 1;
}

.move-title {
    transform: translateX(100%) rotate(0deg);
    transition: transform 1s ease-out, opacity 1s ease-out, rotate 1s ease-out;
    opacity: 0;
}

.move-title.visible {
    transform: translateX(0) rotate(-7deg);
    opacity: 1;
}