.calculation-cube {
    width: 1em;
    height: 1em;
    margin: auto;
    position: relative;
    color: currentColor;
    font-size: 24px;
    transform: rotateX(30deg) rotateY(45deg);
    transform-style: preserve-3d;
    animation: calculation-cube-spin 1.5s infinite ease-in-out alternate;
}

.calculation-cube__side {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.calculation-cube__side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0.5;
    transform: translateZ(0.5em);
    animation: calculation-cube-explode 1.5s infinite ease-in-out;
}

.calculation-cube__side:nth-child(1) { transform: rotateY(90deg); }
.calculation-cube__side:nth-child(2) { transform: rotateY(180deg); }
.calculation-cube__side:nth-child(3) { transform: rotateY(270deg); }
.calculation-cube__side:nth-child(4) { transform: rotateY(360deg); }
.calculation-cube__side:nth-child(5) { transform: rotateX(90deg); }
.calculation-cube__side:nth-child(6) { transform: rotateX(270deg); }

@keyframes calculation-cube-spin {
    from { transform: rotateX(30deg) rotateY(45deg); }
    to { transform: rotateX(30deg) rotateY(405deg); }
}

@keyframes calculation-cube-explode {
    0%, 100% { transform: translateZ(0.5em); }
    50% { transform: translateZ(0.75em); }
}

@media (prefers-reduced-motion: reduce) {
    .calculation-cube,
    .calculation-cube__side::before {
        animation-duration: 3s;
    }
}