.magic-card{--glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:380px;--glow-color:132,0,255;--magic-border-color:rgba(15,148,143,.22);--magic-ease:cubic-bezier(0.4,0,0.2,1);transition:box-shadow .3s var(--magic-ease);contain:layout;transform:translateZ(0);backface-visibility:hidden}:where(.magic-card){border-radius:.5rem}.magic-card--light,html:not(.dark) .magic-card{--magic-border-color:rgba(15,148,143,.18)}.magic-card--border-glow .magic-card-glow-wrap{overflow:visible}.magic-card--border-glow .magic-card-glow-wrap:after{opacity:0;transition:opacity .35s var(--magic-ease)}.magic-card--border-glow:focus-within .magic-card-glow-wrap:after,.magic-card--border-glow:hover .magic-card-glow-wrap:after{opacity:.82}.magic-card--border-glow:focus-within,.magic-card--border-glow:hover{--glow-intensity:0.65;--glow-x:50%;--glow-y:40%}.magic-card-glow-wrap{position:relative;display:block;border-radius:inherit;overflow:hidden}.magic-card-glow-wrap:after{content:"";position:absolute;inset:0;padding:1px;background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),rgba(var(--glow-color),calc(var(--glow-intensity) * .42)) 0,rgba(var(--glow-color),calc(var(--glow-intensity) * .2)) 32%,transparent 58%);border-radius:inherit;box-sizing:border-box;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:1;transition:opacity .2s ease;z-index:1;clip-path:inset(0 0 1px 0)}.magic-card--light .magic-card-glow-wrap:after,html:not(.dark) .magic-card-glow-wrap:after{background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),rgba(var(--glow-color),calc(var(--glow-intensity) * .28)) 0,rgba(var(--glow-color),calc(var(--glow-intensity) * .12)) 42%,transparent 64%)}.magic-card--soft-glow{transition:box-shadow .45s var(--magic-ease)}.magic-card--soft-glow .magic-card-glow-wrap:after{transition:opacity .45s var(--magic-ease)}.magic-card--soft-glow.magic-card--border-glow:focus-within .magic-card-glow-wrap:after,.magic-card--soft-glow.magic-card--border-glow:hover .magic-card-glow-wrap:after{opacity:.38}.magic-card--soft-glow.magic-card--border-glow:focus-within,.magic-card--soft-glow.magic-card--border-glow:hover{--glow-intensity:0.34;--glow-radius:420px}html:not(.dark) .magic-card--soft-glow.magic-card--border-glow:focus-within .magic-card-glow-wrap:after,html:not(.dark) .magic-card--soft-glow.magic-card--border-glow:hover .magic-card-glow-wrap:after{background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),rgba(var(--glow-color),calc(var(--glow-intensity) * .18)) 0,rgba(var(--glow-color),calc(var(--glow-intensity) * .08)) 48%,transparent 72%)}.magic-card-particle,.magic-card-ripple{will-change:transform,opacity}