@keyframes increaseWidth {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes bg {
    0% {
        background-size: 0% 100%;
    }

    100% {
        background-size: 100% 100%;
    }
}

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

.rise-up-text {
    transform: translateY(30%);
    opacity: 0;
    animation: riseUp 1s ease-out forwards;
}

.rise-up-desc {
    transform: translateY(100%);
    opacity: 0;
    animation: riseUp 1s ease-out .1s forwards;
}

.rise-up-mark {
    transform: translateY(100%);
    opacity: 0;
    animation: riseUp 1s ease-out .5s forwards;
}

.rise-up-explore {
    transform: translateY(50%);
    animation: riseUp 1s ease-out .8s forwards;
}

.showWord {
    word-wrap: break-word;
}

.showBorder {
    width: 100%;
    animation: increaseWidth 1.2s linear;
}

.showWord span {
    color: transparent;
    background-image: linear-gradient(to right, #000000, #000000, #000000);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-size: 100% 100%;
    animation: bg 1.2s linear;
    position: relative;
}