@property --container-rotation-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --container-rotation-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

* {
    box-sizing: border-box;
}

#scene {
    --light-source-y: 0;
    --light-source-x: 0;
    --light-source-x-deg: calc(var(--light-source-x) * 1deg);
    --light-source-y-deg: calc(var(--light-source-y) * 1deg);
    --light-normal-a: calc(sin(var(--light-source-y-deg)) * cos(var(--light-source-x-deg)));
    --light-normal-b: calc(sin(var(--light-source-x-deg)) * -1);
    --light-normal-c: calc(cos(var(--light-source-y-deg)) * cos(var(--light-source-x-deg)));

    perspective: 1000px;
}

figure {
    margin: 0;
}

.object-wrapper {
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: lightcoral; */
    container: object-wrapper / size;
}

.object {
    --container-rotation-x: 0;
    --container-rotation-y: 0;
    --container-rotation-x-deg: calc(var(--container-rotation-x) * 1deg);
    --container-rotation-y-deg: calc(var(--container-rotation-y) * 1deg);
    --container-rotation-x-calc: calc(var(--container-rotation-x) * -1deg);
    --container-rotation-y-calc: calc(var(--container-rotation-y) * -1deg);

    --container-rotation-11: calc(cos(var(--container-rotation-y-calc)));
    --container-rotation-12: calc(sin(var(--container-rotation-x-calc)) * sin(var(--container-rotation-y-calc)));
    --container-rotation-13: calc(-1 * cos(var(--container-rotation-x-calc)) * sin(var(--container-rotation-y-calc)));
    --container-rotation-21: 0;
    --container-rotation-22: calc(cos(var(--container-rotation-x-calc)));
    --container-rotation-23: calc(sin(var(--container-rotation-x-calc)));
    --container-rotation-31: calc(sin(var(--container-rotation-y-calc)));
    --container-rotation-32: calc(-1 * sin(var(--container-rotation-x-calc)) * cos(var(--container-rotation-y-calc)));
    --container-rotation-33: calc(cos(var(--container-rotation-x-calc)) * cos(var(--container-rotation-y-calc)));

    width: 100%;
    height: unset;
    --face-size: 100cqi;
    /* background-color: coral; */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(var(--container-rotation-y-deg)) rotateX(var(--container-rotation-x-deg));
    animation: object-rotate 10s linear infinite;
}

@container (orientation: landscape) {
    .object {
        width: unset;
        height: 100%;
        --face-size: 100cqb;
    }
}

.face {
    --face-color: rgba(0,0,0,0);
    --face-rotation-x: 0;
    --face-rotation-y: 0;
    --face-rotation-x-deg: calc(var(--face-rotation-x) * 1deg);
    --face-rotation-y-deg: calc(var(--face-rotation-y) * 1deg);
    /* --face-normal-a: calc(sin(var(--face-rotation-y-deg)));
    --face-normal-b: calc(-1 * sin(var(--face-rotation-x-deg)) * cos(var(--face-rotation-y-deg)));
    --face-normal-c: calc(cos(var(--face-rotation-x-deg)) * cos(var(--face-rotation-y-deg))); */
    --face-normal-a: calc(sin(var(--face-rotation-y-deg)) * cos(var(--face-rotation-x-deg)));
    --face-normal-b: calc(-1 * sin(var(--face-rotation-x-deg)));
    --face-normal-c: calc(cos(var(--face-rotation-x-deg)) * cos(var(--face-rotation-y-deg)));
    --face-rotated-normal-a: calc(var(--face-normal-a) * var(--container-rotation-11) + var(--face-normal-b) * var(--container-rotation-12) + var(--face-normal-c) * var(--container-rotation-13));
    --face-rotated-normal-b: calc(var(--face-normal-a) * var(--container-rotation-21) + var(--face-normal-b) * var(--container-rotation-22) + var(--face-normal-c) * var(--container-rotation-23));
    --face-rotated-normal-c: calc(var(--face-normal-a) * var(--container-rotation-31) + var(--face-normal-b) * var(--container-rotation-32) + var(--face-normal-c) * var(--container-rotation-33));
    --dot-product: calc((var(--face-rotated-normal-a) * var(--light-normal-a)) + (var(--face-rotated-normal-b) * var(--light-normal-b)) + (var(--face-rotated-normal-c) * var(--light-normal-c)));
    --shading: calc(var(--dot-product) * -0.25 + 0.75);

    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    /* border: 1px solid var(--face-color); */
    transform: rotateY(var(--face-rotation-y-deg)) rotateX(var(--face-rotation-x-deg)) translateZ(var(--face-translation-z));
}

