/* Glowing Border Effect — interactive blue beam that follows cursor */

.glowing-wrapper {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
}

.glowing-inner {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: relative;
}

.glowing-inner::after {
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: -1px;
    border: 1.5px solid transparent;
    background:
        radial-gradient(circle, #0d47a1 10%, transparent 20%),
        radial-gradient(circle at 40% 40%, #1a73e8 5%, transparent 15%),
        radial-gradient(circle at 60% 60%, #60a5fa 10%, transparent 20%),
        radial-gradient(circle at 40% 60%, #bae6fd 10%, transparent 20%),
        repeating-conic-gradient(
            from 236.84deg at 50% 50%,
            #0d47a1 0%,
            #1a73e8 5%,
            #60a5fa 10%,
            #bae6fd 15%,
            #0d47a1 20%
        );
    background-attachment: fixed;
    opacity: var(--glow-active, 0);
    transition: opacity 0.3s;
    -webkit-mask-clip: padding-box, border-box;
    -webkit-mask-composite: destination-in;
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(transparent, transparent),
        conic-gradient(
            from calc((var(--glow-start, 0) - 30) * 1deg),
            transparent 0deg,
            white,
            transparent 60deg
        );
    mask-image:
        linear-gradient(transparent, transparent),
        conic-gradient(
            from calc((var(--glow-start, 0) - 30) * 1deg),
            transparent 0deg,
            white,
            transparent 60deg
        );
}