/* Rewrite this shader in CSS, make no mistakes (I swear this is not AI slop tho) */
.skybox {
    /*kinda like FOV^-1*/
    --s: 25vmax;
    --texture-overflow: 1.002;
    --spin: 180s;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: #82ACFF;
    perspective: var(--s);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(1.25vmax);
    -webkit-backdrop-filter: blur(1.25vmax);
}

.cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--s) * 2);
    height: calc(var(--s) * 2);
    margin: calc(var(--s) * -1);
    transform-style: preserve-3d;
    animation: skybox-spin var(--spin) linear infinite;
}

.cube > div {
    --face: translateZ(calc(var(--s) * -1)) scale(var(--texture-overflow));
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

.front {
    background-image: url("panorama_0.png");
    transform: var(--face);
}

.right {
    background-image: url("panorama_1.png");
    transform: rotateY(-90deg) var(--face);
}

.back {
    background-image: url("panorama_2.png");
    transform: rotateY(180deg) var(--face);
}

.left {
    background-image: url("panorama_3.png");
    transform: rotateY(90deg) var(--face);
}

.top {
    background-image: url("panorama_4.png");
    transform: rotateX(-90deg) rotate(180deg) var(--face);
}

.bottom {
    background-image: url("panorama_5.png");
    transform: rotateX(90deg) rotate(180deg) var(--face);
}

@keyframes skybox-spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* This is the slop part but I think it's a good idea */
@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
    }
}