*{box-sizing:border-box}html,body{height:100%}.container{max-height:100vh;overflow-y:scroll;position:relative;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}.headline{align-items:center;background-color:var(--color);display:flex;font-family:Lexend Deca,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:calc(1rem + 15vmin);height:100vh;justify-content:center;overflow:hidden;perspective:1000px;scroll-snap-align:start;width:100vw}.word,.char{animation-delay:var(--del);animation-direction:var(--dir, normal);animation-duration:var(--dur);animation-iteration-count:var(--it, infinite);animation-name:var(--name);animation-timing-function:var(--tf);animation-fill-mode:var(--fill, forwards);display:inline-block;position:relative;transform-origin:50% 100%;z-index:1}.headline--fall .char{--name:fall;--dur:.6s;--del:calc(var(--char-index) * -.05s);--tf:cubic-bezier(.165,.44,.64,1)}@keyframes fall{0%{transform:rotateY(-25deg)}25%{transform:translateY(2%) rotateY(25deg)}50%{transform:rotateY(-25deg)}75%{transform:translateY(4%) rotateY(25deg)}to{transform:rotateY(-25deg)}}.headline--flip .char{--name:flip;--dur:4s;--del:calc(var(--char-index) * 75ms);--tf:linear}@keyframes flip{5%{transform:rotateX(1turn)}10%{transform:rotateX(2turn)}20%{transform:rotateX(3turn)}40%{transform:rotateX(4turn)}70%,to{transform:rotateX(5turn)}}.headline--float .char{--name:float;--dur:2.2s;--del:calc(var(--char-index) * -.5s);--tf:ease-in-out;--dir:alternate}.headline--float .char:nth-child(2n){--name:float-alt }@keyframes float{0%{transform:translate(2%,-10%) rotate(-1deg)}to{transform:translate(-2%,5%) rotate(3deg)}}@keyframes float-alt{0%{transform:translateY(-5%) rotate(-1deg)}to{transform:translate(2%,10%) rotate(3deg)}}.headline--jog .char{--name:jog;--dur:.5s;--del:calc(var(--char-index) * -25ms);--tf:linear}@keyframes jog{0%{transform:translate(0) rotate(5deg)}25%{transform:translate(5%,-5%) rotate(10deg)}50%{transform:translate(5%) rotate(15deg)}75%{transform:translate(10%,-5%) rotate(10deg)}to{transform:translate(0) rotate(5deg)}}.headline--jump .char{--name:jump;--dur:.8s;--del:calc(var(--char-index) * 75ms);--tf:cubic-bezier(.165,.44,.64,1)}@keyframes jump{20%{transform:translateY(2%) scaleY(.9)}40%{transform:translateY(-100%) scaleY(1.2)}50%{transform:translateY(10%) scaleY(.8)}70%{transform:translateY(-5%) scaleY(1)}80%,to{transform:translateY(0) scaleY(1)}}.headline--twirl .char{--name:twirl;--dur:6s;--del:calc(var(--char-index) * 25ms);--tf:linear}@keyframes twirl{2.5%{transform:rotateY(1turn)}5%{transform:rotateY(2turn)}10%{transform:rotateY(3turn)}20%{transform:rotateY(4turn)}40%{transform:rotateY(5turn)}70%,to{transform:rotateY(6turn)}}@media (prefers-reduced-motion: reduce){.char{animation:none!important}}@media (prefers-reduced-motion: reduce){.is-split .headline .char{animation:var(--name) var(--dur) var(--tf) var(--it, infinite) var(--dir, normal)!important}}.headline .char{animation-duration:var(--dur, 1s)}@keyframes _wig{to{transform:translateY(-10%)}}.headline.debug .char{animation-name:_wig!important;animation-iteration-count:infinite}.headline .char{animation-play-state:running!important}