@property --hole-alpha{syntax:"<number>";inherits:false;initial-value:.4}@property --background-color{syntax:"<color>";inherits:false;initial-value:#0006}@property --conic-highlight{syntax:"<color>";inherits:true;initial-value:#ffffff80}.glass-box{--mouse-x:-9999px;--mouse-y:-9999px;--hole-alpha:var(--background-opacity);will-change:transform;width:var(--width);height:var(--height);border-radius:var(--border-radius);background:radial-gradient(calc(var(--height) * 1.2) circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--background-color) calc(var(--hole-alpha) / var(--background-opacity) * 100%), transparent) 0%, var(--background-color) 100%);transition:transform .35s cubic-bezier(.34,3,.64,1),--hole-alpha .3s,--background-color .1s,--conic-highlight .1s;transform:translateZ(0)scale(1)}.glass-box:hover{transform:translateZ(0) scale(var(--hover-scale,1));--hole-alpha:calc(var(--background-opacity) * .6)}.glass-box:after{content:"";border-radius:inherit;background:radial-gradient(calc(var(--height) * .8) circle at var(--mouse-x) var(--mouse-y), #ffffffe6, transparent 100%), conic-gradient(from 45deg, var(--conic-transparent) 0deg, var(--conic-highlight) 90deg, var(--conic-transparent) 180deg, var(--conic-highlight) 270deg, var(--conic-transparent) 360deg);-webkit-mask-composite:destination-out;pointer-events:none;z-index:3;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}