Gradient Border Card

<!-- Gradient Border Card — animated gradient border -->
<div class="nuda-gradient-border-card">
  <div class="nuda-gradient-border-card__inner">
    <h3 class="nuda-gradient-border-card__title">Gradient Border</h3>
    <p class="nuda-gradient-border-card__desc">Animated conic gradient border</p>
  </div>
</div>

/* ── Gradient Border Card ────────────────────────────────────
   Uses @property for animatable conic-gradient rotation.
   Falls back to a static gradient in unsupported browsers.
   Customize:
     --nuda-gbc-card-bg  : inner card background
     --nuda-gbc-clr      : text color
     --nuda-gbc-border   : border width
     --nuda-gbc-radius   : corner radius
     --nuda-gbc-speed    : rotation speed
   ──────────────────────────────────────────────────────────── */

/* Registered custom property — enables animation */
@property --nuda-gbc-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.nuda-gradient-border-card {
  --nuda-gbc-card-bg: #0f0f23;
  --nuda-gbc-clr: #e0e7ff;
  --nuda-gbc-border: 2px;
  --nuda-gbc-radius: 16px;
  --nuda-gbc-speed: 3s;
  --nuda-gbc-angle: 0deg;

  width: 280px;
  padding: var(--nuda-gbc-border);
  border-radius: var(--nuda-gbc-radius);
  background: conic-gradient(
    from var(--nuda-gbc-angle),
    #6366f1,
    #ec4899,
    #f59e0b,
    #10b981,
    #6366f1
  );
  animation: nuda-gradient-border-spin var(--nuda-gbc-speed) linear infinite;
}

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

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

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

@keyframes nuda-gradient-border-spin {
  to { --nuda-gbc-angle: 360deg; }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-gradient-border-card {
    animation: none;
  }
}