.textani{align-items:center;background-color:var(--color);display:flex;font-family:"Lexend Deca",sans-serif;overflow:hidden;perspective:1000px;scroll-snap-align:start}*{box-sizing:border-box}.word{margin-right:5px}.char,.word{-webkit-animation-delay:var(--del);animation-delay:var(--del);-webkit-animation-direction:var(--dir,normal);animation-direction:var(--dir,normal);-webkit-animation-duration:var(--dur);animation-duration:var(--dur);-webkit-animation-iteration-count:var(--it,infinite);animation-iteration-count:var(--it,infinite);-webkit-animation-name:var(--name);animation-name:var(--name);-webkit-animation-timing-function:var(--tf);animation-timing-function:var(--tf);-webkit-animation-fill-mode:var(--fill,forwards);animation-fill-mode:var(--fill,forwards);display:inline-block;position:relative;transform-origin:50% 100%;z-index:1}.textani--fall .char{--name:fall;--dur:600ms;--del:calc(var(--char-index) * -0.05s);--tf:cubic-bezier(0.165, 0.44, 0.64, 1)}@-webkit-keyframes fall{0%{transform:rotateY(-25deg)}25%{transform:translateY(2%) rotateY(25deg)}50%{transform:rotateY(-25deg)}75%{transform:translateY(4%) rotateY(25deg)}100%{transform:rotateY(-25deg)}}@keyframes fall{0%{transform:rotateY(-25deg)}25%{transform:translateY(2%) rotateY(25deg)}50%{transform:rotateY(-25deg)}75%{transform:translateY(4%) rotateY(25deg)}100%{transform:rotateY(-25deg)}}.textani--flip .char{--name:flip;--dur:4000ms;--del:calc(var(--char-index) * 0.075s);--tf:linear}@-webkit-keyframes flip{5%{transform:rotateX(1turn)}10%{transform:rotateX(2turn)}20%{transform:rotateX(3turn)}40%{transform:rotateX(4turn)}100%,70%{transform:rotateX(5turn)}}@keyframes flip{5%{transform:rotateX(1turn)}10%{transform:rotateX(2turn)}20%{transform:rotateX(3turn)}40%{transform:rotateX(4turn)}100%,70%{transform:rotateX(5turn)}}.textani--float .char{--name:float;--dur:2200ms;--del:calc(var(--char-index) * -0.5s);--tf:ease-in-out;--dir:alternate}.textani--float .char:nth-child(2n){--name:float-alt}@-webkit-keyframes float{from{transform:translate(2%,-10%) rotate(-1deg)}to{transform:translate(-2%,5%) rotate(3deg)}}@keyframes float{from{transform:translate(2%,-10%) rotate(-1deg)}to{transform:translate(-2%,5%) rotate(3deg)}}@-webkit-keyframes float-alt{from{transform:translate(0,-5%) rotate(-1deg)}to{transform:translate(2%,10%) rotate(3deg)}}@keyframes float-alt{from{transform:translate(0,-5%) rotate(-1deg)}to{transform:translate(2%,10%) rotate(3deg)}}.textani--jog .char{--name:jog;--dur:500ms;--del:calc(var(--char-index) * -0.025s);--tf:linear}@-webkit-keyframes jog{0%{transform:translate(0,0) rotate(5deg)}25%{transform:translate(5%,-5%) rotate(10deg)}50%{transform:translate(5%,0) rotate(15deg)}75%{transform:translate(10%,-5%) rotate(10deg)}100%{transform:translate(0,0) rotate(5deg)}}@keyframes jog{0%{transform:translate(0,0) rotate(5deg)}25%{transform:translate(5%,-5%) rotate(10deg)}50%{transform:translate(5%,0) rotate(15deg)}75%{transform:translate(10%,-5%) rotate(10deg)}100%{transform:translate(0,0) rotate(5deg)}}.textani--jump .char{--name:jump;--dur:800ms;--del:calc(var(--char-index) * 0.075s);--tf:cubic-bezier(0.165, 0.44, 0.64, 1)}@-webkit-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)}100%,80%{transform:translateY(0) scaleY(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)}100%,80%{transform:translateY(0) scaleY(1)}}.textani--twirl .char{--name:twirl;--dur:10000ms;--del:calc(var(--char-index) * 0.025s);--tf:linear}@-webkit-keyframes twirl{2.5%{transform:rotateY(1turn)}5%{transform:rotateY(2turn)}10%{transform:rotateY(3turn)}20%{transform:rotateY(4turn)}40%{transform:rotateY(5turn)}100%,70%{transform:rotateY(6turn)}}@keyframes twirl{2.5%{transform:rotateY(1turn)}5%{transform:rotateY(2turn)}10%{transform:rotateY(3turn)}20%{transform:rotateY(4turn)}40%{transform:rotateY(5turn)}100%,70%{transform:rotateY(6turn)}}@keyframes userf1{0%{color:#fff0}50%{color:#fff0}51%{color:#0f0}100%{color:#0f0}}@keyframes userf2{0%{color:#0f0}50%{color:#0f0}51%{color:#fff0}100%{color:#fff0}}