/* ===================================================================
 * 2B Shiny Borders Button
 * Vanilla port of 21st.dev "Shiny Borders Button" (muhammad-binsalman)
 * - Rotating conic-gradient border via masked pseudo-element
 * - Soft inner glow + radial gradient base
 * - Cursor-tracked green/white highlight on hover
 * - No external deps, no JS required for the static look
 * =================================================================== */

.shiny-btn {
  --shiny-radius: 999px;
  --shiny-pad: 1.5rem 2.25rem;
  --shiny-bg: radial-gradient(
    120% 120% at 50% 0%,
    #112a1a 0%,
    #05070a 60%,
    #05070a 100%
  );
  --shiny-border: conic-gradient(
    from var(--shiny-angle, 0deg),
    #1a3a26 0deg,
    #6effb1 40deg,
    #ffffff 90deg,
    #1a3a26 160deg,
    #05070a 220deg,
    #6effb1 300deg,
    #1a3a26 360deg
  );
  --shiny-border-hover: conic-gradient(
    from var(--shiny-angle, 0deg),
    #2f8a55 0deg,
    #b6ffd6 30deg,
    #ffffff 90deg,
    #2f8a55 150deg,
    #05070a 220deg,
    #b6ffd6 310deg,
    #2f8a55 360deg
  );
  --shiny-text: #f0fff5;
  --shiny-glow: 0 0 0 1px rgba(110, 255, 177, 0.0),
                0 8px 30px -8px rgba(110, 255, 177, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--shiny-pad);
  border-radius: var(--shiny-radius);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading, "Syne", "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shiny-text);
  background: var(--shiny-bg);
  box-shadow: var(--shiny-glow);
  transition: transform 0.18s ease, box-shadow 0.25s ease;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Rotating gradient ring */
.shiny-btn::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--shiny-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: shiny-rotate 4.5s linear infinite;
  opacity: 0.9;
}

/* Cursor-tracked highlight + soft inner glow */
.shiny-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--shiny-radius) - 1.5px);
  background:
    radial-gradient(
      180px 180px at var(--shiny-mx, 50%) var(--shiny-my, 50%),
      rgba(180, 255, 210, 0.32),
      rgba(110, 255, 177, 0.08) 35%,
      transparent 70%
    ),
    radial-gradient(
      140% 100% at 50% -20%,
      rgba(255, 255, 255, 0.18),
      transparent 60%
    );
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.shiny-btn > * {
  position: relative;
  z-index: 2;
}

.shiny-btn:hover {
  --shiny-border: var(--shiny-border-hover);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(110, 255, 177, 0.4),
    0 14px 40px -10px rgba(110, 255, 177, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.shiny-btn:hover::after {
  opacity: 1;
}

.shiny-btn:focus-visible {
  outline: 2px solid #b6ffd6;
  outline-offset: 3px;
}

.shiny-btn:active {
  transform: translateY(0);
}

/* Variants */
.shiny-btn--gold {
  --shiny-bg: radial-gradient(
    120% 120% at 50% 0%,
    #2a1d05 0%,
    #0a0705 60%,
    #05070a 100%
  );
  --shiny-border: conic-gradient(
    from var(--shiny-angle, 0deg),
    #5a3a05 0deg,
    #ffb02e 40deg,
    #fff4d6 90deg,
    #5a3a05 160deg,
    #05070a 220deg,
    #ffb02e 300deg,
    #5a3a05 360deg
  );
  --shiny-border-hover: conic-gradient(
    from var(--shiny-angle, 0deg),
    #8a5c0e 0deg,
    #ffd57a 30deg,
    #ffffff 90deg,
    #8a5c0e 150deg,
    #05070a 220deg,
    #ffd57a 310deg,
    #8a5c0e 360deg
  );
  --shiny-text: #fff4d6;
  --shiny-glow:
    0 0 0 1px rgba(255, 176, 46, 0.0),
    0 8px 30px -8px rgba(255, 176, 46, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.shiny-btn--gold:hover {
  box-shadow:
    0 0 0 1px rgba(255, 176, 46, 0.4),
    0 14px 40px -10px rgba(255, 176, 46, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.shiny-btn--magenta {
  --shiny-bg: radial-gradient(
    120% 120% at 50% 0%,
    #2a0530 0%,
    #0a050a 60%,
    #05070a 100%
  );
  --shiny-border: conic-gradient(
    from var(--shiny-angle, 0deg),
    #5a0a5a 0deg,
    #ff3dbd 40deg,
    #ffd1ee 90deg,
    #5a0a5a 160deg,
    #05070a 220deg,
    #ff3dbd 300deg,
    #5a0a5a 360deg
  );
  --shiny-border-hover: conic-gradient(
    from var(--shiny-angle, 0deg),
    #8a0a8a 0deg,
    #ff7ed6 30deg,
    #ffffff 90deg,
    #8a0a8a 150deg,
    #05070a 220deg,
    #ff7ed6 310deg,
    #8a0a8a 360deg
  );
  --shiny-text: #ffd1ee;
}

@keyframes shiny-rotate {
  to { --shiny-angle: 360deg; }
}

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

@property --shiny-mx {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

@property --shiny-my {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

@media (prefers-reduced-motion: reduce) {
  .shiny-btn::before { animation: none; }
  .shiny-btn:hover { transform: none; }
}