:root {
--border-animation-color: #52fe7d73;
--border-animation-speed: 7s;
--border-animation-width: 1px;
}
@property --border-animation-angle {
syntax: "<angle>";
initial-value: 0turn;
inherits: false;
}
@keyframes borderRotate {
to {
--border-animation-angle: 1turn;
}
}
.ct-border-animation:after {
pointer-events: none;
content: "";
position: absolute;
inset: calc(var(--border-animation-width) * -1);
border-radius: inherit;
border: solid transparent;
border-width: var(--border-animation-width);
animation: borderRotate var(--border-animation-speed) linear infinite;
background: conic-gradient(from var(--border-animation-angle), transparent 88%, var(--border-animation-color), var(--border-animation-color) 100%, transparent) border-box;
background-clip: border-box;
background-origin: border-box;
mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(97% - var(--border-animation-width)), rgba(0, 0, 0, 0)) content-box, radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(2% - var(--border-animation-width)), #000) border-box;
-webkit-mask-composite: destination-in;
mask-composite: intersect;
}