.glowing-wrapper {
    position: relative;
    border-radius: inherit;
}

.glowing-effect {
    pointer-events: none;
    position: absolute;
    inset: -1px; /* Offset to cover the border */
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.glowing-effect.active {
    opacity: 1;
}

/* The chasing light segment */
.glowing-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--glowingeffect-border-width, 2px);
    
    /* The multicolored gradient from the React component */
    background: radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%),
                radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%),
                radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), 
                radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%),
                repeating-conic-gradient(
                  from 236.84deg at 50% 50%,
                  #dd7bbb 0%,
                  #d79f1e calc(25% / 5),
                  #5a922c calc(50% / 5), 
                  #4c7894 calc(75% / 5),
                  #dd7bbb calc(100% / 5)
                );
    background-attachment: fixed;

    /* Exclusive mask technique to show only the border segment */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                 conic-gradient(from calc((var(--start, 0) - var(--spread, 20)) * 1deg), 
                                transparent 0deg, 
                                #fff, 
                                transparent calc(var(--spread, 20) * 2deg));
    mask: linear-gradient(#fff 0 0) content-box, 
          conic-gradient(from calc((var(--start, 0) - var(--spread, 20)) * 1deg), 
                         transparent 0deg, 
                         #fff, 
                         transparent calc(var(--spread, 20) * 2deg));
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
}

/* Spread and border width variables */
:root {
    --spread: 25;
    --glowingeffect-border-width: 2.5px;
}
