/* ============================================================
   beam-button.css
   Animated edge-beam effect for buttons/links.

   USAGE: add class="beam-btn" to any <button> or <a>, alongside
   whatever classes it already has. Link this file, link
   beam-button.js, and you're done — no other markup needed.
   ============================================================ */

.beam-btn{
  position: relative;
  z-index: 0; /* creates a stacking context so the beam paints below the label */
}

.beam-btn__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  z-index: -1; /* sits behind the button's own text/icon */
}