.platform-loader-shell{--size: 190px;margin:0;min-height:100vh;display:grid;place-items:center;background:#000000c5}.platform-loader-shell:hover .piece{transform:translateZ(calc(var(--z) + 6px))}.loader{position:relative;width:var(--size);height:var(--size);perspective:600px;animation:intro .6s ease-out}@keyframes intro{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.piece{position:absolute;width:100%;height:100%;transform-style:preserve-3d;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25));display:block;-o-object-fit:contain;object-fit:contain;background:transparent;transform-origin:center center;will-change:transform,opacity;backface-visibility:hidden}.loader:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(0,255,150,.08),transparent 70%);filter:blur(20px);z-index:-1}@keyframes fade{0%,to{opacity:.9}50%{opacity:1}}.p1{top:1%;left:10%;width:20%;height:20%;--z: 6px;animation:bounce 1.6s cubic-bezier(.25,.8,.25,1) infinite,fade 1.6s ease-in-out infinite;animation-delay:.8s}.p2{top:8%;left:30%;width:10%;height:10%;--z: 12px;--swap-x: -42px;--swap-y: 23px;animation:p2Swap 5.2s infinite;filter:blur(0px) drop-shadow(0 10px 16px rgba(0,0,0,.3))}.p3{top:20%;left:8%;width:10%;height:10%;--z: 4px;--swap-x: 42px;--swap-y: -23px;animation:p3Swap 5.2s infinite;filter:blur(.5px) drop-shadow(0 6px 10px rgba(0,0,0,.2))}.p4{bottom:65%;left:20%;width:20%;height:20%;--z: 10px;position:absolute;animation-delay:.7s;transform-style:preserve-3d;overflow:visible}.p4 .base{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;backface-visibility:hidden}.p4 .inner{position:absolute;top:50%;left:50%;width:50%;height:50%;-o-object-fit:contain;object-fit:contain;transform:translate(-50%,-50%);animation:sideFlip 2.4s cubic-bezier(.45,.05,.55,.95) infinite;pointer-events:none;backface-visibility:hidden;transform-style:preserve-3d}@media(prefers-reduced-motion:reduce){.piece,.p4 .inner{animation:none;transform:translateZ(0);opacity:1}}@keyframes bounce{0%{transform:translateY(0) translateZ(var(--z)) scale(1) rotate(0)}20%{transform:translateY(-6px) translateZ(calc(var(--z) + 6px)) scale(1.02) rotate(-.2deg)}40%{transform:translateY(-10px) translateZ(calc(var(--z) + 10px)) scale(1) rotate(.15deg)}60%{transform:translateY(-6px) translateZ(calc(var(--z) + 4px)) scale(.99) rotate(0)}to{transform:translateY(0) translateZ(var(--z)) scale(1) rotate(0)}}@keyframes p2Swap{0%{transform:translateZ(var(--z)) scale(1);opacity:.95}12%{transform:translate3d(0,-6px,calc(var(--z) + 6px)) scale(1.02)}24%{transform:translate3d(0,-10px,calc(var(--z) + 10px)) scale(1)}34%{transform:translateZ(var(--z)) scale(1);animation-timing-function:linear}50%{transform:translate3d(var(--swap-x),var(--swap-y),var(--z)) scale(1);animation-timing-function:cubic-bezier(.25,.8,.25,1)}62%{transform:translate3d(var(--swap-x),calc(var(--swap-y) - 6px),calc(var(--z) + 6px)) scale(1.02)}74%{transform:translate3d(var(--swap-x),calc(var(--swap-y) - 10px),calc(var(--z) + 10px)) scale(1)}84%{transform:translate3d(var(--swap-x),var(--swap-y),var(--z)) scale(1);animation-timing-function:linear}to{transform:translateZ(var(--z)) scale(1)}}@keyframes p3Swap{0%{transform:translateZ(var(--z)) scale(1);opacity:.95}12%{transform:translate3d(0,-6px,calc(var(--z) + 4px)) scale(1.02)}24%{transform:translate3d(0,-10px,calc(var(--z) + 8px)) scale(1)}34%{transform:translateZ(var(--z)) scale(1);animation-timing-function:linear}50%{transform:translate3d(var(--swap-x),var(--swap-y),var(--z)) scale(1);animation-timing-function:cubic-bezier(.25,.8,.25,1)}62%{transform:translate3d(var(--swap-x),calc(var(--swap-y) - 6px),calc(var(--z) + 4px)) scale(1.02)}74%{transform:translate3d(var(--swap-x),calc(var(--swap-y) - 10px),calc(var(--z) + 8px)) scale(1)}84%{transform:translate3d(var(--swap-x),var(--swap-y),var(--z)) scale(1);animation-timing-function:linear}to{transform:translateZ(var(--z)) scale(1)}}@keyframes sideFlip{0%{transform:translate(-50%,-50%) rotateY(0) scale(1)}15%{transform:translate(-50%,-50%) rotateY(80deg) scale(.96)}25%{transform:translate(-50%,-50%) rotateY(180deg) scale(1)}40%{transform:translate(-50%,-50%) rotateY(260deg) scale(.96)}50%{transform:translate(-50%,-50%) rotateY(360deg) scale(1)}to{transform:translate(-50%,-50%) rotateY(360deg) scale(1)}}
