*{box-sizing:border-box}body,html{height:100vh;overflow:hidden;background:transparent}#app{display:flex;justify-content:center;align-items:flex-end;padding-bottom:3rem;height:100vh}.video{position:absolute;top:0;left:0}.dialogue{max-height:50%;min-height:300px;min-width:1024px;width:60%}.dialogue,.dialogue-blobs{position:relative;display:flex}.dialogue-blobs{width:100%;flex-direction:column;align-items:center;justify-content:stretch;filter:url(#fancy-goo);transform:scale(0);animation:scale-up .6s cubic-bezier(.34,1.56,.64,1) 1s 1 normal forwards}.dialogue-blob-top{top:0;width:100%;height:75%;border-radius:40% 40% 30% 30%/150% 150% 150% 150%;animation:blob 1.5s cubic-bezier(.37,0,.63,1) .3s infinite alternate}.dialogue-blob-bottom,.dialogue-blob-top{position:absolute;background-color:#fdf8e3;transform-origin:center}.dialogue-blob-bottom{bottom:0;width:94%;height:40%;border-radius:5% 5% 20% 20%/100% 100% 100% 100%;animation:blob 1s cubic-bezier(.37,0,.63,1) infinite alternate}.dialogue-character-wrap{position:absolute;animation:character .6s cubic-bezier(.37,0,.63,1) infinite alternate}.dialogue-character{display:inline-block;margin-right:auto;padding:.5rem 2rem;font-family:Varela Round,sans-serif;font-size:2rem;color:#482016;background-color:#dd8530;border-radius:30%/100% 100% 120% 120%;transform:perspective(2rem) rotateX(1deg) rotate(-9deg) translateX(20%) translateY(-45%) scale(0);animation:fade-character .3s cubic-bezier(.34,1.56,.64,1) 1s 1 normal forwards}.dialogue-text{position:absolute;width:100%;padding:1em 1em 2em 1.5em;font-family:Hind,sans-serif;font-weight:700;font-size:3rem;line-height:1.5em;color:#807256}.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.arrow{position:absolute;bottom:0;left:50%;opacity:0;animation:arrow .2s cubic-bezier(.37,0,.63,1) 4.5s infinite alternate}@keyframes blob{0%{transform:rotate(.3deg) scale(1)}to{transform:rotate(-.3deg) scale(.99)}}@keyframes character{0%{transform:translateY(0)}to{transform:translateY(3px)}}@keyframes scale-up{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-character{0%{transform:perspective(2rem) rotateX(1deg) rotate(0deg) translateX(20%) translateY(-45%) scale(.8);opacity:0}to{transform:perspective(2rem) rotateX(1deg) rotate(-6deg) translateX(20%) translateY(-45%) scale(1);opacity:1}}@keyframes arrow{0%{transform:translateY(33%) translateX(-50%) scale(1);opacity:1}to{transform:translateY(50%) translateX(-50%) scale(.9);opacity:1}}