@property --holo-x{syntax: "<percentage>"; inherits: true; initial-value: 0%;}.holo-border{--holo: linear-gradient(90deg, var(--tcg-pink-from), #ffd28f, #9ff0d6, #9fc2ff, var(--tcg-pink-to), var(--tcg-pink-from));position:relative;isolation:isolate}.holo-border:before,.holo-border__glow i{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--holo) var(--holo-x) 0 / 200% 100% repeat-x;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}.holo-border:before{padding:1px;pointer-events:none;opacity:0;transition:opacity .25s}.holo-border__glow{position:absolute;inset:-3px;z-index:-1;border-radius:calc(var(--radius) + 3px);pointer-events:none;opacity:0;filter:blur(7px);transition:opacity .25s}.holo-border__glow i{padding:4px}.holo-border:hover,.holo-border:focus-visible{border-color:transparent}.holo-border:hover:before,.holo-border:focus-visible:before,.holo-border:hover .holo-border__glow i,.holo-border:focus-visible .holo-border__glow i{animation:holo-border-loop 3s linear infinite}.holo-border:hover:before,.holo-border:focus-visible:before{opacity:1}.holo-border:hover .holo-border__glow,.holo-border:focus-visible .holo-border__glow{opacity:.55}@keyframes holo-border-loop{to{--holo-x: 200%}}@media(prefers-reduced-motion:reduce){.holo-border:hover:before,.holo-border:focus-visible:before,.holo-border:hover .holo-border__glow i,.holo-border:focus-visible .holo-border__glow i{animation:none}}
