@import "https://unpkg.com/normalize.css";
@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf)}@layer demo{.header-title .words,.header-title .word,.header-title .char,.header-title .char:before,.header-title .char:after{transform-style:preserve-3d;display:inline-block}.header-title{flex-direction:column;gap:1rem;transition:transform .5s;display:flex}.header-title p{--font-level:4;vertical-align:baseline;color:#fff;width:fit-content;margin:0;padding:4px;font-family:Geist Sans,sans-serif;font-weight:400;line-height:1;text-decoration:none}.header-title p .char{--duration:5.2s;--delay:calc((sin((var(--char-index)/var(--char-total))*90deg)*(var(--duration)*.15)) - (var(--idx)*-1.25s));animation:flip var(--duration)var(--delay)infinite ease;color:#0000;vertical-align:middle;height:.9lh;line-height:1;display:inline-block;position:relative}.header-title p .char:after,.header-title p .char:before{color:#fff;content:attr(data-char);width:100%;height:1lh;animation:fade var(--duration)var(--delay)infinite ease;position:absolute;top:50%;left:50%}.header-title p .char:before{transform-origin:50%;opacity:0;--opacity:1;transform:rotateX(-90deg)translateZ(.45lh)}.header-title p .char:after{transform:translateZ(.45lh)}@keyframes flip{25%,to{transform:rotateX(90deg)}}@keyframes fade{30%,to{opacity:var(--opacity,0)}}.header-title p:first-of-type{--idx:0}.header-title p:nth-of-type(2){--idx:1}.header-title p:nth-of-type(3){--idx:2}.header-title p:nth-of-type(4){--idx:3}}