/* The arrow passes through its own slot. Its label and hit area stay still. */
@media (prefers-reduced-motion: no-preference) {
  .hero-actions .button::after,
  .hero-actions .text-action > [aria-hidden="true"],
  .about-full-link > [aria-hidden="true"],
  .home-case-link .case-detail-button > [aria-hidden="true"],
  .case-return-action > [aria-hidden="true"] {
    display: inline-block;
    --arrow-step: .65em;
    --arrow-out: inset(-25% 100% -25% 0);
    --arrow-in: inset(-25% 0 -25% 100%);
    animation: var(--action-arrow-animation, none) 320ms cubic-bezier(.35, 0, .25, 1);
  }

  .case-return-action > [aria-hidden="true"] {
    --arrow-step: -.65em;
    --arrow-out: inset(-25% 0 -25% 100%);
    --arrow-in: inset(-25% 100% -25% 0);
  }

  :is(.hero-actions a, .about-full-link, .home-case-link, .case-return-action):is(:focus-visible, :active) {
    --action-arrow-animation: action-arrow-pass;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.hero-actions a, .about-full-link, .home-case-link, .case-return-action):hover {
      --action-arrow-animation: action-arrow-pass;
    }
  }
}

@keyframes action-arrow-pass {
  0%, 100% {
    transform: translateX(0);
    clip-path: inset(-25% 0);
  }
  47% {
    transform: translateX(var(--arrow-step));
    clip-path: var(--arrow-out);
  }
  48% {
    transform: translateX(calc(-1 * var(--arrow-step)));
    clip-path: var(--arrow-in);
  }
}