#bg-rubik {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    gap: 4px;
    overflow: hidden;
    background-color: var(--bg);
    perspective: 800px;
    pointer-events: none;
}

.rubik-tile-inner {
    width: 80%;
    height: 80%;
    position: relative;
    transform-style: preserve-3d;
    animation-name: rubik-flip-y;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.rubik-tile-inner--vertical {
    animation-name: rubik-flip-x;
}

.rubik-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 5px;
}

.rubik-tile-static {
    width: 80%;
    height: 80%;
    border-radius: 5px;
}

#bg-rubik.paused .rubik-tile-inner {
    animation-play-state: paused;
}

.rubik-face--back {
    transform: rotateY(180deg);
}

.rubik-tile-inner--vertical .rubik-face--back {
    transform: rotateX(180deg);
}

@keyframes rubik-flip-y {
    0%, 40% {
        transform: rotateY(0deg);
    }
    50%, 90% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rubik-flip-x {
    0%, 40% {
        transform: rotateX(0deg);
    }
    50%, 90% {
        transform: rotateX(180deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rubik-tile-inner {
        animation: none;
    }
}