/* Mundo dos Cubos de Fundo */
.background-world {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    perspective: 1000px;
    background: linear-gradient(180deg, var(--bg-color-start) 0%, var(--bg-color-end) 100%); 
}

.bg-cube-wrapper {
    position: absolute;
    transform-style: preserve-3d;
}

.bg-cube {
    --bg-cube-size: 60px; /* Default */
    width: var(--bg-cube-size);
    height: var(--bg-cube-size);
    position: relative;
    transform-style: preserve-3d;
}

.bg-cube-rotator {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
}

.bg-cube__face {
    position: absolute;
    width: var(--bg-cube-size);
    height: var(--bg-cube-size);
    background-color: rgba(231, 230, 255, 0.5);
    border: 1px solid rgba(231, 230, 255, 0.5);
    opacity: 0.5;
    box-sizing: border-box;
}

.bg-cube__face--front  { transform: rotateY(  0deg) translateZ(calc(var(--bg-cube-size) / 2)); }
.bg-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--bg-cube-size) / 2)); }
.bg-cube__face--right  { transform: rotateY( 90deg) translateZ(calc(var(--bg-cube-size) / 2)); }
.bg-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--bg-cube-size) / 2)); }
.bg-cube__face--top    { transform: rotateX( 90deg) translateZ(calc(var(--bg-cube-size) / 2)); }
.bg-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--bg-cube-size) / 2)); }

@keyframes bgCubeRotate1 { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }
@keyframes bgCubeRotate2 { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(-360deg) rotateY(360deg); } }
@keyframes bgCubeFloat { 0% { transform: translateY(0px) rotateX(5deg) rotateY(-5deg); } 50% { transform: translateY(-15px) rotateX(-5deg) rotateY(5deg); } 100% { transform: translateY(0px) rotateX(5deg) rotateY(-5deg); } }

.bg-cube-rotator.anim-rotate1 { animation-name: bgCubeRotate1; animation-timing-function: linear; animation-iteration-count: infinite; }
.bg-cube-rotator.anim-rotate2 { animation-name: bgCubeRotate2; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }
.bg-cube-rotator.anim-float   { animation-name: bgCubeFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }