/* ═══════════════════════════════════════════════════════════════
   STAR BORDER — Vanilla CSS Port
   Original: @react-bits/StarBorder
   ─────────────────────────────────────────────────────────────
   Usage:
     <a class="star-border" href="#">Label</a>
     <button class="star-border star-border--cyan">Click</button>
     <button class="star-border star-border--pink">Click</button>
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
.star-border {
  --sb-color:     #7B2FFF;   /* star/glow color  */
  --sb-speed:     6s;        /* animation speed  */
  --sb-thickness: 1px;       /* border thickness */
  --sb-radius:    var(--radius-pill, 50px);
  --sb-bg:        #000;
  --sb-border:    #222;
}

/* ── Colour Presets ── */
.star-border--purple   { --sb-color: #7B2FFF; }
.star-border--pink     { --sb-color: #E040FB; }
.star-border--cyan     { --sb-color: #00D4FF; }
.star-border--magenta  { --sb-color: magenta;  }
.star-border--white    { --sb-color: #ffffff;  }

/* Semantic Presets */
.star-border--primary  { --sb-color: var(--purple-main); }
.star-border--secondary { --sb-color: var(--btn-gray); }
.star-border--success  { --sb-color: var(--success); }
.star-border--danger   { --sb-color: var(--danger); }
.star-border--warning  { --sb-color: var(--warning); }
.star-border--info     { --sb-color: var(--info); }

/* ── Container ── */
.star-border {
  display:  inline-block;
  position: relative;
  border-radius: var(--sb-radius);
  overflow: hidden;
  padding: var(--sb-thickness) 0;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

/* ── Animated gradient strips ── */
.star-border::before,
.star-border::after {
  content: '';
  position: absolute;
  width: 300%;
  height: 50%;
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
  background: radial-gradient(circle, var(--sb-color), transparent 10%);
}

/* Bottom strip */
.star-border::before {
  bottom: -12px;
  right: -250%;
  animation: sb-bottom var(--sb-speed) linear infinite alternate;
  z-index: 0;
}

/* Top strip */
.star-border::after {
  top: -12px;
  left: -250%;
  animation: sb-top var(--sb-speed) linear infinite alternate;
  z-index: 0;
}

/* ── Inner content wrapper ── */
.star-border__inner {
  position: relative;
  border: 1px solid var(--sb-border);
  background: var(--sb-bg);
  color: #fff;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 14px 32px;
  border-radius: var(--sb-radius);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
  width: 100%;
}

/* ── Colour accent on inner border ── */
.star-border--pink  .star-border__inner { border-color: rgba(224, 64, 251, 0.4); }
.star-border--cyan  .star-border__inner { border-color: rgba(0, 212, 255, 0.4); }
.star-border--white .star-border__inner { border-color: rgba(255, 255, 255, 0.35); }

.star-border--primary  .star-border__inner { border-color: rgba(123, 47, 255, 0.4); }
.star-border--secondary .star-border__inner { border-color: rgba(107, 114, 128, 0.4); }
.star-border--success  .star-border__inner { border-color: rgba(16, 185, 129, 0.4); }
.star-border--danger   .star-border__inner { border-color: rgba(239, 68, 68, 0.4); }
.star-border--warning  .star-border__inner { border-color: rgba(245, 158, 11, 0.4); }
.star-border--info     .star-border__inner { border-color: rgba(14, 165, 233, 0.4); }

/* ── Hover state ── */
.star-border:hover .star-border__inner {
  background: rgba(123, 47, 255, 0.10);
  border-color: rgba(123, 47, 255, 0.45);
}

.star-border--pink:hover  .star-border__inner { border-color: rgba(224, 64, 251, 0.7); background: rgba(224,64,251,0.08); }
.star-border--cyan:hover  .star-border__inner { border-color: rgba(0, 212, 255, 0.7);  background: rgba(0,212,255,0.08); }
.star-border--white:hover .star-border__inner { border-color: rgba(255, 255, 255, 0.6); }

.star-border--primary:hover  .star-border__inner { border-color: rgba(123, 47, 255, 0.7); background: rgba(123, 47, 255, 0.08); }
.star-border--secondary:hover .star-border__inner { border-color: rgba(107, 114, 128, 0.7); background: rgba(107, 114, 128, 0.08); }
.star-border--success:hover  .star-border__inner { border-color: rgba(16, 185, 129, 0.7); background: rgba(16, 185, 129, 0.08); }
.star-border--danger:hover   .star-border__inner { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.08); }
.star-border--warning:hover  .star-border__inner { border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.08); }
.star-border--info:hover     .star-border__inner { border-color: rgba(14, 165, 233, 0.7); background: rgba(14, 165, 233, 0.08); }
.star-border:hover::before,
.star-border:hover::after {
  opacity: 1;
}

/* ── Keyframes ── */
@keyframes sb-bottom {
  0%   { transform: translate(0%, 0%);    opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

@keyframes sb-top {
  0%   { transform: translate(0%, 0%);   opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}
