.ripple-button{contain:strict;transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease;position:relative;overflow:hidden}.ripple-fill{position:absolute;top:var(--mouse-y);left:var(--mouse-x);width:0;height:0;pointer-events:none;z-index:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.05) 0,rgba(255,255,255,.1) 10%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.75) 75%,white 100%);mix-blend-mode:screen;will-change:transform,opacity;animation:ripple-wave 3s ease-out forwards}.ripple-fill,.ripple-fill.reverse{transform:translate3d(-50%,-50%,0)}.ripple-fill.reverse{width:400px;height:400px;opacity:.4;z-index:2;animation:ripple-reverse 1.2s ease-in forwards;background:radial-gradient(circle,rgba(0,0,0,.25) 0,rgba(0,0,0,.45) 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.1) 90%,transparent 100%);mix-blend-mode:normal}@keyframes ripple-wave{0%{width:0;height:0;opacity:1}70%{opacity:.8}to{width:400px;height:400px;opacity:0}}@keyframes ripple-reverse{0%{width:400px;height:400px;opacity:.25}to{width:0;height:0;opacity:0}}.ripple-fill,.ripple-fill.reverse{animation-fill-mode:forwards;backface-visibility:hidden;transform:translate3d(-50%,-50%,0)}