/* ========================================
   GLOW EFFECT — Mouse-tracking glowing border
   Adapted from GlowingEffect React component
   ======================================== */

/* Ensure position: relative on targets that don't have it */
.card--glass,
.method__step-content {
    position: relative;
}

/* CSS custom props for JS */
.card--glass,
.services__card,
.method__step-content {
    --active: 0;
    --start: 0;
}

/* The glowing border pseudo-element */
.card--glass::before,
.services__card::before,
.method__step-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    /* Colorful conic spotlight that rotates with --start */
    background: conic-gradient(
        from calc((var(--start) - 20) * 1deg) at 50% 50%,
        transparent        0deg,
        #dd7bbb            6deg,
        #d79f1e           14deg,
        #5a922c           22deg,
        #00D4AA           30deg,
        #3B82F6           37deg,
        transparent       40deg,
        transparent      360deg
    );

    /* Ring mask: show only the 1px border, hide interior */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: var(--active);
    transition: opacity 280ms ease;
    pointer-events: none;
}