:root{--linear-ease: linear( 0, .068, .19 2.7%, .804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, .996 28%, .949, .928 33.3%, .926, .933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%, .995 68%, 1.001 85%, 1 );--color-1: white;--color-2: white;--color-3: white;--color-4: white}.gooey-nav-container{position:relative;background:#0f172ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:100vw;padding:.5em 1em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.gooey-nav-light{background:#f1f5f9d9;--color-1: #1e293b;--color-2: #334155;--color-3: #475569;--color-4: #1e293b}.gooey-nav-container nav{display:flex;position:relative;transform:translateZ(.01px)}.gooey-nav-container nav ul{display:flex;gap:2em;list-style:none;padding:0 1em;margin:0;position:relative;z-index:3;color:#fff;text-shadow:0 1px 1px hsl(205deg 30% 10% / .2)}.gooey-nav-light nav ul{color:#1e293b;text-shadow:none}.gooey-nav-container nav ul li{border-radius:100vw;position:relative;cursor:pointer;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease;box-shadow:0 0 .5px 1.5px transparent;color:#fff}.gooey-nav-light nav ul li{color:#1e293b}.gooey-nav-container nav ul li a{display:inline-block;padding:.6em 1em;text-decoration:none;color:inherit}.gooey-nav-container nav ul li:focus-within:has(:focus-visible){box-shadow:0 0 .5px 1.5px #fff}.gooey-nav-light nav ul li:focus-within:has(:focus-visible){box-shadow:0 0 .5px 1.5px #1e293b}.gooey-nav-container nav ul li:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px;background:#fff;opacity:0;transform:scale(0);transition:all .3s ease;z-index:-1}.gooey-nav-container nav ul li.active{color:#000;text-shadow:none}.gooey-nav-light nav ul li.active{color:#fff}.gooey-nav-light nav ul li:after{background:#1e293b}.gooey-nav-container nav ul li.active:after{opacity:1;transform:scale(1)}.gooey-nav-container .effect{position:absolute;left:0;top:0;width:0;height:0;opacity:1;pointer-events:none;display:grid;place-items:center;z-index:1}.gooey-nav-container .effect.text{color:#fff;transition:color .3s ease}.gooey-nav-container .effect.text.active{color:#000}.gooey-nav-light .effect.text{color:#1e293b}.gooey-nav-light .effect.text.active{color:#fff}.gooey-nav-container .effect.filter{filter:blur(3px) contrast(20);mix-blend-mode:lighten;opacity:.6}.gooey-nav-container .effect.filter:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;transform:scale(0);opacity:0;z-index:-1;border-radius:100vw}.gooey-nav-light .effect.filter:after{background:#1e293b}.gooey-nav-container .effect.active:after{animation:pill .3s ease both}@keyframes pill{to{transform:scale(1);opacity:1}}.particle,.point{display:block;opacity:0;width:20px;height:20px;border-radius:100%;transform-origin:center}.particle{--time: 5s;position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);animation:particle calc(var(--time)) ease 1 -.35s}.point{background:var(--color);opacity:.7;animation:point calc(var(--time)) ease 1 -.35s}@keyframes particle{0%{transform:rotate(0) 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}}.liquid-ether-container{position:relative;overflow:hidden;width:100%;height:100%;touch-action:none}#infinite-grid-menu-canvas{cursor:grab;width:100%;height:100%;overflow:hidden;position:relative;outline:none}#infinite-grid-menu-canvas:active{cursor:grabbing}.action-button{position:absolute;left:50%;z-index:10;width:60px;height:60px;display:grid;place-items:center;background:#6366f1;border:none;border-radius:50%;cursor:pointer;border:4px solid white;box-shadow:0 4px 12px #0000004d}.face-title{-webkit-user-select:none;user-select:none;position:absolute;font-weight:900;font-size:3rem;left:1.6em;top:50%;color:inherit;text-shadow:0 2px 8px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.1)}.action-button-icon{-webkit-user-select:none;user-select:none;position:relative;color:#fff;top:0;font-size:26px;line-height:1}.face-title{position:absolute;top:50%;transform:translate(20%,-50%)}.face-title.active{opacity:1;transform:translate(20%,-50%);pointer-events:auto;transition:.5s ease}.face-title.inactive{pointer-events:none;opacity:0;transition:.1s ease}.face-description{-webkit-user-select:none;user-select:none;position:absolute;max-width:20ch;top:50%;font-size:1.2rem;right:5%;transform:translateY(-50%);color:inherit;text-align:right;text-shadow:0 2px 8px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.1);font-weight:500}.face-description.active{opacity:1;transform:translateY(-50%);pointer-events:auto;transition:.5s ease}.face-description.inactive{pointer-events:none;transform:translate(20%,-50%);opacity:0;transition:.1s ease}.action-button{position:absolute;left:50%;bottom:20%}.action-button.active{bottom:15%;transform:translate(-50%) scale(1);opacity:1;pointer-events:auto;transition:.5s ease}.action-button.inactive{bottom:-80px;transform:translate(-50%) scale(0);opacity:0;pointer-events:none;transition:.1s ease}.tech-stack{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:3.2em;margin-top:4rem;transform:translate(20%);display:flex;flex-wrap:wrap;gap:.5rem;max-width:30ch}.tech-tag{display:inline-block;padding:.4rem .8rem;font-size:.85rem;font-weight:600;border-radius:.5rem;background:#6366f126;color:#6366f1;border:1.5px solid rgba(99,102,241,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:none;transition:all .3s ease}.tech-tag:hover{background:#6366f140;border-color:#6366f180;transform:translateY(-2px)}.tech-stack.active{opacity:1;transform:translate(20%);pointer-events:auto;transition:.5s ease .1s}.tech-stack.inactive{pointer-events:none;opacity:0;transform:translate(20%,10px);transition:.1s ease}@media(max-width:1024px){.face-title,.face-description,.tech-stack{display:none}}
