.wordmark .dot{position:relative;display:inline-block;isolation:isolate;z-index:0;color:var(--accent);--breath:4.5s}
.wordmark .dot::before,.wordmark .dot::after{content:".";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.wordmark .dot::before{color:#1fc9c4}
.wordmark .dot::after{color:#e7336b}
body.is-split .wordmark .dot::before,body.is-split .wordmark .dot::after{opacity:1;transition-duration:.16s}
body.is-split.is-returning .wordmark .dot::before,body.is-split.is-returning .wordmark .dot::after{opacity:0;transition:transform .65s cubic-bezier(.16,.7,.2,1),opacity .65s ease}
body.is-split .wordmark .dot::before{transform:translate(calc(var(--dx,0em)*-1),calc(var(--dy,0em)*-1))}
body.is-split .wordmark .dot::after{transform:translate(var(--dx,0em),var(--dy,0em))}
body:not(.is-split) .wordmark .dot::before{animation:dot-idle-a var(--breath) ease-in-out infinite}
body:not(.is-split) .wordmark .dot::after{animation:dot-idle-b var(--breath) ease-in-out infinite}
@media(hover:hover){.wordmark .dot{--breath:3s}}
@keyframes dot-idle-a{0%,80%,100%{opacity:0;transform:translate(0,0)}88%{opacity:1;transform:translate(-.038em,.012em)}95%{opacity:.5;transform:translate(-.012em,.004em)}}
@keyframes dot-idle-b{0%,80%,100%{opacity:0;transform:translate(0,0)}88%{opacity:1;transform:translate(.038em,-.012em)}95%{opacity:.5;transform:translate(.012em,-.004em)}}
@media(prefers-reduced-motion:reduce){.wordmark .dot::before,.wordmark .dot::after{animation:none!important;opacity:0!important;transform:none!important}}