/* Register an animatable custom property for the gradient's angle */
@property --spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Base button */
.btn.btn-primary.btn-sm.glow-button {
	position: relative;
	background: #121212;
	border-radius: 50px;
	padding: 6px 28px;
	z-index: 1;
	font-size: 30px;
	letter-spacing: -0.4pt;
    margin-bottom: 30px;
}



/* Animated gradient border only */
.btn.btn-primary.btn-sm.glow-button::before {
  content: "";
  position: absolute;
  inset: -2px;                   /* thickness of the border area */
  border-radius: 50px;
  padding: 2px;                  /* matches the visual border width */
  /* The gradient itself spins by changing its "from" angle variable */
  background: conic-gradient(
    from var(--spin-angle),
    #ff0033, /* red */
    /*#ff7300,  orange */
    /*#fffb00,  yellow */
    /*#48ff00,  green */
    /*#00ffd5,  cyan */
    #0066ff, /* blue */
    #7a00ff, /* purple */
    #ff0033 /* red */

  );
  /* Punch out the center so only the ring shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* Animate only the gradient angle, not the element, so the border stays put */
  animation: borderHueSpin 3s linear infinite;
  pointer-events: none;          /* keep clicks on the button */
}

/* Keyframes update the custom property for the gradient angle */
@keyframes borderHueSpin {
  to { --spin-angle: 360deg; }
}