/* The existing anchor or button remains the only interactive element. */
.metallic-button {
  --metallic-radius: 999px;
  --metallic-face: linear-gradient(180deg, #17223e 0%, #080d22 100%);
  position: relative;
  isolation: isolate;
  min-height: 46px;
  border: 0;
  border-radius: var(--metallic-radius);
  background: var(--metallic-face);
  color: #fff;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-style: normal;
  text-decoration: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.metallic-button[data-metallic-enhanced],
.metallic-button[data-metallic-enhanced]:hover {
  border-radius: var(--metallic-radius);
  background: transparent;
  color: #fff;
}

.metallic-button .metallic-button__rim {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(130deg, #eaf1ff 0%, #355cff 13%, #080d22 28%, #eaf1ff 43%, #65779e 52%, #080d22 65%, #eaf1ff 86%, #355cff 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 36px 14px rgb(0 0 0 / 2%), 0 20px 12px rgb(0 0 0 / 8%), 0 9px 9px rgb(0 0 0 / 12%), 0 2px 5px rgb(0 0 0 / 15%);
  pointer-events: none;
  transition: transform 800ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.metallic-button .metallic-button__rim::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: inherit;
  background: var(--metallic-face);
  content: '';
  transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.metallic-button .metallic-button__canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.metallic-button--rendered .metallic-button__canvas { display: block; }

@media (hover: hover) {
  .metallic-button:not(:disabled):not([aria-disabled='true']):hover .metallic-button__rim {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 40%), 0 12px 6px rgb(0 0 0 / 5%), 0 8px 5px rgb(0 0 0 / 10%), 0 4px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 20%);
  }
}

.metallic-button:focus-visible {
  outline: 2px solid #eaf1ff;
  outline-offset: 5px;
  box-shadow: 0 0 0 5px #355cff;
}

.metallic-button:not(:disabled):not([aria-disabled='true']):active .metallic-button__rim,
.metallic-button.metallic-button--pressed .metallic-button__rim {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 30%);
}

.metallic-button:not(:disabled):not([aria-disabled='true']):active .metallic-button__rim::after,
.metallic-button.metallic-button--pressed .metallic-button__rim::after {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 2px rgb(0 0 0 / 30%);
}

.metallic-button .metallic-button__ripples {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.metallic-button .metallic-button__ripple {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 70%);
  animation: metallic-button-ripple 600ms ease-out both;
}

.metallic-button:disabled,
.metallic-button[aria-disabled='true'] { cursor: not-allowed; opacity: .55; }

@keyframes metallic-button-ripple {
  from { transform: translate(-50%, -50%) scale(0); opacity: .6; }
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .metallic-button .metallic-button__rim,
  .metallic-button .metallic-button__rim::after { transition: none; }
  .metallic-button .metallic-button__ripple { animation: none; display: none; }
  .metallic-button.metallic-button--pressed .metallic-button__rim,
  .metallic-button:active .metallic-button__rim { transform: none; }
}

@media (forced-colors: active) {
  .metallic-button,
  .metallic-button[data-metallic-enhanced],
  .metallic-button[data-metallic-enhanced]:hover {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    text-shadow: none;
  }
  .metallic-button .metallic-button__rim,
  .metallic-button .metallic-button__ripples { display: none; }
  .metallic-button:focus-visible { outline-color: Highlight; box-shadow: none; }
}