/* Animated spinning border effect */
@property --spin-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-border {
    from {
        --spin-border-angle: 0deg;
    }
    to {
        --spin-border-angle: 360deg;
    }
}

.animated-border-wrap {
    position: relative;
}

.animated-border-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.75px;
    background: conic-gradient(
        from var(--spin-border-angle),
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.6) 20%,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.6) 70%,
        rgba(255, 255, 255, 0.6) 80%,
        rgba(255, 255, 255, 0.15) 100%
    );
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    animation: spin-border 1s ease-in-out 6;
    pointer-events: none;
    z-index: 1;
}