:root {
    --text: #0A0A0A;
    --line: #23BD87;
    --duration: 0.44s;
    --duration-line: 0.84s;
}

h1 .link {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

h1 .link div {
    overflow: hidden;
}

h1 .link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 140px 0 #0A0A0A;
}

h1 .link div:last-child {
    position: absolute;
    pointer-events: none;
    right: 0;
    left: 0;
    bottom: -3px;
    height: 5px;
}

h1 .link div:last-child svg {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 300%;
    height: 4px;
    fill: none;
    stroke: #23BD87;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 63.5px 128px;
    stroke-dashoffset: 190.25px;
    transform: translateX(0) translateZ(0);
    transition: transform 0s, stroke-dashoffset 0s;
}

h1 .link div:last-child svg {
    transition: transform var(--line-d, 0s), stroke-dashoffset var(--line-d, 0s);
}

h1 .link span {
    display: block;
    backface-visibility: hidden;
    font-style: normal;
    transition: transform 0.84s ease;
    transform: translateY(var(--m, 0));
}

h1 .link span:nth-child(1)  { transition-delay: 0.05s; }
h1 .link span:nth-child(2)  { transition-delay: 0.10s; }
h1 .link span:nth-child(3)  { transition-delay: 0.15s; }
h1 .link span:nth-child(4)  { transition-delay: 0.20s; }
h1 .link span:nth-child(5)  { transition-delay: 0.25s; }
h1 .link span:nth-child(6)  { transition-delay: 0.30s; }
h1 .link span:nth-child(7)  { transition-delay: 0.35s; }
h1 .link span:nth-child(8)  { transition-delay: 0.40s; }
h1 .link span:nth-child(9)  { transition-delay: 0.45s; }
h1 .link span:nth-child(10) { transition-delay: 0.50s; }
h1 .link span:nth-child(11) { transition-delay: 0.55s; }

h1 .link:hover {
    --m: calc(145px * -1);
    --line-d: 0.84s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}

h1 .link:hover div:last-child svg {
    stroke-dashoffset: 63.5px;
    transform: translateX(65.66%) translateZ(0);
}
@media (max-width: 1740px) {
    h1 .link:hover {
    --m: calc(110px * -1);
    --line-d: 0.14s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}
h1 .link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 100px 0 #0A0A0A;
}

}
@media (max-width: 1300px) {
        h1 .link:hover {
    --m: calc(64px * -1);
    --line-d: 0.84s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}
h1 .link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 60px 0 #0A0A0A;
}
}

.col-title.link {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: inherit;
    width: fit-content;
}

.col-title.link div {
    overflow: hidden;
}

.col-title.link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 140px 0 #0A0A0A;
}

.col-title.link div:last-child {
    position: absolute;
    pointer-events: none;
    right: 0;
    left: 0;
    bottom: -3px;
    height: 5px;
}

.col-title.link div:last-child svg {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 300%;
    height: 4px;
    fill: none;
    stroke: #23BD87;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 63.5px 128px;
    stroke-dashoffset: 190.25px;
    transform: translateX(0) translateZ(0);
    transition: transform 0s, stroke-dashoffset 0s;
}

.col-title.link div:last-child svg {
    transition: transform var(--line-d, 0s), stroke-dashoffset var(--line-d, 0s);
}

.col-title.link span {
    display: block;
    backface-visibility: hidden;
    font-style: normal;
    transition: transform 0.84s ease;
    transform: translateY(var(--m, 0));
}

.col-title.link span:nth-child(1)  { transition-delay: 0.05s; }
.col-title.link span:nth-child(2)  { transition-delay: 0.10s; }
.col-title.link span:nth-child(3)  { transition-delay: 0.15s; }
.col-title.link span:nth-child(4)  { transition-delay: 0.20s; }
.col-title.link span:nth-child(5)  { transition-delay: 0.25s; }
.col-title.link span:nth-child(6)  { transition-delay: 0.30s; }
.col-title.link span:nth-child(7)  { transition-delay: 0.35s; }
.col-title.link span:nth-child(8)  { transition-delay: 0.40s; }
.col-title.link span:nth-child(9)  { transition-delay: 0.45s; }
.col-title.link span:nth-child(10) { transition-delay: 0.50s; }
.col-title.link span:nth-child(11) { transition-delay: 0.55s; }
.col-title.link span:nth-child(12) { transition-delay: 0.60s; }
.col-title.link span:nth-child(13) { transition-delay: 0.65s; }
.col-title.link span:nth-child(14) { transition-delay: 0.70s; }
.col-title.link span:nth-child(15) { transition-delay: 0.75s; }
.col-title.link span:nth-child(16) { transition-delay: 0.80s; }
.col-title.link span:nth-child(17) { transition-delay: 0.85s; }
.col-title.link span:nth-child(18) { transition-delay: 0.90s; }
.col-title.link span:nth-child(19) { transition-delay: 0.95s; }
.col-title.link span:nth-child(20) { transition-delay: 1s; }

.col-title.link:hover {
    --m: calc(145px * -1);
    --line-d: 0.84s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}

.col-title.link:hover div:last-child svg {
    stroke-dashoffset: 63.5px;
    transform: translateX(65.66%) translateZ(0);
}
@media (max-width: 1740px) {
    .col-title.link:hover {
    --m: calc(110px * -1);
    --line-d: 0.14s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}
.col-title.link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 100px 0 #0A0A0A;
}

}
@media (max-width: 1300px) {
.col-title.link:hover {
    --m: calc(64px * -1);
    --line-d: 0.84s;
    --line-x: 65.66%;
    --line-offset: 63.5px;
}
.col-title.link div:first-child {
    display: flex;
    overflow: hidden;
    text-shadow: 0 60px 0 #0A0A0A;
}
}