.chroma-grid{--x:50%;--y:50%;--r:250px;position:relative}.chroma-card{--mouse-x:50%;--mouse-y:50%;--spotlight-color:color-mix(in srgb,var(--card-color)20%,transparent);transition:transform .4s cubic-bezier(.175,.885,.32,1.275),border-color .4s,box-shadow .4s;position:relative}.chroma-card:hover{border-color:color-mix(in srgb,var(--card-color)60%,transparent);transform:translateY(-8px)}.chroma-card:before{content:"";background:radial-gradient(circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 70%);pointer-events:none;opacity:0;z-index:2;border-radius:inherit;transition:opacity .5s;position:absolute;inset:0}.chroma-card:hover:before{opacity:1}.chroma-card:hover .icon-box{border-color:color-mix(in srgb,var(--card-color)50%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--card-color)20%,transparent)}.chroma-card:hover .icon-svg{color:var(--card-color)}.chroma-overlay{pointer-events:none;z-index:3;-webkit-backdrop-filter:grayscale(.5)brightness(.9);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);background:#0003;position:absolute;inset:-20px}.chroma-fade{pointer-events:none;z-index:4;-webkit-backdrop-filter:grayscale(.5)brightness(.9);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);opacity:1;background:#0003;transition:opacity .25s;position:absolute;inset:-20px}