.project-media-viewport{position:relative}
.project-liquid-link{
  position:absolute;z-index:5;left:50%;bottom:28px;
  display:inline-flex;align-items:center;justify-content:center;
  width:160px;min-height:52px;padding:14px 24px;
  transform:translateX(-50%);overflow:hidden;isolation:isolate;
  border:1px solid #686868;border-radius:999px;
  background:#fff;color:#111;font:600 16px/1.2 var(--body);
  box-shadow:4px 5px 0 #0003,10px 12px 24px #0004;
  transition:box-shadow .35s ease,border-color .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.project-liquid-link::before{
  content:"";position:absolute;z-index:-1;left:50%;bottom:-1px;
  width:160%;height:300%;border-radius:50% 50% 0 0;
  background:#111;transform:translate(-50%,100%);
  transition:transform 1.05s cubic-bezier(.55,.04,.3,1);
  pointer-events:none;
}
.project-liquid-link span{position:relative;color:#fff;mix-blend-mode:difference}
.project-liquid-link:focus-visible{border-color:#111b;outline:3px solid var(--orange);outline-offset:5px}
.project-liquid-link:focus-visible::before{transform:translate(-50%,18%)}
@media(hover:hover) and (pointer:fine){
  .project-liquid-link:hover::before{transform:translate(-50%,18%)}
  .project-liquid-link:hover{border-color:#111b;box-shadow:5px 6px 0 #0003,12px 15px 26px #0005}
}
.project-liquid-link:active::before{transform:translate(-50%,18%)}
@media(max-width:620px){
  .project-liquid-link{bottom:16px;width:136px;min-height:44px;padding:11px 20px;font-size:14px;box-shadow:3px 4px 0 #0003,7px 9px 18px #0004}
}
@media(prefers-reduced-motion:reduce){.project-liquid-link,.project-liquid-link::before{transition:none}}