/* Register the custom property so browsers that support it can interpolate the angle
     on the compositor for smooth animation. Browsers that don't support @property will
     use the JS fallback below. */
@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    --glow-size: 5px;
    /* how far the glow extends outward */
    --inner-offset: 80px;
    /* thickness of the visible ring */
    --blur: 10px;
    /* softness of the glow */
    --spin-duration: 6s;
    /* rotation speed */
    --segment-deg: 18deg;
    /* width of each color segment */

    --color-a: rgba(255, 255, 0, 1);
    /* primary color */
    --color-b: rgba(255, 187, 0, 1);
    /* secondary color */

    /* ensure there's an initial value for the custom property */
    --angle: 0deg;
}



/* the box */
.glow-box {
    position: relative;
    background: #111;
    border-radius: 20px;
    overflow: visible;
    /* allow glow outside */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* IMPORTANT: this pseudo-element is a *larger rounded rectangle* (same border-radius)
     so when we blur it the silhouette remains a rounded-rect (like a box-shadow).
     We animate the `--angle` var used in `from var(--angle)` so the gradient colors move
     while the element itself doesn't rotate — this keeps the shape fixed. */
.glow-box::before {
    content: "";
    position: absolute;

    /* extend beyond the box on all sides */
    inset: calc(-1 * var(--glow-size));
    border-radius: inherit;
    /* keep same rounded corners */

    /* alternating sharp colors around the ring */
    background: repeating-conic-gradient(from var(--angle),
            var(--color-a) 0deg var(--segment-deg),
            var(--color-b) var(--segment-deg) calc(2 * var(--segment-deg)));

    /* blur to create a soft, box-shadow-like glow; because the element is a rounded-rect,
       the blur produces a softened rectangle silhouette rather than a circle. */
    filter: blur(var(--blur));

    /* animate only the angle so colors sweep — the rounded-rect stays visually fixed */
    animation: sweep var(--spin-duration) linear infinite;

    /* hint for compositor */
    will-change: background;

    z-index: -1;
    pointer-events: none;
}

/* inner cover hides the gradient center so the glow appears only around the outside */
.glow-box::after {
    content: "";
    position: absolute;
    inset: var(--inner-offset);
    background: #111;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}

/* animate the custom property that controls the gradient's start angle */
@keyframes sweep {
    to {
        --angle: 360deg;
    }
}