.face::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--face-color);
    opacity: var(--shading);
}

.cube {
    --face-translation-z: calc(var(--face-size) / 2);
    aspect-ratio: 1/1;
}

.cube .face:nth-child(2) {
    --face-rotation-x: 0;
    --face-rotation-y: 90;
}

.cube .face:nth-child(3) {
    --face-rotation-x: 0;
    --face-rotation-y: 180;
}

.cube .face:nth-child(4) {
    --face-rotation-x: 0;
    --face-rotation-y: 270;
}

.cube .face:nth-child(5) {
    --face-rotation-x: 90;
    --face-rotation-y: 0;
}

.cube .face:nth-child(6) {
    --face-rotation-x: 270;
    --face-rotation-y: 0;
}

.cube .face:nth-child(n + 7) {
    display: none;
}


.tetrahedron {
    --face-translation-z: calc(var(--face-size) * .20413);
    aspect-ratio: 1/.86603;
    transform-origin: 50% 66.6667%;
}

@container (orientation:landscape) {
    .tetrahedron {
        --face-translation-z: calc(var(--face-size) / .86603 * .20413);
    }
}

.tetrahedron .face {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform-origin: 50% 66.6667%;
}

.tetrahedron .face:nth-child(1) {
    --face-rotation-x: -90;
    --face-rotation-y: 0;
}

.tetrahedron .face:nth-child(2) {
    --face-rotation-x: 19.47;
    --face-rotation-y: 60;
}

.tetrahedron .face:nth-child(3) {
    --face-rotation-x: 19.47;
    --face-rotation-y: 180;
}

.tetrahedron .face:nth-child(4) {
    --face-rotation-x: 19.47;
    --face-rotation-y: 300;
}

.tetrahedron .face:nth-child(n + 5) {
    display: none;
}

.dodecahedron {
    --face-translation-z: calc(var(--face-size) * .688);
    aspect-ratio: 1/.95105;
    transform-origin: 50% 55.2789%;
}

@container (orientation:landscape) {
    .dodecahedron {
        --face-translation-z: calc(var(--face-size) / .95105 * .688);
    }
}

.dodecahedron .face {
    clip-path: polygon(50% 0%,
            100% 38.2%,
            80.9% 100%,
            19.1% 100%,
            0% 38.2%);
    transform-origin: 50% 55.2789%;
}

.dodecahedron .face:nth-child(1) {
    --face-rotation-x: -90;
    --face-rotation-y: 0;
}

.dodecahedron .face:nth-child(2) {
    --face-rotation-x: -26.56505;
    --face-rotation-y: 36;
}

.dodecahedron .face:nth-child(3) {
    --face-rotation-x: -26.56505;
    --face-rotation-y: 108;
}

.dodecahedron .face:nth-child(4) {
    --face-rotation-x: -26.56505;
    --face-rotation-y: 180;
}

.dodecahedron .face:nth-child(5) {
    --face-rotation-x: -26.56505;
    --face-rotation-y: 252;
}

.dodecahedron .face:nth-child(6) {
    --face-rotation-x: -26.56505;
    --face-rotation-y: 324;
}

.dodecahedron .face:nth-child(7) {
    --face-rotation-x: 90;
    --face-rotation-y: 0;
}

.dodecahedron .face:nth-child(8) {
    --face-rotation-x: 153.43495;
    --face-rotation-y: 36;
}

