.aspect0 {
    fill: var(--aspect-0) !important
}

.aspect0,
.aspect1 {
    transition: fill 1s ease-out;
    transition-duration: var(--transition-duration, 1s)
}

.aspect1 {
    fill: var(--aspect-1) !important
}

.aspect2 {
    transition: fill 1s ease-out;
    transition-duration: var(--transition-duration, 1s);
    fill: var(--aspect-2) !important
}

@keyframes stage-scale {
    0% {
        transform: scale(1.2);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.scale-stage {
    animation: stage-scale .8s linear .3s 1 forwards
}

.cube-static,
.scale-stage {
    opacity: 0;
    transform-origin: center
}

.cube-static {
    transform: scale(0);
    overflow: hidden;
    --aspect-0: #1e71d2;
    --aspect-1: #4299ff;
    --aspect-2: #1880f9
}

@keyframes cube-init {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    30% {
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.cube-init {
    animation: cube-init .5s ease-out 1 forwards
}

@keyframes main-cube-init {
    0% {
        opacity: 0;
        transform: scale(0);
        --aspect-0: #fff;
        --aspect-1: #fff;
        --aspect-2: #fff
    }

    15% {
        opacity: 1
    }

    40% {
        transform: scale(1);
        opacity: 1;
        --aspect-0: #fff;
        --aspect-1: #fff;
        --aspect-2: #fff;
        --transition-duration: 0.5s
    }

    80% {
        transform: scale(1);
        opacity: 1;
        --aspect-0: #1e71d2;
        --aspect-1: #4299ff;
        --aspect-2: #1880f9;
        --transition-duration: 0.25
    }

    to {
        transform: scale(1);
        opacity: 1;
        --aspect-0: #fff;
        --aspect-1: #fff;
        --aspect-2: #fff
    }
}

.main-cube-init {
    animation: main-cube-init 2s ease-out 1 forwards
}

@keyframes breathing-main {
    0% {
        --aspect-0: #fff;
        --aspect-1: #fff;
        --aspect-2: #fff;
        --transition-duration: 3s
    }

    75% {
        --aspect-0: #1e71d2;
        --aspect-1: #4299ff;
        --aspect-2: #1880f9;
        --transition-duration: 1s
    }

    to {
        --aspect-0: #fff;
        --aspect-1: #fff;
        --aspect-2: #fff;
        --transition-duration: 1s
    }
}

@keyframes breathing-normal {
    0% {
        --aspect-0: #1e71d2;
        --aspect-1: #4299ff;
        --aspect-2: #1880f9;
        --transition-duration: 3s
    }

    75% {
        --aspect-0: #e1effc;
        --aspect-1: #f1f8ff;
        --aspect-2: #d4e4f2;
        --transition-duration: 1s
    }

    to {
        --aspect-0: #1e71d2;
        --aspect-1: #4299ff;
        --aspect-2: #1880f9;
        --transition-duration: 1s
    }
}

.main-cube-breathing {
    animation: breathing-main 4s linear 1 backwards
}

.normal-cube-breathing {
    animation: breathing-normal 4s linear 1 backwards
}

.main-cube-static-status {
    --aspect-0: #fff;
    --aspect-1: #fff;
    --aspect-2: #fff;
    transform: scale(1);
    opacity: 1;
    --transition-duration: 4s
}

.cube-static-status {
    --aspect-0: #1e71d2;
    --aspect-1: #4299ff;
    --aspect-2: #1880f9;
    transform: scale(1);
    opacity: 1;
    --transition-duration: 4s
}

@keyframes small-cube-init {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.small-cube-init {
    animation: small-cube-init .1s linear .2s 1 forwards
}