.calio-animated-link-wrap {
    display: block;
}

.calio-animated-link {
    --calio-animated-link-accent: currentColor;
    --calio-animated-link-line: 1px;
    --calio-animated-link-offset: 0px;
    --calio-animated-link-speed: 300ms;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #222831;
    font-size: 18px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

.calio-animated-link::before,
.calio-animated-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + var(--calio-animated-link-offset));
    inline-size: 100%;
    block-size: var(--calio-animated-link-line);
    background-color: var(--calio-animated-link-accent);
    pointer-events: none;
}

.calio-animated-link span {
    position: relative;
    display: inline-block;
}

.calio-animated-link:hover,
.calio-animated-link:focus-visible {
    color: #111827;
}

.calio-animated-link--signal-line::before {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed) ease;
}

.calio-animated-link--signal-line:hover::before,
.calio-animated-link--signal-line:focus-visible::before {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--twin-stream::before {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.7, 0, .2, 1);
}

.calio-animated-link--twin-stream::after {
    inset-block-start: calc(100% + var(--calio-animated-link-offset) + 5px);
    transform: scale3d(0, 1, 1);
    transform-origin: 0% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.7, 0, .2, 1);
}

.calio-animated-link--twin-stream:hover::before,
.calio-animated-link--twin-stream:focus-visible::before {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--twin-stream:hover::after,
.calio-animated-link--twin-stream:focus-visible::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 100% 50%;
}

.calio-animated-link--echo-stack::before,
.calio-animated-link--echo-stack::after {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.2, 1, .8, 1);
}

.calio-animated-link--echo-stack::after {
    inset-block-start: calc(100% + var(--calio-animated-link-offset) + 5px);
    transition-delay: 90ms;
}

.calio-animated-link--echo-stack:hover::before,
.calio-animated-link--echo-stack:focus-visible::before {
    transform: scale3d(1, 2, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--echo-stack:hover::after,
.calio-animated-link--echo-stack:focus-visible::after {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--mirror-loop {
    overflow: hidden;
    line-height: 2;
}

.calio-animated-link--mirror-loop::before {
    inset-block-start: calc(100% + var(--calio-animated-link-offset) - 5px);
    block-size: max(2px, var(--calio-animated-link-line));
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.5, .5, .3, 1);
}

.calio-animated-link--mirror-loop::after {
    content: attr(data-text);
    inset-block-start: 0;
    block-size: 100%;
    background: none;
    transform: translate3d(150%, 0, 0);
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.5, .5, .3, 1);
}

.calio-animated-link--mirror-loop span {
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.5, .5, .3, 1);
}

.calio-animated-link--mirror-loop:hover::before,
.calio-animated-link--mirror-loop:focus-visible::before {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--mirror-loop:hover::after,
.calio-animated-link--mirror-loop:focus-visible::after {
    transform: translate3d(0, 0, 0);
}

.calio-animated-link--mirror-loop:hover span,
.calio-animated-link--mirror-loop:focus-visible span {
    transform: translate3d(-150%, 0, 0);
}

.calio-animated-link--axis-pulse {
    padding-inline: 10px;
    letter-spacing: .03em;
}

.calio-animated-link--axis-pulse::before {
    inset-block-start: 50%;
    block-size: max(2px, var(--calio-animated-link-line));
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.4, 1, .8, 1);
}

.calio-animated-link--axis-pulse span {
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.4, 1, .8, 1);
}

.calio-animated-link--axis-pulse:hover::before,
.calio-animated-link--axis-pulse:focus-visible::before {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 50%;
}

.calio-animated-link--axis-pulse:hover span,
.calio-animated-link--axis-pulse:focus-visible span {
    transform: scale3d(1.08, 1.08, 1);
}

.calio-animated-link--split-beam::before {
    transform-origin: 50% 100%;
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0);
    transition: clip-path var(--calio-animated-link-speed), transform var(--calio-animated-link-speed) cubic-bezier(.2, 1, .8, 1);
}

.calio-animated-link--split-beam span {
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.2, 1, .8, 1);
}

.calio-animated-link--split-beam:hover::before,
.calio-animated-link--split-beam:focus-visible::before {
    transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
    clip-path: polygon(0 0, 0 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0);
}

