/*
 * hover-border-gradient.css — Aceternity Hover Border Gradient port (vanilla)
 * Source inspiration: https://ui.aceternity.com/components/hover-border-gradient
 * Retrieved: 2026-06-10
 * Licence: UNCONFIRMED — do NOT merge to main until Brock clears the licence gate.
 *
 * @tokens-required
 *   --black-card          (#0A0A0A)
 *   --bg-surface-2        (#111111)
 *   --red-primary         (#FF1A1A)
 *   --brand-red           (#FF2D2D)
 *   --gold-accent         (#F0BD30)
 *   --hairline-2          (rgba(255,255,255,.1))
 *   --text-primary        (#F5F5F5)
 *   --text-muted          (#8A8A8A)
 *   --f-body              (Inter)
 *   --sns-radius-xl       (10px)
 *   --sns-dur-base        (.2s)
 *   --sns-ease-soft
 *   --brand-red-bright    — focus ring
 *
 * Usage (button/link):
 *   <button class="hbg-btn">
 *     <span class="hbg-btn__label">Join League</span>
 *   </button>
 *
 *   Or as a container wrapper:
 *   <div class="hbg-wrap"><div class="hbg-inner">content</div></div>
 *
 * Intended for: icon-runner navigation buttons, CTA buttons in league list.
 *
 * Deviations:
 *   - Original uses framer-motion whileHover with spring; replaced with CSS transition
 *   - Purple gradient replaced with SNS crimson→gold arc
 *   - Background glow follows CSS :hover (no JS pointer tracking)
 *   - Added prefers-reduced-motion guard
 */

/* ── Button form ──────────────────────────────────────────────────────────── */
.hbg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sns-space-4, 8px);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--sns-radius-xl, 10px);
  cursor: pointer;
  font-family: var(--f-body);
  font-weight: var(--sns-fw-bold, 700);
  font-size: var(--sns-fs-14, 14px);
  letter-spacing: var(--sns-ls-button, .14em);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  isolation: isolate;
}

/* ── Gradient arc border via ::before ────────────────────────────────────── */
.hbg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;                 /* border thickness */
  background: linear-gradient(
    135deg,
    var(--gray-border, #2A2A2A) 0%,
    var(--gray-border, #2A2A2A) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transition: background var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

.hbg-btn:hover::before,
.hbg-btn:focus-visible::before {
  background: linear-gradient(
    135deg,
    var(--red-primary, #FF1A1A) 0%,
    var(--gold-accent, #F0BD30) 50%,
    var(--red-primary, #FF1A1A) 100%
  );
}

/* ── Inner surface ────────────────────────────────────────────────────────── */
.hbg-btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sns-space-4, 8px);
  padding: 11px 18px;
  min-height: var(--sns-touch-target, 44px);
  border-radius: calc(var(--sns-radius-xl, 10px) - 1px);
  background: var(--bg-surface-2, #111);
  color: var(--text-primary, #F5F5F5);
  transition:
    background var(--sns-dur-base, .2s) var(--sns-ease-soft),
    color      var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

.hbg-btn:hover .hbg-btn__label {
  background: var(--black-card, #0A0A0A);
  color: var(--text-primary, #F5F5F5);
}

/* ── Focus ring ───────────────────────────────────────────────────────────── */
.hbg-btn:focus { outline: none; }
.hbg-btn:focus-visible {
  outline: 2px solid var(--brand-red-bright, #FF3434);
  outline-offset: 2px;
}

.hbg-btn:disabled,
.hbg-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Wrapper / container form (non-button) ────────────────────────────────── */
.hbg-wrap {
  position: relative;
  border-radius: var(--sns-radius-xl, 10px);
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--hairline-2, rgba(255,255,255,.1)) 0%,
    var(--hairline-2, rgba(255,255,255,.1)) 100%
  );
  transition: background var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

.hbg-wrap:hover {
  background: linear-gradient(
    135deg,
    var(--red-primary, #FF1A1A) 0%,
    var(--gold-accent, #F0BD30) 50%,
    var(--red-primary, #FF1A1A) 100%
  );
}

.hbg-inner {
  border-radius: calc(var(--sns-radius-xl, 10px) - 1px);
  background: var(--bg-surface-2, #111);
  overflow: hidden;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hbg-btn::before,
  .hbg-btn .hbg-btn__label,
  .hbg-wrap {
    transition: none;
  }
}