/**
 * A brief signal glitch on homepage actions. Original text is never clipped;
 * only the decorative arrow slices. No looping or additional markup.
 */
@keyframes kreatif-cta-signal {
  0%, 12%, 72%, 100% { text-shadow: none; }
  24% { text-shadow: 2px 0 var(--color-accent), -1px 0 rgba(255, 255, 255, .35); }
  46% { text-shadow: -1px 0 var(--color-accent); }
  60% { text-shadow: 1px 0 rgba(255, 255, 255, .35); }
}

@keyframes kreatif-cta-rule {
  0%, 12%, 76%, 100% { box-shadow: none; }
  26% { box-shadow: inset 0 -2px 0 var(--color-accent); }
  48% { box-shadow: inset 0 1px 0 transparent; }
  62% { box-shadow: inset 0 -1px 0 var(--color-accent); }
}

@keyframes kreatif-cta-arrow-slice {
  0% { clip-path: inset(0); transform: translateX(0); }
  18% { clip-path: inset(12% 0 52%); transform: translateX(-2px); }
  36% { clip-path: inset(48% 0 10%); transform: translateX(5px); }
  54% { clip-path: inset(24% 0 26%); transform: translateX(-1px); }
  72%, 100% { clip-path: inset(0); transform: translateX(4px); }
}

/* Keyboard works independently of hover support; touch does not latch a loop. */
@media (prefers-reduced-motion: no-preference) {
  .home .home-hero .button:focus-visible {
    animation: kreatif-cta-signal 480ms steps(1, end) 1,
      kreatif-cta-rule 480ms steps(1, end) 1;
  }

  .home .brxe-prjlnk:focus-visible {
    animation: kreatif-cta-signal 480ms steps(1, end) 1;
  }

  .home .home-hero .button:focus-visible::after,
  .home .brxe-prjlnk:focus-visible::after {
    animation: kreatif-cta-arrow-slice 480ms steps(1, end) 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home .home-hero .button:hover {
    animation: kreatif-cta-signal 480ms steps(1, end) 1,
      kreatif-cta-rule 480ms steps(1, end) 1;
  }

  .home .brxe-prjlnk:hover {
    animation: kreatif-cta-signal 480ms steps(1, end) 1;
  }

  .home .home-hero .button:hover::after,
  .home .brxe-prjlnk:hover::after {
    animation: kreatif-cta-arrow-slice 480ms steps(1, end) 1;
  }
}