[data-camera] {
    --scene-size: 500;
    --scale: 100;
    --perspective: 700;
    --cameraZ: 108;
    --cameraY: 46;
    --translateX: 0;
    --translateY: 0;
    --translateZ: 10;
}

[data-camera] {
    position: absolute;
    left: 0;
    top: 0;
    /* width: 100vw;
    height: 100vh; */
    width: 60%;
    height: 125%;
    background-color: rgba(0, 0, 0, 0);
    --fmt-s: calc(var(--scale, 100) / 100);
    /* transform: scale(var(--fmt-s)); */
    /* transform: scale(0.3); */
    transform: scaleX(0.3) scaleY(0.3);
    display: grid;
    place-items: center;
    overflow: visible;

    transition: transform ease 500ms;
    will-change: transform;
}

[data-scene] {
    position: relative;
    left: 0;
    top: 0;
    width: calc(var(--scene-size) * var(--px));
    height: calc(var(--scene-size) * var(--px));
    background-color: rgba(0, 0, 0, 0.1);
    transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(calc(var(--cameraZ, 0) * 1deg)) translate3d(calc(var(--translateX, 0) * var(--px)),
            calc(var(--translateY, 0) * var(--px) * -1),
            calc(var(--translateZ, 0) * var(--px) * -1));
    --max-rotation: calc((360 + var(--cameraZ)) * 1deg);
    transform-origin: 50% 50%;
}

[data-camera][data-dragging] {
    transition: none;
}

@keyframes rotateCamera {
    to {
        transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)),
                calc(var(--translateY, 0) * var(--px) * -1),
                calc(var(--translateZ, 0) * var(--px) * -1));
    }
}

[data-scene],
[data-camera],
[data-3d] {
    transform-style: preserve-3d;
}

[data-hidden] {
    display: none;
}