@keyframes cubes-animate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}@keyframes cubes-float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes cubes-floatReverse{0%,to{transform:translateY(0)}50%{transform:translateY(20px)}}.animated-cubes-container{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px;transform:skewY(-20deg) translateY(10px);will-change:opacity}.animated-cubes-container .cube{position:relative;z-index:2;animation:cubes-float 4s ease-in-out infinite}.animated-cubes-container .cube:nth-child(2){z-index:1;translate:-60px -60px;animation:cubes-floatReverse 3.5s ease-in-out infinite;animation-delay:.5s}.animated-cubes-container .cube:nth-child(3){z-index:3;translate:60px 60px;animation:cubes-float 4.5s ease-in-out infinite;animation-delay:1s}.animated-cubes-container .cube div{position:absolute;display:flex;flex-direction:column;gap:30px;translate:calc(-70px * var(--x)) calc(-60px * var(--y))}.animated-cubes-container .cube div span{position:relative;display:inline-block;width:50px;height:50px;background:#e5e7eb;z-index:calc(1 * var(--i));transition:1.5s}.dark .animated-cubes-container .cube div span{background:#374151}.animated-cubes-container .cube div span:hover{transition:0s;background:#4a6cf7;filter:drop-shadow(0 0 30px #4a6cf7)}.animated-cubes-container .cube div span:hover:before{transition:0s;background:#3b5bdb!important}.animated-cubes-container .cube div span:hover:after{transition:0s;background:#6366f1!important}.animated-cubes-container .cube div span:before{content:"";position:absolute;left:-40px;width:40px;height:100%;background:#f3f4f6;transform-origin:right;transform:skewY(45deg);transition:background 1.5s}.dark .animated-cubes-container .cube div span:before{background:#4b5563}.animated-cubes-container .cube div span:after{content:"";position:absolute;top:-40px;left:0;width:100%;height:40px;background:#f9fafb;transform-origin:bottom;transform:skewX(45deg);transition:background 1.5s}.dark .animated-cubes-container .cube div span:after{background:#6b7280}@media (max-width:768px){@keyframes cubes-floatMobile{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes cubes-floatReverseMobile{0%,to{transform:translateY(0)}50%{transform:translateY(15px)}}.animated-cubes-container{min-height:250px;transform:skewY(-15deg) scale(.8) translateY(8px)}.animated-cubes-container .cube{animation:cubes-floatMobile 4s ease-in-out infinite}.animated-cubes-container .cube:nth-child(2){translate:-40px -40px;animation:cubes-floatReverseMobile 3.5s ease-in-out infinite;animation-delay:.5s}.animated-cubes-container .cube:nth-child(3){translate:40px 40px;animation:cubes-floatMobile 4.5s ease-in-out infinite;animation-delay:1s}.animated-cubes-container .cube div{gap:20px;translate:calc(-50px * var(--x)) calc(-40px * var(--y))}.animated-cubes-container .cube div span{width:40px;height:40px}.animated-cubes-container .cube div span:before{left:-30px;width:30px}.animated-cubes-container .cube div span:after{top:-30px;height:30px}}