@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

:root {
    --d: 2500ms;
    --angle: 0deg;
    --c1: rgba(249, 175, 58, 1);
    --c2: rgba(249, 175, 58, 0.1);
}

.box {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
}

.box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--angle),
            var(--c2),
            var(--c1) 0.1turn,
            var(--c1) 0.15turn,
            var(--c2) 0.25turn);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder var(--d) linear infinite;
    z-index: -1;
}

@keyframes rotateBorder {
    to {
        --angle: 360deg;
    }
}