Rotating Gradient Border

<!-- Rotating Gradient Border — conic border rotates -->
<div class="nuda-bgr-card">
  <div class="nuda-bgr-card__inner">
    <h3 class="nuda-bgr-card__title">Rotating Border</h3>
    <p class="nuda-bgr-card__desc">Conic gradient spins</p>
  </div>
</div>

/* ── Rotating Gradient Border ────────────────────────────────
   Uses @property to animate a conic-gradient angle.
   Falls back to a static gradient where @property is unsupported.
   Customize:
     --nuda-bgr-bg     : inner card background
     --nuda-bgr-speed  : rotation speed
   ──────────────────────────────────────────────────────────── */
@property --nuda-bgr-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.nuda-bgr-card {
  --nuda-bgr-angle: 0deg;
  --nuda-bgr-bg: #09090b;
  --nuda-bgr-speed: 4s;

  width: 280px;
  padding: 2px;
  border-radius: 16px;
  background: conic-gradient(
    from var(--nuda-bgr-angle),
    #e4ff54,
    #a3b800,
    #09090b,
    #e4ff54
  );
  animation: nuda-bgr-spin var(--nuda-bgr-speed) linear infinite;
}

.nuda-bgr-card__inner {
  padding: 28px 20px;
  background: var(--nuda-bgr-bg);
  border-radius: 14px;
  color: #fafafa;
  text-align: center;
}

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

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

@keyframes nuda-bgr-spin {
  to { --nuda-bgr-angle: 360deg; }
}

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