/* ===============================
   Magic Gradient Border Button
================================= */
.magic-border-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50px;
  padding: 2px;
  font-weight: 600;
  text-decoration: none;
  color: white;
  transition: transform 0.3s ease;
  background-color: transparent;
}

.magic-border-btn span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 1rem;
  background-color: #0f172a;
  border-radius: 50px;
  z-index: 1;
  transition: background-color 0.3s ease;
}

/* Small Button */
.magic-border-btn.btn-sm span {
  padding: 6px 16px;
  font-size: 0.85rem;
}

/* Large Button */
.magic-border-btn.btn-lg span {
  padding: 14px 32px;
  font-size: 1.15rem;
}

.magic-border-btn::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: conic-gradient(from 0deg, var(--start), var(--middle), var(--start));
  z-index: 0;
  filter: blur(8px);
  opacity: 0.8;
  animation: glowRotate 4s linear infinite;
  border-radius: inherit;
}

/* Stop animation on hover */
.magic-border-btn:hover::before {
  animation-play-state: paused;
  
}

.magic-border-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  
}

/* Gradient Color Variants */
.purple-blue {
  --start: #6a11cb;
  --middle: #2575fc;
}

.cyan-blue {
  --start: #00c9ff;
  --middle: #005bea;
}

.purple-pink {
  --start: #8e2de2;
  --middle: #ff6a00;
}

.teal-green {
  --start: #11998e;
  --middle: #38ef7d;
}

.red-yellow {
  --start: #f83600;
  --middle: #f9d423;
}
@keyframes glowRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Border Animation */
@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Icon Animation */
.magic-icon {
  margin-right: 8px;
  animation: bounceIcon 1.5s infinite alternate ease-in-out;
}

@keyframes bounceIcon {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}
/* ===============================
   Rounding Utilities Support
================================= */

/* Default (rounded-lg) */
.magic-border-btn,
.magic-border-btn span {
  border-radius: 50px;
}

/* Small Rounding */
.magic-border-btn.rounded-sm,
.magic-border-btn.rounded-sm span {
  border-radius: 6px;
}

/* Medium Rounding */
.magic-border-btn.rounded-md,
.magic-border-btn.rounded-md span {
  border-radius: 16px;
}

/* Large Rounding */
.magic-border-btn.rounded-lg,
.magic-border-btn.rounded-lg span {
  border-radius: 50px;
}