.calio-animated-link--split-beam:hover span,
.calio-animated-link--split-beam:focus-visible span {
    transform: translate3d(0, -2px, 0);
}

.calio-animated-link--soft-rise::before,
.calio-animated-link--soft-rise::after {
    opacity: 0;
    transform: translate3d(0, 3px, 0);
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.2, 1, .8, 1), opacity var(--calio-animated-link-speed) cubic-bezier(.2, 1, .8, 1);
}

.calio-animated-link--soft-rise::after {
    inset-inline-start: 15%;
    inset-block-start: calc(100% + var(--calio-animated-link-offset) + 5px);
    inline-size: 70%;
}

.calio-animated-link--soft-rise:hover::before,
.calio-animated-link--soft-rise:hover::after,
.calio-animated-link--soft-rise:focus-visible::before,
.calio-animated-link--soft-rise:focus-visible::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.calio-animated-link--marker-lift::before {
    block-size: max(8px, var(--calio-animated-link-line));
    opacity: 0;
}

.calio-animated-link--marker-lift::after {
    opacity: 0;
    transition: opacity var(--calio-animated-link-speed);
}

.calio-animated-link--marker-lift:hover::before,
.calio-animated-link--marker-lift:focus-visible::before {
    opacity: 1;
    animation: calioAnimatedLinkLineUp var(--calio-animated-link-speed) ease forwards;
}

.calio-animated-link--marker-lift:hover::after,
.calio-animated-link--marker-lift:focus-visible::after {
    opacity: 1;
    transition-delay: var(--calio-animated-link-speed);
}

.calio-animated-link--counter-current::before {
    transform: scale3d(0, 1, 1);
    transform-origin: 0% 50%;
    transition: transform var(--calio-animated-link-speed);
}

.calio-animated-link--counter-current::after {
    inset-block-start: calc(100% + var(--calio-animated-link-offset) + 5px);
    transform-origin: 100% 50%;
    transition: transform var(--calio-animated-link-speed);
}

.calio-animated-link--counter-current:hover::before,
.calio-animated-link--counter-current:focus-visible::before {
    transform: scale3d(1, 1, 1);
}

.calio-animated-link--counter-current:hover::after,
.calio-animated-link--counter-current:focus-visible::after {
    transform: scale3d(0, 1, 1);
}

.calio-animated-link--glitch-spark:hover span,
.calio-animated-link--glitch-spark:focus-visible span {
    animation: calioAnimatedLinkGlitchText 420ms linear;
}

.calio-animated-link--glitch-spark::before {
    block-size: max(2px, var(--calio-animated-link-line));
    opacity: 0;
}

.calio-animated-link--glitch-spark:hover::before,
.calio-animated-link--glitch-spark:focus-visible::before {
    opacity: 1;
    animation: calioAnimatedLinkGlitchLine 420ms steps(2, start) forwards;
}

.calio-animated-link--cover-flash::before {
    inset-block-start: 0;
    block-size: 100%;
    opacity: 0;
}

.calio-animated-link--cover-flash::after {
    transition: opacity var(--calio-animated-link-speed);
}

.calio-animated-link--cover-flash:hover::before,
.calio-animated-link--cover-flash:focus-visible::before {
    opacity: 1;
    animation: calioAnimatedLinkCoverUp var(--calio-animated-link-speed) ease forwards;
}

.calio-animated-link--cover-flash:hover::after,
.calio-animated-link--cover-flash:focus-visible::after {
    opacity: 0;
}

.calio-animated-link--twin-streamcaste {
    overflow: hidden;
    padding-block: 7px;
}

.calio-animated-link--twin-streamcaste::before,
.calio-animated-link--twin-streamcaste::after,
.calio-animated-link--orbit-arc::before,
.calio-animated-link--orbit-arc::after,
.calio-animated-link--sketch-trail::before,
.calio-animated-link--sketch-trail::after {
    display: none;
}

.calio-animated-link__graphic {
    position: absolute;
    pointer-events: none;
    fill: none;
    stroke: var(--calio-animated-link-accent);
    stroke-width: max(1px, var(--calio-animated-link-line));
}

.calio-animated-link__graphic * {
    fill: none !important;
}

.calio-animated-link__graphic path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.calio-animated-link--twin-streamcaste .calio-animated-link__graphic--slide {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 300%;
    block-size: 100%;
    stroke-width: max(2px, var(--calio-animated-link-line));
    transform: translate3d(0, 0, 0);
    transition: transform 700ms cubic-bezier(0, .25, .5, 1);
}

