Ghost Outline

<!-- Ghost Outline — ghost button with animated border gradient -->
<button class="nuda-ghost-outline">Ghost Outline</button>

/* ── Ghost Outline ───────────────────────────────────────────
   Animated gradient border using mask-composite trick.
   Customize:
     --nuda-go-gradient : border gradient colors
     --nuda-go-clr      : text color
     --nuda-go-radius   : corner radius
     --nuda-go-border   : border thickness
     --nuda-go-speed    : animation cycle
   ──────────────────────────────────────────────────────────── */
.nuda-ghost-outline {
  --nuda-go-gradient: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  --nuda-go-clr: #c4b5fd;
  --nuda-go-radius: 8px;
  --nuda-go-border: 2px;
  --nuda-go-speed: 4s;

  position: relative;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-go-clr);
  background: transparent;
  border: none;
  border-radius: var(--nuda-go-radius);
  cursor: pointer;
}

/* Animated gradient border via pseudo-element */
.nuda-ghost-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--nuda-go-radius);
  padding: var(--nuda-go-border);
  background: var(--nuda-go-gradient);
  background-size: 300% 300%;
  /* Mask trick: show only the border area */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nuda-ghost-border var(--nuda-go-speed) ease infinite;
  pointer-events: none;
}

@keyframes nuda-ghost-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-ghost-outline::before {
    animation: none;
    background-size: 100% 100%;
  }
}