/* ============================================================
 * Vilkax · vlx-glow-btn.css  (Pass-153)
 * ============================================================
 *
 * Drop-in modern button polish.  Add `vlx-glow-btn` to any
 * <button> or <a> and you get:
 *   • low-weight resting state
 *   • soft neon ring on hover/focus
 *   • haptic press effect (translateY(1px))
 *   • full keyboard-focus outline (a11y mandatory)
 *   • respects prefers-reduced-motion
 *
 * Variants:
 *   .vlx-glow-btn               — neutral ghost
 *   .vlx-glow-btn-primary       — Vilkax blue gradient fill
 *   .vlx-glow-btn-success       — wolf-green fill (rewards/cred)
 *   .vlx-glow-btn-danger        — alpha-red fill (destructive)
 *   .vlx-glow-btn-lg            — larger hit target (CTAs)
 *   .vlx-glow-btn-block         — full-width
 *
 * Drop-in compatible: existing classes win on conflict; this
 * file is additive.  Pages just append the class to whatever
 * styling they already have.
 * ============================================================ */

.vlx-glow-btn {
  --vlx-glow: 96, 165, 250;            /* default: blue */
  --vlx-glow-strong: 59, 130, 246;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.25em;
  font-family: var(--font-brand, "Manrope", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #e2e8f0;
  background: rgba(11, 20, 38, 0.55);
  border: 1px solid rgba(var(--vlx-glow), 0.30);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 180ms ease,
    border-color     180ms ease,
    box-shadow       220ms ease,
    transform        140ms ease,
    color            180ms ease;
}

/* Hover — soft inner halo + outer glow ring. */
.vlx-glow-btn:hover {
  border-color: rgba(var(--vlx-glow), 0.65);
  background: rgba(11, 20, 38, 0.75);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(var(--vlx-glow), 0.18),
    0 6px 24px -8px rgba(var(--vlx-glow-strong), 0.45),
    0 0 24px -6px rgba(var(--vlx-glow), 0.55);
}

/* Active — sit down, lose glow briefly. */
.vlx-glow-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgba(var(--vlx-glow), 0.12),
    0 2px 8px -4px rgba(0, 0, 0, 0.5);
}

/* Keyboard focus — always visible (a11y). */
.vlx-glow-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--vlx-glow), 0.85);
  box-shadow:
    0 0 0 3px rgba(var(--vlx-glow-strong), 0.30),
    inset 0 0 0 1px rgba(var(--vlx-glow), 0.30);
}

.vlx-glow-btn:disabled,
.vlx-glow-btn[aria-disabled="true"] {
  opacity: 0.50;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.vlx-glow-btn:disabled:hover,
.vlx-glow-btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* ── Primary — filled blue gradient ──────────────────────── */
.vlx-glow-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 16px -6px rgba(37, 99, 235, 0.40);
}
.vlx-glow-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  border-color: rgba(147, 197, 253, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 28px -6px rgba(37, 99, 235, 0.65),
    0 0 32px -6px rgba(59, 130, 246, 0.70);
}

/* ── Success — wolf-green (rewards / VAX credit) ─────────── */
.vlx-glow-btn-success {
  --vlx-glow: 110, 231, 183;
  --vlx-glow-strong: 16, 185, 129;
  color: #052e1c;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  border-color: rgba(110, 231, 183, 0.55);
}
.vlx-glow-btn-success:hover {
  color: #04140d;
  background: linear-gradient(135deg, #10b981 0%, #6ee7b7 100%);
}

/* ── Danger — alpha-red (destructive) ─────────────────────── */
.vlx-glow-btn-danger {
  --vlx-glow: 252, 165, 165;
  --vlx-glow-strong: 220, 38, 38;
  color: #fff;
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  border-color: rgba(252, 165, 165, 0.55);
}

/* ── Sizes ────────────────────────────────────────────────── */
.vlx-glow-btn-sm { padding: 0.55em 0.95em; font-size: 12.5px; border-radius: 8px; }
.vlx-glow-btn-lg {
  padding: 1.0em 1.75em;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 12px;
}

.vlx-glow-btn-block { display: flex; width: 100%; }

/* Pulse helper — apply to "loved-this" CTAs to draw a slow
   breathing glow without being noisy.  Disabled under
   prefers-reduced-motion. */
.vlx-glow-btn-pulse { animation: vlx-glow-btn-pulse 4s ease-in-out infinite; }
@keyframes vlx-glow-btn-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 4px 16px -6px rgba(var(--vlx-glow-strong), 0.40);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 6px 22px -4px rgba(var(--vlx-glow-strong), 0.65),
      0 0 32px -6px rgba(var(--vlx-glow), 0.65);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vlx-glow-btn-pulse { animation: none; }
  .vlx-glow-btn { transition: none; }
  .vlx-glow-btn:active { transform: none; }
}