/*
 * shimmer-button.css — Aceternity Shimmer Button port (vanilla)
 * Source inspiration: https://ui.aceternity.com/components/shimmer-button
 * Retrieved: 2026-06-10
 * Licence: UNCONFIRMED — do NOT merge to main until Brock clears the licence gate.
 *
 * Note: The SNS canonical .btn--primary already has a sheen/shimmer animation
 * (sns-btn-sheen in tokens.css). This component provides a DIFFERENT variant:
 * a heavier multi-layer shimmer ring effect intended for standalone hero CTAs
 * (e.g., "Start Draft" on the live-draft lobby, "Join League" hero button).
 * For regular primary buttons, use .btn.btn--primary from tokens.css instead.
 *
 * @tokens-required
 *   --black-bg            (#050505)
 *   --bg-surface-2        (#111111)
 *   --red-primary         (#FF1A1A)
 *   --brand-red           (#FF2D2D)
 *   --brand-red-deep      (#C40000)
 *   --gold-accent         (#F0BD30)
 *   --text-primary        (#F5F5F5)
 *   --f-body              (Inter)
 *   --sns-radius-xl       (10px)  — use .shimmer-btn--pill for 9999px
 *   --sns-dur-shimmer     (3s)
 *   --sns-dur-base        (.2s)
 *   --sns-ease-soft
 *   --brand-red-bright    — focus ring
 *
 * Usage:
 *   <button class="shimmer-btn">
 *     <span>Start Draft</span>
 *   </button>
 *
 *   Pill variant:
 *   <button class="shimmer-btn shimmer-btn--pill">…</button>
 *
 *   Gold variant (win/positive):
 *   <button class="shimmer-btn shimmer-btn--gold">…</button>
 *
 * Intended for: live-draft CTA, primary hero action in league lobby.
 *
 * Deviations:
 *   - framer-motion shimmer sweep replaced with CSS @keyframes on ::before
 *   - Background conic ring shimmer replaced with CSS linear gradient sweep
 *   - Added SNS brand colours (crimson primary, gold variant)
 *   - Reduced motion: static gradient, no animation
 */

/* ── Base button ──────────────────────────────────────────────────────────── */
.shimmer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sns-space-4, 8px);
  padding: 14px 28px;
  min-height: var(--sns-touch-target, 44px);
  border: none;
  border-radius: var(--sns-radius-xl, 10px);
  background: transparent;
  color: var(--text-primary, #F5F5F5);
  font-family: var(--f-body);
  font-size: var(--sns-fs-14, 14px);
  font-weight: var(--sns-fw-bold, 700);
  letter-spacing: var(--sns-ls-button, .14em);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform   var(--sns-dur-base, .2s) var(--sns-ease-soft),
    box-shadow  var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

/* ── Dark background + gradient border via gradient pseudo-bg ─────────────── */
.shimmer-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    var(--brand-red-deep, #C40000)  0%,
    var(--brand-red, #FF2D2D)       20%,
    var(--gold-accent, #F0BD30)     30%,
    var(--brand-red, #FF2D2D)       40%,
    var(--brand-red-deep, #C40000) 50%,
    var(--brand-red-deep, #C40000) 100%
  );
  animation: shimmer-btn-rotate var(--sns-dur-shimmer, 3s) linear infinite;
}

@property --shimmer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes shimmer-btn-rotate {
  from { --shimmer-angle: 0deg; }
  to   { --shimmer-angle: 360deg; }
}

/* ── Inner dark fill (1px inset) ──────────────────────────────────────────── */
.shimmer-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--sns-radius-xl, 10px) - 1px);
  background: var(--black-bg, #050505);
}

/* ── Text always above ────────────────────────────────────────────────────── */
.shimmer-btn > * { position: relative; z-index: 1; }

/* ── Hover lift ───────────────────────────────────────────────────────────── */
.shimmer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 45, 45, .4);
}

.shimmer-btn:active {
  transform: translateY(0) scale(.98);
}

/* ── Pill variant ─────────────────────────────────────────────────────────── */
.shimmer-btn--pill {
  border-radius: 9999px;
}
.shimmer-btn--pill::after {
  border-radius: 9999px;
}

/* ── Gold variant ─────────────────────────────────────────────────────────── */
.shimmer-btn--gold::before {
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    #8B6400 0%,
    var(--gold-accent, #F0BD30) 25%,
    #FFF0A0 35%,
    var(--gold-accent, #F0BD30) 45%,
    #8B6400 60%,
    #8B6400 100%
  );
}

.shimmer-btn--gold:hover {
  box-shadow: 0 8px 24px rgba(240, 189, 48, .35);
}

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

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

/* ── Reduced motion: static gradient, no rotation ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shimmer-btn::before {
    animation: none;
    background: linear-gradient(135deg,
      var(--brand-red-deep, #C40000),
      var(--brand-red, #FF2D2D),
      var(--gold-accent, #F0BD30)
    );
    opacity: .7;
  }
  .shimmer-btn {
    transition: none;
  }
  .shimmer-btn:hover {
    transform: none;
    box-shadow: none;
  }
}