.interactive-grid{position:relative;background-color:#000;overflow:hidden;--x:50%;--y:50%;--opacity:0}.interactive-grid::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,rgba(108,197,235,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(108,197,235,.1) 1px,transparent 1px);background-size:45px 45px;z-index:0;pointer-events:none}.interactive-grid::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,rgba(108,197,235,.6) 1px,transparent 1px),linear-gradient(to bottom,rgba(108,197,235,.6) 1px,transparent 1px);background-size:45px 45px;z-index:1;pointer-events:none;-webkit-mask-image:radial-gradient(circle 120px at var(--x) var(--y),black 0%,transparent 100%);mask-image:radial-gradient(circle 120px at var(--x) var(--y),black 0%,transparent 100%);opacity:var(--opacity);transition:opacity .2s ease}.grid-ripple{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:color-dodge;background:radial-gradient(circle,rgba(0,0,0,0) 0%,rgba(108,197,235,.6) 50%,rgba(0,0,0,0) 70%);animation:ripple-expand 2s ease-out forwards}