BTN-FANCY: SPACE-style animated buttons
/* From Uiverse.io by StealthWorm */
/* Adapted for Design Reyes - all .btn elements */
/* Loads AFTER no-shadows.css to override it */

/* ---- Base Fancy Button ---- */
.btn-fancy {
  /* Default Space colors */
  --btn-g1: #ffdb3b;
  --btn-g2: #fe53bb;
  --btn-g3: #8f51ea;
  --btn-g4: #0044ff;
  --btn-bg: #0f0520;
  --btn-glow-1: rgba(254, 83, 186, 0.636);
  --btn-glow-2: rgba(142, 81, 234, 0.704);
  --btn-active-color: #fe53bb;

  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-radius: 5rem !important;
  transition: 0.5s !important;
  animation: btn-space-gradient 5s ease infinite !important;
  border: double 4px transparent !important;
  background-size: 300% 300% !important;
  background-image:
linear-gradient(var(--btn-bg), var(--btn-bg)),
    linear-gradient(137.48deg, var(--btn-g1) 10%, var(--btn-g2) 45%, var(--btn-g3) 67%, var(--btn-g4) 87%) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  box-shadow: none !important;
  text-shadow: none !important;
  isolation: isolate;
  z-index: 1;
}

/* Remove old pseudo-element approach */
.btn-fancy::before,
.btn-fancy::after {
  content: none !important;
}

/* Text layer */
.btn-fancy .btn-fancy-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* Stars container (= #container-stars) */
.btn-fancy .btn-fancy-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  animation: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Star particles (#stars::before and #stars::after) */
.btn-fancy .btn-fancy-stars::before,
.btn-fancy .btn-fancy-stars::after {
  content: '' !important;
  position: absolute !important;
  background-image: radial-gradient(#ffffff 1px, transparent 1%) !important;
  background-size: 50px 50px;
  box-shadow: none !important;
  text-shadow: none !important;
}

.btn-fancy .btn-fancy-stars::before {
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: btn-space-star-drift 60s linear infinite !important;
  opacity: 0.5;
}

.btn-fancy .btn-fancy-stars::after {
  top: -10rem;
  left: -100rem;
  width: 200rem;
  height: 200rem;
  animation: btn-space-star-rotate 90s linear infinite !important;
}

/* On hover: stars become visible over dark bg */
.btn-fancy:hover .btn-fancy-stars {
  z-index: 1;
  background-color: var(--btn-bg);
}

/* Glow effect (= #glow) - hidden to avoid blob/stain artifacts */
.btn-fancy .btn-fancy-glow {
  display: none !important;
}

/* ---- Hover ---- */
.btn-fancy:hover {
  transform: scale(1.1) !important;
}

/* ---- Active ---- */
.btn-fancy:active {
  border: double 4px var(--btn-active-color) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  animation: none !important;
}

.btn-fancy:active .btn-fancy-glow-circle {
  background: var(--btn-active-color) !important;
}

/* COLOR VARIANTS */

/* PRIMARY (Purple) */
.btn-fancy.btn-primary {
  --btn-g1: #c4b5fd;
  --btn-g2: #7c3aed;
  --btn-g3: #a78bfa;
  --btn-g4: #6d28d9;
  --btn-bg: #0f0520;
  --btn-glow-1: rgba(167, 139, 250, 0.7);
  --btn-glow-2: rgba(124, 58, 237, 0.7);
  --btn-active-color: #7c3aed;
}

/* SECONDARY / ORANGE */
.btn-fancy.btn-secondary,
.btn-fancy.btn-orange {
  --btn-g1: #ffdb3b;
  --btn-g2: #ff6b00;
  --btn-g3: #ff8f3d;
  --btn-g4: #e55d00;
  --btn-bg: #1a0800;
  --btn-glow-1: rgba(255, 143, 61, 0.7);
  --btn-glow-2: rgba(255, 107, 0, 0.7);
  --btn-active-color: #ff6b00;
}

/* SUCCESS (Green) */
.btn-fancy.btn-success {
  --btn-g1: #86efac;
  --btn-g2: #22c55e;
  --btn-g3: #4ade80;
  --btn-g4: #16a34a;
  --btn-bg: #021a0a;
  --btn-glow-1: rgba(74, 222, 128, 0.7);
  --btn-glow-2: rgba(34, 197, 94, 0.7);
  --btn-active-color: #22c55e;
}

/* WHATSAPP (WhatsApp Green) */
.btn-fancy.btn-whatsapp {
  --btn-g1: #86efac;
  --btn-g2: #25d366;
  --btn-g3: #4ade80;
  --btn-g4: #128c7e;
  --btn-bg: #021a0a;
  --btn-glow-1: rgba(37, 211, 102, 0.7);
  --btn-glow-2: rgba(18, 140, 126, 0.7);
  --btn-active-color: #25d366;
}

/* OUTLINE (Purple border, dark fill) */
.btn-fancy.btn-outline {
  --btn-g1: #c4b5fd;
  --btn-g2: #7c3aed;
  --btn-g3: #a78bfa;
  --btn-g4: #6d28d9;
  --btn-bg: rgba(15, 5, 30, 0.92);
  --btn-glow-1: rgba(167, 139, 250, 0.5);
  --btn-glow-2: rgba(124, 58, 237, 0.5);
  --btn-active-color: #7c3aed;
}

.btn-fancy.btn-outline .btn-fancy-text {
  color: var(--accent-soft, #a78bfa) !important;
}

.btn-fancy.btn-outline:hover .btn-fancy-text {
  color: #fff !important;
}

/* CARD BUTTON VARIANTS (catalog cards) */

.btn-fancy.card-price-large,
.btn-fancy.card-price-premium,
.btn-fancy.card-price-free,
.btn-fancy.card-download-btn {
  border-radius: 14px !important;
}

.btn-fancy.card-price-large .btn-fancy-stars,
.btn-fancy.card-price-premium .btn-fancy-stars,
.btn-fancy.card-price-free .btn-fancy-stars,
.btn-fancy.card-download-btn .btn-fancy-stars {
  border-radius: 14px;
}

/* ORANGE card buttons (premium) */
.btn-fancy.btn-fancy-orange {
  --btn-g1: #ffdb3b;
  --btn-g2: #ff6b00;
  --btn-g3: #ff8f3d;
  --btn-g4: #e55d00;
  --btn-bg: #1a0800;
  --btn-glow-1: rgba(255, 143, 61, 0.7);
  --btn-glow-2: rgba(255, 107, 0, 0.7);
  --btn-active-color: #ff6b00;
}

/* GREEN card buttons (free) */
.btn-fancy.btn-fancy-green {
  --btn-g1: #86efac;
  --btn-g2: #22c55e;
  --btn-g3: #4ade80;
  --btn-g4: #16a34a;
  --btn-bg: #021a0a;
  --btn-glow-1: rgba(74, 222, 128, 0.7);
  --btn-glow-2: rgba(34, 197, 94, 0.7);
  --btn-active-color: #22c55e;
}

/* PURPLE card buttons (gift/purchased) */
.btn-fancy.btn-fancy-purple {
  --btn-g1: #c4b5fd;
  --btn-g2: #7c3aed;
  --btn-g3: #a78bfa;
  --btn-g4: #6d28d9;
  --btn-bg: #0f0520;
  --btn-glow-1: rgba(167, 139, 250, 0.7);
  --btn-glow-2: rgba(124, 58, 237, 0.7);
  --btn-active-color: #7c3aed;
}

/* LOGGED-IN state (Green override) */
.btn-fancy.is-logged-in {
  --btn-g1: #4ade80;
  --btn-g2: #22c55e;
  --btn-g3: #10b981;
  --btn-g4: #059669;
  --btn-bg: #021a0a;
  --btn-glow-1: rgba(74, 222, 128, 0.7);
  --btn-glow-2: rgba(16, 185, 129, 0.7);
  --btn-active-color: #22c55e;
}

/* KEYFRAMES */

@keyframes btn-space-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes btn-space-star-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-135rem); }
}

@keyframes btn-space-star-rotate {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0); }
}