.calio-animated-link--twin-streamcaste .calio-animated-link__graphic--slide path {
    stroke-dashoffset: 0;
}

.calio-animated-link--twin-streamcaste:hover .calio-animated-link__graphic--slide,
.calio-animated-link--twin-streamcaste:focus-visible .calio-animated-link__graphic--slide {
    transform: translate3d(-66.66%, 0, 0);
}

.calio-animated-link--orbit-arc .calio-animated-link__graphic--arc {
    inset-block-start: 72%;
    inset-inline-start: -22%;
}

.calio-animated-link--sketch-trail .calio-animated-link__graphic--scribble {
    inset-block-start: 100%;
    inset-inline-start: 0;
}

.calio-animated-link--orbit-arc:hover .calio-animated-link__graphic path,
.calio-animated-link--orbit-arc:focus-visible .calio-animated-link__graphic path,
.calio-animated-link--sketch-trail:hover .calio-animated-link__graphic path,
.calio-animated-link--sketch-trail:focus-visible .calio-animated-link__graphic path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--calio-animated-link-speed) cubic-bezier(.8, 1, .7, 1);
}

.calio-animated-link--elastic-pop::before {
    block-size: max(7px, var(--calio-animated-link-line));
    border-radius: 999px;
    transform: scale3d(1, 1, 1);
    transition: transform 220ms, opacity 220ms;
    transition-timing-function: cubic-bezier(.2, .57, .67, 1.53);
}

.calio-animated-link--elastic-pop span {
    transform: translate3d(0, -4px, 0);
    transition: transform 220ms 50ms cubic-bezier(.2, .57, .67, 1.53);
}

.calio-animated-link--elastic-pop:hover::before,
.calio-animated-link--elastic-pop:focus-visible::before {
    transform: scale3d(1.2, .1, 1);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.8, 0, .1, 1);
}

.calio-animated-link--elastic-pop:hover span,
.calio-animated-link--elastic-pop:focus-visible span {
    transform: translate3d(0, 0, 0);
    transition-delay: 0ms;
}

.calio-animated-link--prism-scan {
    --calio-animated-link-prism: linear-gradient(90deg, #2563eb, #14b8a6, #f59e0b, #ef4444, #2563eb);
    background-image: var(--calio-animated-link-prism);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.calio-animated-link--prism-scan::before {
    block-size: max(2px, var(--calio-animated-link-line));
    background: var(--calio-animated-link-prism);
    background-size: 240% 100%;
    transform: scale3d(.16, 1, 1);
    transform-origin: 0% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.19, 1, .22, 1), background-position var(--calio-animated-link-speed) ease;
}

.calio-animated-link--prism-scan:hover,
.calio-animated-link--prism-scan:focus-visible {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-position: 100% 50%;
}

.calio-animated-link--prism-scan:hover::before,
.calio-animated-link--prism-scan:focus-visible::before {
    transform: scale3d(1, 1, 1);
    background-position: 100% 50%;
}

.calio-animated-link--corner-frame {
    padding: .25em .4em;
}

.calio-animated-link--corner-frame::before,
.calio-animated-link--corner-frame::after {
    inset-block-start: 0;
    inline-size: 10px;
    block-size: 10px;
    background: transparent;
    border-color: var(--calio-animated-link-accent);
    border-style: solid;
    opacity: .45;
    transition: inline-size var(--calio-animated-link-speed) cubic-bezier(.19, 1, .22, 1), block-size var(--calio-animated-link-speed) cubic-bezier(.19, 1, .22, 1), opacity var(--calio-animated-link-speed);
}

.calio-animated-link--corner-frame::before {
    border-width: var(--calio-animated-link-line) 0 0 var(--calio-animated-link-line);
}

.calio-animated-link--corner-frame::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    border-width: 0 var(--calio-animated-link-line) var(--calio-animated-link-line) 0;
}

.calio-animated-link--corner-frame:hover::before,
.calio-animated-link--corner-frame:hover::after,
.calio-animated-link--corner-frame:focus-visible::before,
.calio-animated-link--corner-frame:focus-visible::after {
    inline-size: 100%;
    block-size: 100%;
    opacity: 1;
}

