@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*{box-sizing:border-box}body{font-family:Lato,sans-serif;margin:0;padding:0}.page{height:100vh;overflow:auto}.text{align-items:center;color:#fff;display:flex;font-size:3rem;height:100vh;justify-content:center;overflow:hidden;text-align:center;width:100vw}@media(min-width:768px){.text{font-size:5rem}}.text:nth-child(n){background:#7e05d7}.text:nth-child(2n){background:#f21e56}.text:nth-child(3n){background:#bd04a9}.text .char{display:inline-block;animation-delay:calc(.25s + var(--char-index) * .1s);transition:all .25s calc(.25s + var(--char-index) * .1s)}.text--enter [data-scroll=out] .char{opacity:0;transform:translateY(-150%)}.text--enter .char{opacity:1;transform:translate(0)}.text--random [data-scroll=out] .char:nth-of-type(1){transform:translate(-195%) translateY(144%)}.text--random [data-scroll=out] .char:nth-of-type(2){transform:translate(-45%) translateY(248%)}.text--random [data-scroll=out] .char:nth-of-type(3){transform:translate(-197%) translateY(34%)}.text--random [data-scroll=out] .char:nth-of-type(4){transform:translate(-183%) translateY(196%)}.text--random [data-scroll=out] .char:nth-of-type(5){transform:translate(116%) translateY(-115%)}.text--random [data-scroll=out] .char:nth-of-type(6){transform:translate(-109%) translateY(56%)}.text--swapsies [data-scroll=in] .char:nth-of-type(odd),.text--swapsies [data-scroll=out] .char:nth-of-type(odd){transform:translate(100%)}.text--swapsies [data-scroll=in] .char:nth-of-type(2n),.text--swapsies [data-scroll=out] .char:nth-of-type(2n){transform:translate(-100%)}.text--swapsies [data-scroll=in] .char{animation-duration:.5s;animation-fill-mode:forwards}.text--swapsies [data-scroll=in] .char:nth-of-type(odd){animation-name:swap-left}.text--swapsies [data-scroll=in] .char:nth-of-type(2n){animation-name:swap-right}@keyframes swap-right{25%{transform:translate(-100%) translateY(-100%)}75%{transform:translate(0) translateY(-100%)}to{transform:translate(0) translateY(0)}}@keyframes swap-left{25%{transform:translate(100%) translateY(100%)}75%{transform:translate(0) translateY(100%)}to{transform:translate(0) translateY(0)}}.text--fading [data-scroll=out] .char{opacity:0}.text--flipping [data-scroll=out] .char{transform:rotateY(180deg)}.text--slide .char{transition-delay:calc((var(--char-total) - var(--char-index)) * .1s)}.text--slide [data-scroll=out] .char{opacity:0;transform:translate(-300%) skew(20deg)}.text--karaoke .char,.text--filling .char{position:relative}.text--karaoke .char:after,.text--filling .char:after{content:attr(data-char);position:absolute;top:0;left:0;transition:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none}.text--karaoke .char{color:#ffffff26;transition-duration:.1s}.text--karaoke .char:after{color:#fff}.text--karaoke [data-scroll=in] .char:after{clip-path:inset(0 0 0 0)}.text--karaoke [data-scroll=out] .char:after{clip-path:inset(0 100% 0 0)}.text--filling .char{color:#ffffff26}.text--filling .char:after{color:#fff}.text--filling [data-scroll=in] .char:after{clip-path:inset(0 0 0 0)}.text--filling [data-scroll=out] .char:after{clip-path:inset(100% 0 0 0)}.text--blocks [data-scroll=out] .char{visibility:hidden}.text--blocks [data-scroll=in]{overflow:hidden;position:relative}.text--blocks [data-scroll=in] .char{transition-delay:.5s}.text--blocks [data-scroll=in]:after{content:"";height:100%;width:100%;position:absolute;inset:0;background:#fff;animation:block .5s .25s both}@keyframes block{0%{transform:translate(-110%)}45%,55%{transform:translate(0)}to{transform:translate(110%)}}.text--scaling [data-scroll=out] .char{transform:scale(0)}.text--turning [data-scroll=out] .char{transform:rotateY(90deg)}.text--folding [data-scroll=out] .char{transform:rotateX(90deg);transform-origin:bottom}.text--bulge [data-scroll=in] .char{animation-name:bulge;animation-duration:.25s}@keyframes bulge{50%{transform:scale(1.5)}}.text--perspective{perspective:1000px}.text--perspective .char{transition:transform .25s calc(.25s + var(--char-index) * .1s),opacity .05s calc(.25s + var(--char-index) * .1s)}.text--perspective [data-scroll=out] .char{opacity:0;transform:translate3d(-25px,-20px,-800px)}.text--zipping .char{transition:transform .25s calc(.25s + var(--char-index) * .1s),opacity .05s calc(.25s + var(--char-index) * .1s)}.text--zipping [data-scroll=out] .char{opacity:0}.text--zipping [data-scroll=out] .char:nth-of-type(odd){transform:translateY(-100%)}.text--zipping [data-scroll=out] .char:nth-of-type(2n){transform:translateY(100%)}.text--spinning [data-scroll=out] .char{transform:rotateY(-360deg)}.text--tumbling .char{transition-delay:calc((var(--char-total) - var(--char-index)) * .1s)}.text--tumbling [data-scroll=out] .char{opacity:0;transform:translate(-300%,-50%) rotate(1080deg) scale(0)}.text--bubbling .char{transition-timing-function:cubic-bezier(.75,-2,.75,2)}.text--bubbling .char:nth-of-type(1){transition-delay:.6s}.text--bubbling .char:nth-of-type(2){transition-delay:.5s}.text--bubbling .char:nth-of-type(3){transition-delay:.4s}.text--bubbling .char:nth-of-type(4){transition-delay:.5s}.text--bubbling .char:nth-of-type(5){transition-delay:.7s}.text--bubbling .char:nth-of-type(6){transition-delay:.6s}.text--bubbling .char:nth-of-type(7){transition-delay:.6s}.text--bubbling .char:nth-of-type(8){transition-delay:.3s}.text--bubbling [data-scroll=out] .char{transform:scale(.5)}.text--swinging .char{transform-origin:calc((var(--char-total) - var(--char-index)) * 100%) -100%;transition-delay:calc((var(--char-total) - var(--char-index)) * .1s)}.text--swinging [data-scroll=out] .char{opacity:0;transform:rotate(90deg)}.text--rolling .char{transition:transform 1s,opacity .2s;transition-delay:calc((var(--char-total) - var(--char-index)) * .1s)}.text--rolling [data-scroll=out] .char{opacity:0;transform:translate(-500%) scale(0) rotate(-1440deg)}.text--blowing .char{animation-duration:1s;animation-fill-mode:both;transform-origin:left bottom;animation-delay:calc(var(--char-index) * 25ms)}.text--blowing [data-scroll=in] .char{animation-name:blowing}@keyframes blowing{50%,60%,70%{transform:skew(-35deg)}55%,65%,75%{transform:skew(-40deg)}}.text--meeting .char{transition-delay:calc((var(--char-total) - var(--char-index)) * .1s)}.text--meeting .char:nth-of-type(2n){transform-origin:top right}.text--meeting .char:nth-of-type(odd){transform-origin:bottom left}.text--meeting [data-scroll=out] .char{transform:rotate(180deg)}.text--conveyor [data-scroll=in] .char{transform-origin:left bottom;animation:convey 1s both linear;animation-delay:calc((var(--char-total) - var(--char-index)) * .15s);transition:none}@keyframes convey{0%{transform:translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%)) rotate(-180deg) translate(calc((var(--char-total) - var(--char-index)) * -100%))}40%{transform:translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%)) rotate(-180deg) translate(0)}50%{transform:translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%)) rotate(0) translate(0)}to{transform:translate(0) rotate(0) translate(0)}}
