@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.animated-border{--border-angle:0deg;--border-width:2px;background:var(--bolt-grad);-webkit-mask-composite:destination-out;-webkit-mask-composite:xor;padding:var(--border-width);transition:background .3s ease-out;mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-position:0 0,0 0;mask-size:auto,auto;mask-repeat:repeat,repeat;mask-clip:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.group:has(:focus-visible) .animated-border,.group:hover .animated-border{background:conic-gradient(from var(--border-angle),var(--color-brand-purple) 0deg,var(--color-brand-pink) 90deg,var(--color-brand-blue) 180deg,var(--color-brand-teal) 270deg,var(--color-brand-purple) 1turn);animation:3.5s linear infinite spin-border}@media (prefers-reduced-motion:reduce){.group:has(:focus-visible) .animated-border,.group:hover .animated-border{background:var(--bolt-grad);animation:none}}@keyframes spin-border{to{--border-angle:360deg}}