/* buttons.css - animation-rich button library for Bzza VPN web.
 *
 * Every class is composable: pick a base (.btn), a colour, then stack any
 * number of motion modifiers. Example:
 *   <a class="btn btn-primary btn-glow btn-ripple btn-shine btn-pulse">
 */

.btn {
  --btn-bg: #1a1a2e;
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.8em;
  font: 600 1rem/1 system-ui, sans-serif;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
  user-select: none;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.97); }

/* ---- colour variants ---- */
.btn-primary { --btn-bg: linear-gradient(135deg,#6c5ce7,#00cec9); background: var(--btn-bg); }
.btn-outline { background: transparent; border-color: #6c5ce7; color: #a29bfe; }
.btn-ghost   { background: transparent; color: #dfe6e9; }

/* ---- glow: pulsing colored halo ---- */
.btn-glow { box-shadow: 0 0 0 rgba(108,92,231,.0); }
.btn-glow:hover {
  box-shadow: 0 6px 24px rgba(108,92,231,.55), 0 0 40px rgba(0,206,201,.35);
  animation: glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(108,92,231,.45), 0 0 30px rgba(0,206,201,.25); }
  50%     { box-shadow: 0 10px 38px rgba(108,92,231,.7), 0 0 60px rgba(0,206,201,.5); }
}

/* ---- shine: diagonal light sweep ---- */
.btn-shine::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 1;
}
.btn-shine:hover::before { transform: translateX(120%); }

/* ---- ripple: material-style click ripple ---- */
.btn-ripple .rip {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: ripple .65s ease-out;
  pointer-events: none;
  z-index: 2;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---- pulse: continuous breathing scale ---- */
.btn-pulse { animation: btnPulse 2.2s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,206,201,.5); }
  50%     { box-shadow: 0 0 0 14px rgba(0,206,201,0); }
}

/* ---- bounce on hover (spring) ---- */
.btn-bounce { transition: transform .4s cubic-bezier(.68,-.55,.27,1.55); }
.btn-bounce:hover { animation: btnBounce .6s ease; }
@keyframes btnBounce {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-12px) scale(1.04); }
  60%     { transform: translateY(2px) scale(.98); }
}