.dodecahedron .face:nth-child(9) {
    --face-rotation-x: 153.43495;
    --face-rotation-y: 108;
}

.dodecahedron .face:nth-child(10) {
    --face-rotation-x: 153.43495;
    --face-rotation-y: 180;
}

.dodecahedron .face:nth-child(11) {
    --face-rotation-x: 153.43495;
    --face-rotation-y: 252;
}

.dodecahedron .face:nth-child(12) {
    --face-rotation-x: 153.43495;
    --face-rotation-y: 324;
}

.dodecahedron .face:nth-child(n + 13) {
    display: none;
}


.icosahedron {
    --face-translation-z: calc(var(--face-size) * .756);
    aspect-ratio: 1/.86603;
    transform-origin: 50% 66.6666%;
}

@container (orientation:landscape) {
    .icosahedron {
        --face-translation-z: calc(var(--face-size) / .86603 * .756);
    }
}

.icosahedron .face {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform-origin: 50% 66.6666%;
}

.icosahedron .face:nth-child(1) {
    --face-rotation-x: -127.399;
    --face-rotation-y: 0;
}

.icosahedron .face:nth-child(2) {
    --face-rotation-x: -127.399;
    --face-rotation-y: 72;
}

.icosahedron .face:nth-child(3) {
    --face-rotation-x: -127.399;
    --face-rotation-y: 144;
}

.icosahedron .face:nth-child(4) {
    --face-rotation-x: -127.399;
    --face-rotation-y: 216;
}

.icosahedron .face:nth-child(5) {
    --face-rotation-x: -127.399;
    --face-rotation-y: 288;
}

.icosahedron .face:nth-child(6) {
    --face-rotation-x: -10.791;
    --face-rotation-y: 36;
}

.icosahedron .face:nth-child(7) {
    --face-rotation-x: -10.791;
    --face-rotation-y: 108;
}

.icosahedron .face:nth-child(8) {
    --face-rotation-x: -10.791;
    --face-rotation-y: 180;
}

.icosahedron .face:nth-child(9) {
    --face-rotation-x: -10.791;
    --face-rotation-y: 252;
}

.icosahedron .face:nth-child(10) {
    --face-rotation-x: -10.791;
    --face-rotation-y: 324;
}

.icosahedron .face:nth-child(11) {
    --face-rotation-x: 52.601;
    --face-rotation-y: 0;
}

.icosahedron .face:nth-child(12) {
    --face-rotation-x: 52.601;
    --face-rotation-y: 72;
}

.icosahedron .face:nth-child(13) {
    --face-rotation-x: 52.601;
    --face-rotation-y: 144;
}

.icosahedron .face:nth-child(14) {
    --face-rotation-x: 52.601;
    --face-rotation-y: 216;
}

.icosahedron .face:nth-child(15) {
    --face-rotation-x: 52.601;
    --face-rotation-y: 288;
}

.icosahedron .face:nth-child(16) {
    --face-rotation-x: 169.209;
    --face-rotation-y: 36;
}

.icosahedron .face:nth-child(17) {
    --face-rotation-x: 169.209;
    --face-rotation-y: 108;
}

.icosahedron .face:nth-child(18) {
    --face-rotation-x: 169.209;
    --face-rotation-y: 180;
}

.icosahedron .face:nth-child(19) {
    --face-rotation-x: 169.209;
    --face-rotation-y: 252;
}

.icosahedron .face:nth-child(20) {
    --face-rotation-x: 169.209;
    --face-rotation-y: 324;
}

html {
    height: 100%;
}

body {
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
}

#scene {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.object-wrapper {
    width: 30vw;
    height: 30vh;
    transform: rotateX(-15deg) rotateY(-15deg);
}

@keyframes object-rotate {
    from {
        --container-rotation-x: 0;
        --container-rotation-y: 0;
    }

    to {
        --container-rotation-x: 360;
        --container-rotation-y: 360;
    }
}