/* Reusable text link: letters trade places with the arrow while the rule wipes through. */
.animated-arrow-link { --animated-link-arrow-size:1.5em; --animated-link-gap:1em; --animated-link-shift:calc(var(--animated-link-arrow-size) + var(--animated-link-gap)); --animated-link-arrow-reveal-delay:.85s; display:flex; flex-direction:column; width:max-content; color:currentColor; text-decoration:none; font-weight:400; }
.animated-arrow-link__content { position:relative; display:block; padding-right:var(--animated-link-shift); white-space:nowrap; line-height:1.5; }
.animated-arrow-link__label { display:inline-block; }
.animated-arrow-link__letter { display:inline-block; white-space:pre; transition:transform .55s cubic-bezier(.65,0,.25,1); transition-delay:var(--animated-link-exit-delay); }
.animated-arrow-link.is-active .animated-arrow-link__letter { transform:translateX(var(--animated-link-shift)); transition-delay:var(--animated-link-enter-delay); }
.animated-arrow-link__arrow { position:absolute; top:50%; width:var(--animated-link-arrow-size); height:var(--animated-link-arrow-size); transition:transform .25s ease, opacity .25s ease; }
.animated-arrow-link__arrow--right { right:0; transform:translateY(-50%); transition-delay:var(--animated-link-arrow-reveal-delay); }
.animated-arrow-link__arrow--left { left:0; opacity:0; transform:translate(-.75em,-50%); transition-duration:.12s; transition-delay:0s; }
.animated-arrow-link.is-active .animated-arrow-link__arrow--right { opacity:0; transform:translate(.75em,-50%); transition-duration:.12s; transition-delay:0s; }
.animated-arrow-link.is-active .animated-arrow-link__arrow--left { opacity:1; transform:translate(0,-50%); transition-duration:.25s; transition-delay:var(--animated-link-arrow-reveal-delay); }
.animated-arrow-link__line { display:block; height:1px; overflow:hidden; }
.animated-arrow-link__line::before { content:""; display:block; width:100%; height:100%; background:currentColor; }
.animated-arrow-link.is-active .animated-arrow-link__line::before { animation:animated-arrow-link-enter 1s cubic-bezier(.65,0,.25,1) both; }
.animated-arrow-link.is-leaving .animated-arrow-link__line::before { animation:animated-arrow-link-leave 1s cubic-bezier(.65,0,.25,1) both; }
.animated-arrow-link--back .animated-arrow-link__content { padding-right:0; padding-left:var(--animated-link-shift); }
.animated-arrow-link--back .animated-arrow-link__letter { transition-delay:var(--animated-link-enter-delay); }
.animated-arrow-link--back.is-active .animated-arrow-link__letter { transform:translateX(calc(-1 * var(--animated-link-shift))); transition-delay:var(--animated-link-exit-delay); }
.animated-arrow-link--back .animated-arrow-link__arrow--left { opacity:1; transform:translateY(-50%); transition-duration:.25s; transition-delay:var(--animated-link-arrow-reveal-delay); }
.animated-arrow-link--back .animated-arrow-link__arrow--right { opacity:0; transform:translate(.75em,-50%); transition-duration:.12s; transition-delay:0s; }
.animated-arrow-link--back.is-active .animated-arrow-link__arrow--left { opacity:0; transform:translate(-.75em,-50%); transition-duration:.12s; transition-delay:0s; }
.animated-arrow-link--back.is-active .animated-arrow-link__arrow--right { opacity:1; transform:translateY(-50%); transition-duration:.25s; transition-delay:var(--animated-link-arrow-reveal-delay); }
.animated-arrow-link--back.is-active .animated-arrow-link__line::before { animation:animated-arrow-link-leave 1s cubic-bezier(.65,0,.25,1) both; }
.animated-arrow-link--back.is-leaving .animated-arrow-link__line::before { animation:animated-arrow-link-enter 1s cubic-bezier(.65,0,.25,1) both; }
.animated-arrow-link:focus-visible { outline:1px solid currentColor; outline-offset:6px; }
@keyframes animated-arrow-link-enter { 0% { transform:translateX(0); } 49% { transform:translateX(105%); } 50% { transform:translateX(-105%); } 100% { transform:translateX(0); } }
@keyframes animated-arrow-link-leave { 0% { transform:translateX(0); } 49% { transform:translateX(-105%); } 50% { transform:translateX(105%); } 100% { transform:translateX(0); } }
@media (max-width:800px) { .animated-arrow-link { --animated-link-gap:.6666667em; } }
@media (prefers-reduced-motion:reduce) { .animated-arrow-link__letter, .animated-arrow-link__arrow { transition:none; } .animated-arrow-link__line::before { animation:none !important; } }
