.scene{z-index:2;place-items:center;height:100vh;display:grid;position:relative}.cube-wrapper{animation:2s infinite bouncing}.cube,.cube-wrapper{transform-style:preserve-3d}.cube{animation:2s infinite rotation;transform:rotateX(45deg)rotate(45deg)}.cube-faces{transform-origin:0 0;height:80px;transform-style:preserve-3d;width:80px;position:relative;transform:translate(0)translateY(0)translateZ(-40px)}.cube-face{background:#0041c3;border:1px solid #fff;position:absolute;inset:0}.cube-face.shadow{animation:2s infinite bouncing-shadow;transform:translateZ(-80px)}.cube-face.top{transform:translateZ(80px)}.cube-face.front{transform-origin:0;transform:rotateY(-90deg)}.cube-face.back{transform-origin:0;transform:rotateY(-90deg)translateZ(-80px)}.cube-face.right{transform-origin:50% 0;transform:rotateX(-90deg)translateY(-80px)}.cube-face.left{transform-origin:50% 0;transform:rotateX(-90deg)translateY(-80px)translateZ(80px)}@keyframes rotation{0%{animation-timing-function:cubic-bezier(.17,.84,.44,1);transform:rotateX(45deg)rotateY(0)rotate(45deg)}50%{animation-timing-function:cubic-bezier(.76,.05,.86,.06);transform:rotateX(45deg)rotateY(0)rotate(225deg)}to{animation-timing-function:cubic-bezier(.17,.84,.44,1);transform:rotateX(45deg)rotateY(0)rotate(405deg)}}@keyframes bouncing{0%{animation-timing-function:cubic-bezier(.76,.05,.86,.06);transform:translateY(-40px)}45%{animation-timing-function:cubic-bezier(.23,1,.32,1);transform:translateY(40px)}to{animation-timing-function:cubic-bezier(.76,.05,.86,.06);transform:translateY(-40px)}}@keyframes bouncing-shadow{0%{opacity:.05;animation-timing-function:cubic-bezier(.76,.05,.86,.06);transform:translateZ(-80px)scale(1.3)}45%{opacity:.3;animation-timing-function:cubic-bezier(.23,1,.32,1);transform:translateZ(0)}to{opacity:.05;animation-timing-function:cubic-bezier(.76,.05,.86,.06);transform:translateZ(-80px)scale(1.3)}}