/**
 * Futuristic pointer-following glow for CTA / builder buttons.
 * Uses --glow-x and --glow-y (set by JS on mousemove) to position the radial glow.
 */
.btn-glow-pointer {
    position: relative;
    overflow: hidden;
}

/* Glow layer: follows cursor when hovering */
.btn-glow-pointer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        circle 140px at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(27, 73, 255, 0.55) 0%,
        rgba(27, 73, 255, 0.25) 35%,
        rgba(27, 73, 255, 0.08) 55%,
        transparent 75%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-glow-pointer:hover::before,
.btn-glow-pointer:focus-visible::before {
    opacity: 1;
}

/* Keep button content above the glow */
.btn-glow-pointer > * {
    position: relative;
    z-index: 1;
}

/* Deployment choice cards (builder): larger glow radius */
.deployment-choice .btn-glow-pointer::before {
    background: radial-gradient(
        circle 180px at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(255, 255, 255, 0.35) 0%,
        rgba(27, 73, 255, 0.2) 30%,
        rgba(27, 73, 255, 0.06) 50%,
        transparent 70%
    );
}