/* SpecularButton — vanilla port (React Bits). Applied only to the demo CTAs.
   The teal is kept subtle/translucent so the animated specular rim reads clearly. */

.btn.specular-cta {
  position: relative;
  overflow: visible;
  background: rgba(0, 191, 175, 0.12);
  color: #eafffe;
  border: 1px solid rgba(0, 191, 175, 0.32);
  box-shadow:
    0 10px 30px -14px rgba(0, 191, 175, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn.specular-cta:hover {
  background: rgba(0, 191, 175, 0.18);
  transform: translateY(-2px);
}

/* WebGL canvas extends past the button so the rim glow can bleed outside the edge */
.specular-cta > .specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}

.specular-cta > .specular-button__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Keep the label + icon above the effect canvas */
.specular-cta > :not(.specular-button__fx) {
  position: relative;
  z-index: 2;
}