Border Glow

<!-- Border Glow — card with animated border glow on hover -->
<div class="nuda-border-glow">
  <div class="nuda-border-glow__inner">
    <h3 class="nuda-border-glow__title">Border Glow</h3>
    <p class="nuda-border-glow__desc">Animated gradient border</p>
  </div>
</div>

/* ── Border Glow ─────────────────────────────────────────────
   Outer wrapper = animated gradient, inner = card body.
   Customize:
     --nuda-bg-gradient  : border gradient
     --nuda-bg-card-bg   : inner card background
     --nuda-bg-clr       : text color
     --nuda-bg-border    : border width (padding on outer)
     --nuda-bg-radius    : corner radius
     --nuda-bg-speed     : animation cycle
   ──────────────────────────────────────────────────────────── */
.nuda-border-glow {
  --nuda-bg-gradient: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  --nuda-bg-card-bg: #0f0f23;
  --nuda-bg-clr: #e0e7ff;
  --nuda-bg-border: 2px;
  --nuda-bg-radius: 16px;
  --nuda-bg-speed: 4s;

  width: 280px;
  padding: var(--nuda-bg-border);
  border-radius: var(--nuda-bg-radius);
  background: var(--nuda-bg-gradient);
  background-size: 300% 300%;
  animation: nuda-border-glow-shift var(--nuda-bg-speed) ease infinite;
}

.nuda-border-glow__inner {
  padding: 28px 20px;
  background: var(--nuda-bg-card-bg);
  border-radius: calc(var(--nuda-bg-radius) - var(--nuda-bg-border));
  color: var(--nuda-bg-clr);
  text-align: center;
}

.nuda-border-glow__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.nuda-border-glow__desc {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 6px 0 0;
}

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

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