*{box-sizing:border-box;transition:all .15s ease 0s}:root{--movement: .85;--stop: .5;--duration: calc((var(--movement) * (1 / var(--stop))));--stagger: .1125;--perspective: 500;--size: 50;--ease: cubic-bezier(1, -.52, .26, .89);--bg: #e6e6e6;--color: #f2f2f2;--hue: 320;--saturation: 100;--lightness: 50}@media(prefers-color-scheme:dark){:root{--bg: #1a1a1a}}body{align-items:center;background:var(--bg);display:flex;justify-content:center;min-height:100vh;overflow:hidden}.scene{perspective:calc(var(--perspective) * 1px)}.word{display:flex;transform:translate(calc(var(--size) * .7px)) rotateX(-30deg) rotateY(45deg);transform-style:preserve-3d}.letter__wrap{animation:jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;transform-origin:bottom center;transform-style:preserve-3d}.letter__wrap .letter{animation:rotate calc(var(--duration) * 2s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite}@property --hue{syntax: "<number>"; inherits: false; initial-value: 0;}.letter{color:var(--color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:2rem;font-weight:700;height:calc(var(--size) * 1px);margin-right:calc(var(--size) * .2px);position:relative;text-transform:uppercase;transform-style:preserve-3d;width:calc(var(--size) * 1px)}.letter__shadow{--bg: radial-gradient(hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%)), transparent) 150% 150%;animation:scale calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite,party calc(var(--duration) * .5s) calc((var(--stagger, 0) * var(--index, 0)) * 1s - 7s) linear infinite;background:var(--bg);height:calc(var(--size) * 1px);margin-right:calc(var(--size) * .2px);width:calc(var(--size) * 1px);transform-origin:center;filter:blur(8px);transform:rotateX(90deg) translateZ(calc(var(--size) * -.5px))}.letter__panel{--bg: hsl(var(--hue), 100%, 15%);animation:party calc(var(--duration) * .5s) calc((var(--stagger, 0) * var(--index, 0)) * 1s - 7s) linear infinite;align-items:center;background:var(--bg);border:5px hsl(var(--hue),calc(var(--saturation) * 1%),calc(var(--lightness) * 1%)) solid;display:flex;height:calc(var(--size) * 1px);justify-content:center;left:50%;position:absolute;top:50%;width:calc(var(--size) * 1px)}.letter__panel:nth-of-type(1){transform:translate3d(-50%,-50%,0) translateZ(calc(var(--size) * .5px))}.letter__panel:nth-of-type(2){transform:translate3d(-50%,-50%,0) rotateX(90deg) translateZ(calc(var(--size) * .5px))}.letter__panel:nth-of-type(3){transform:translate3d(-50%,-50%,0) rotateX(180deg) translateZ(calc(var(--size) * .5px))}.letter__panel:nth-of-type(4){transform:translate3d(-50%,-50%,0) rotateX(-90deg) translateZ(calc(var(--size) * .5px))}.letter__panel:nth-of-type(5){transform:translate3d(-50%,-50%,0) rotateY(-90deg) translateZ(calc(var(--size) * .5px))}.word__shadow{display:flex;position:absolute;left:0;bottom:0;transform-style:preserve-3d}@keyframes rotate{0%,15%{transform:rotateX(0)}20%,65%{transform:rotateX(270deg)}70%,to{transform:rotateX(540deg)}}@keyframes jump{0%,50%,to{transform:scaleX(1) scaleY(1) translate(0)}15%{transform:scaleX(1.2) scaleY(.8) translate(0)}25%{transform:scaleX(.9) scaleY(1.1) translateY(-100%)}}@keyframes scale{0%,20%,50%,to{transform:rotateX(90deg) translateZ(calc(var(--size) * -.5px)) scale(1)}25%{transform:rotateX(90deg) translateZ(calc(var(--size) * -.5px)) scale(1.25)}}@keyframes party{to{--hue: 360}}