@keyframes btn-space-pulse {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* RESPONSIVE / ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
.btn-fancy,
  .btn-fancy .btn-fancy-stars::before,
  .btn-fancy .btn-fancy-stars::after,
  .btn-fancy .btn-fancy-glow-circle {
    animation: none !important;
  }
}

@media (hover: none) {
  .btn-fancy .btn-fancy-glow {
    display: none;
  }
}

/* Sizing helpers */
.btn-fancy.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
}

.btn-fancy.btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
}

.btn-fancy.btn-xl {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.btn-fancy.btn-block {
  width: 100%;
}

/* PRODUCT PAGE dr-btn OVERRIDES */

.btn-fancy.dr-btn {
  width: 100% !important;
  padding: 0.9rem 1.4rem !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
}

.btn-fancy.dr-btn .btn-fancy-stars {
  border-radius: 14px;
}

@media (max-width: 500px) {
  .btn-fancy.dr-btn {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
  .btn-fancy.dr-btn .btn-fancy-stars {
    border-radius: 10px;
  }
}

/* FORM / STANDALONE BUTTON OVERRIDES */

/* Full-width form submit buttons */
.btn-fancy.btn-submit,
.btn-fancy.btn-checkout {
  width: 100% !important;
  padding: 0.9rem 1.4rem !important;
  font-size: 1rem !important;
  border-radius: 14px !important;
}

.btn-fancy.btn-submit .btn-fancy-stars,
.btn-fancy.btn-checkout .btn-fancy-stars {
  border-radius: 14px;
}

/* Plan buttons (membership page) */
.btn-fancy.plan-btn {
  width: 100% !important;
  padding: 0.85rem 1.4rem !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  text-decoration: none !important;
}

.btn-fancy.plan-btn .btn-fancy-stars {
  border-radius: 14px;
}

/* Gracias page action buttons */
.btn-fancy.btn-gracias {
  padding: 0.85rem 1.6rem !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  text-decoration: none !important;
}

.btn-fancy.btn-gracias .btn-fancy-stars {
  border-radius: 14px;
}

/* Patreon connect page buttons */
.btn-fancy.btn-login,
.btn-fancy.btn-patreon,
.btn-fancy.btn-patreon-connect,
.btn-fancy.btn-logout,
.btn-fancy.btn-disconnect,
.btn-fancy.btn-upgrade-plan {
  padding: 0.85rem 1.6rem !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  text-decoration: none !important;
}

.btn-fancy.btn-login .btn-fancy-stars,
.btn-fancy.btn-patreon .btn-fancy-stars,
.btn-fancy.btn-patreon-connect .btn-fancy-stars,
.btn-fancy.btn-logout .btn-fancy-stars,
.btn-fancy.btn-disconnect .btn-fancy-stars,
.btn-fancy.btn-upgrade-plan .btn-fancy-stars {
  border-radius: 14px;
}