.calio-animated-link--magnetic-dot::before {
    inset-block-start: calc(100% + var(--calio-animated-link-offset) + 5px);
    inline-size: .42em;
    block-size: .42em;
    border-radius: 999px;
    transform: translate3d(0, 0, 0);
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.34, 1.56, .64, 1), inline-size var(--calio-animated-link-speed);
}

.calio-animated-link--magnetic-dot::after {
    display: none;
}

.calio-animated-link--magnetic-dot:hover::before,
.calio-animated-link--magnetic-dot:focus-visible::before {
    inline-size: 100%;
    transform: translate3d(0, -3px, 0);
}

.calio-animated-link--bracket-shift {
    padding-inline: .5em;
}

.calio-animated-link--bracket-shift::before,
.calio-animated-link--bracket-shift::after {
    inset-block-start: 50%;
    inline-size: auto;
    block-size: auto;
    background: none;
    color: var(--calio-animated-link-accent);
    font-weight: 700;
    opacity: 0;
    transform: translate3d(0, -50%, 0);
    transition: opacity var(--calio-animated-link-speed), transform var(--calio-animated-link-speed) cubic-bezier(.19, 1, .22, 1);
}

.calio-animated-link--bracket-shift::before {
    content: "[";
    inset-inline-start: 0;
    transform: translate3d(-.65em, -50%, 0);
}

.calio-animated-link--bracket-shift::after {
    content: "]";
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translate3d(.65em, -50%, 0);
}

.calio-animated-link--bracket-shift:hover::before,
.calio-animated-link--bracket-shift:hover::after,
.calio-animated-link--bracket-shift:focus-visible::before,
.calio-animated-link--bracket-shift:focus-visible::after {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}

.calio-animated-link--halo-sweep {
    padding: .24em .46em;
    border-radius: 999px;
    overflow: hidden;
}

.calio-animated-link--halo-sweep::before {
    inset-block-start: 0;
    block-size: 100%;
    border-radius: inherit;
    opacity: .14;
    transform: translate3d(-105%, 0, 0);
    transition: transform calc(var(--calio-animated-link-speed) * 1.25) cubic-bezier(.19, 1, .22, 1), opacity var(--calio-animated-link-speed);
}

.calio-animated-link--halo-sweep::after {
    inset-block-start: auto;
    inset-block-end: .18em;
    inline-size: calc(100% - .92em);
    inset-inline-start: .46em;
    transform: scale3d(0, 1, 1);
    transform-origin: 0% 50%;
    transition: transform var(--calio-animated-link-speed) cubic-bezier(.19, 1, .22, 1);
}

.calio-animated-link--halo-sweep:hover::before,
.calio-animated-link--halo-sweep:focus-visible::before {
    opacity: .22;
    transform: translate3d(0, 0, 0);
}

.calio-animated-link--halo-sweep:hover::after,
.calio-animated-link--halo-sweep:focus-visible::after {
    transform: scale3d(1, 1, 1);
}

@keyframes calioAnimatedLinkLineUp {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, .045, 1);
    }
    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }
    51% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, .045, 1);
    }
}

@keyframes calioAnimatedLinkCoverUp {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, .045, 1);
    }
    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }
    51% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, .045, 1);
    }
}

@keyframes calioAnimatedLinkGlitchText {
    0% {
        opacity: 1;
        transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
        clip-path: polygon(0 20%, 100% 20%, 100% 24%, 0 24%);
    }
    35% {
        clip-path: polygon(0 46%, 100% 46%, 100% 56%, 0 56%);
    }
    65% {
        clip-path: polygon(0 70%, 100% 70%, 100% 82%, 0 82%);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes calioAnimatedLinkGlitchLine {
    0% {
        transform: scale3d(1, 1, 1);
    }
    20% {
        transform: translate3d(10px, 4px, 0);
    }
    40% {
        transform: scale3d(.1, 1.4, 1) translate3d(0, -22px, 0);
        transform-origin: 100% 0%;
    }
    65% {
        transform: scale3d(1, .35, 1) translate3d(-80px, -20px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calio-animated-link,
    .calio-animated-link *,
    .calio-animated-link::before,
    .calio-animated-link::after {
        animation: none !important;
        transition-duration: 1ms !important;
    }
}
