.box-link {
    position: absolute;
    text-align: center;
    /* top: 50%; */
    left: -30px;
}
.link {
    display: inline-flex;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    transform: rotate(-90deg) translate3d(-300px, 0, 0);
}
.link__arrow {
display: inline-flex;
}
.link__arrow span {
position: relative;
width: 14px;
height: 3px;
border-radius: 2px;
overflow: hidden;
background: #fff;
z-index: 2;
}
.link__arrow span:nth-child(1) {
transform-origin: left bottom;
transform: rotate(45deg) translate3d(8px, -10px, 0);
}
.link__arrow span:nth-child(2) {
transform-origin: left bottom;
transform: rotate(-45deg);
}
.link__arrow span:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 0;
height: 3px;
background: rgb(127, 84, 31);
}
.link__line {
position: relative;
margin-left: -14px;
margin-right: 30px;
width: 150px;
height: 3px;
background: #fff;
overflow: hidden;
z-index: 1;
}
.link__line:after {
content: "";
display: block;
position: absolute;
left: 80px;
width: 70px;
height: 3px;
background: rgb(127, 84, 31);
}
.link__text {
color: rgb(127, 84, 31);
font-family: "Oswald", sans-serif;
font-size: 32px;
text-transform: uppercase;
}
.link:hover .link__line:after {
animation: animation-line 1s forwards;
}
.link:hover .link__arrow span:after {
animation: animation-arrow 1s forwards;
animation-delay: 0.5s;
}

@keyframes animation-line {
0% {
    left: 80px;
}
100% {
    left: 0;
}
}
@keyframes animation-arrow {
0% {
    width: 0;
}
100% {
    width: 100%;
}
}