/* Pulse Beams CSS */
.pulse-beam-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to the button */
    z-index: 0;
    /* Behind the button text/content if possible, or handle with z-indexes on button content */
    overflow: visible;
    border-radius: inherit;
    /* Inherit border radius from parent button */
}

/* Ensure the button itself positions the wrapper correctly */
.js-pulse-trigger {
    position: relative !important;
    /* Ensure the button's content sits above the beam if needed. 
     Using z-index might require isolation, but often relative is enough if the SVG is effectively a border. 
     However, for a border effect, we might want it 'on top' of the bg but 'below' text.
     Since these buttons have backgrounds, placing it absolutely inside might clip if overflow hidden.
  */
}

/* If the buttons have overflow hidden, the glowing beam might get cut off if it extends outside.
   We'll see. Often "glows" need to be visible outside. 
   If buttons have overflow:hidden (common for border-radius), we might need the SVG stroke to be *inset* or exact match.
*/

.pulse-beam-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* The gradient definition is handled in JS/HTML defs, but we can set defaults here */