.btn-cyberpunk {
  position: relative;
  overflow: hidden;
  border: 1px solid #ff4fcf !important;
  background: linear-gradient(
    90deg,
    #7a3cff,
    #ff2fb9,
    #0bcdf4,
    #7a3cff
  ) !important;
  background-size: 400% 100% !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.9rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  box-shadow:
    0 6px 18px rgba(122, 60, 255, 0.45),
    0 0 24px rgba(255, 47, 185, 0.35) inset;

  animation: shimmer-btn 3s linear infinite;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

@keyframes shimmer-btn {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 400% center;
  }
}

/* Ripple effect used by show.ejs script */
.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 79, 207, 0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleExpand {
  to {
    transform: scale(8);
    opacity: 0;
  }
}

.btn-cyberpunk:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-cyberpunk-outline {
  position: relative;
  overflow: hidden;
  color: #ff4fcf !important;
  border: 1px solid #ff4fcf !important;
  background: transparent !important;
  font-weight: 700;
  border-radius: 0.9rem;
  transition:
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.btn-cyberpunk-outline:hover {
  color: #fff !important;
  background: rgba(255, 79, 207, 0.08) !important;
  box-shadow: 0 0 18px rgba(255, 79, 207, 0.35);
  transform: translateY(-1px);
}

.btn-cyberpunk-danger {
  background: linear-gradient(90deg, #ff3b6b, #ff0062, #ff3b6b) !important;
  background-size: 400% 100% !important;
  animation: shimmer-btn 3s linear infinite;
}
/* ===========================
   CYBERPUNK: Button Shimmer Fix
   =========================== */
.btn-cyberpunk {
  /* robust, smooth shimmer */
  background-image: linear-gradient(90deg, #7a3cff, #ff2fb9, #0bcdf4, #7a3cff);
  background-size: 320% 100% !important; /* longer runway */
  animation: btn-shimmer 4.5s linear infinite; /* slightly slower for readability */
  will-change: background-position;
}

@keyframes btn-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 320% 50%;
  }
}

/* keep gradient on danger variant too */
.btn-cyberpunk-danger {
  background-image: linear-gradient(
    90deg,
    #ff3b6b,
    #ff0062,
    #ff3b6b
  ) !important;
  background-size: 300% 100% !important;
  animation: btn-shimmer 4.5s linear infinite;
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  .btn-cyberpunk,
  .btn-cyberpunk-danger {
    animation: none;
  }
}