.counter-container{position:relative;display:inline-block}.counter-counter{display:flex;line-height:1}.counter-counter,.counter-digit{overflow:hidden;position:relative}.counter-digit{width:1ch;font-variant-numeric:tabular-nums}.counter-number{display:flex;align-items:center;justify-content:center}.counter-number,.gradient-container{position:absolute;top:0;right:0;bottom:0;left:0}.gradient-container{pointer-events:none}.bottom-gradient{position:absolute;bottom:0;width:100%}.top-gradient{position:absolute;top:0;width:100%}:root{--color-1:#22c55e;--color-2:#10b981;--color-3:#34d399;--color-4:#86efac}.gooey-button-container{position:relative;display:inline-block;width:100%}.gooey-button{position:relative;padding:1rem 3rem;border:none;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;text-transform:uppercase;letter-spacing:1px;z-index:3;width:100%}.gooey-button.clocked-out{background:linear-gradient(135deg,#22c55e,#16a34a);color:white;box-shadow:0 4px 15px rgba(34,197,94,.4)}.gooey-button.clocked-in{background:linear-gradient(135deg,#3b82f6,#2563eb);color:white;box-shadow:0 4px 15px rgba(59,130,246,.4)}.gooey-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.5)}.gooey-button:active{transform:translateY(0)}.effect{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200%;height:200%;opacity:1;pointer-events:none;display:grid;place-items:center;z-index:1}.effect.filter{filter:blur(1px);mix-blend-mode:lighten}.effect.filter:before{content:"";position:absolute;inset:-75px;z-index:-2;background:transparent}.particle,.point{display:block;opacity:0;width:2px;height:2px;border-radius:100%;transform-origin:center;box-shadow:0 0 3px currentColor}.particle{--time:5s;position:absolute;top:calc(50% - 1px);left:calc(50% - 1px);animation:particle calc(var(--time)) ease 1 -.35s}.point{background:var(--color);opacity:1;animation:point calc(var(--time)) ease 1 -.35s}@keyframes particle{0%{transform:rotate(0deg) translate(calc(var(--start-x)),calc(var(--start-y)));opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}70%{transform:rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2),calc(var(--end-y) * 1.2));opacity:1;animation-timing-function:ease}85%{transform:rotate(calc(var(--rotate) * .66)) translate(calc(var(--end-x)),calc(var(--end-y)));opacity:1}to{transform:rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5),calc(var(--end-y) * .5));opacity:1}}@keyframes point{0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}25%{transform:scale(calc(var(--scale) * .25))}38%{opacity:1}65%{transform:scale(var(--scale));opacity:1;animation-timing-function:ease}85%{transform:scale(var(--scale));opacity:1}to{transform:scale(0);opacity:0}}