/* The scene provides the area in which 3d visualizations and operations can take place
   as well as setting the "camera position".
   It also serves as the sensitive area for mouse & touch events to rotate the
   coordinate system of the scene.
*/
.scene3d {
    container:              scene3d inline-size;
    perspective:            200vmax;
    perspective-origin:     right top;
    position:               relative;
}

/* provides the logical group for the coordinate system */
.coords {
    position:           absolute; /* position the 000 coords at the center of the scene */
    top:                50cqh;
    left:               50cqw;

    --coord-length:     42cqmin;
    width:              var(--coord-length);
    aspect-ratio:       1 / 1;

    display:            grid;                              /* child positioning  */
    transform-style:    preserve-3d;                       /* put children in our 3d space */
    --coords-rotate-x:  0;
    --coords-rotate-y:  0;
    --coords-rotate-z:  0;
    transform-origin:   0 0;
    transform:          rotateZ(calc(var(--coords-rotate-z) * 1deg))
                        rotateY(calc(var(--coords-rotate-y) * 1deg))
                        rotateX(calc(var(--coords-rotate-x) * 1deg)) ;
    transition:         transform .25s ease-out;            /* simulate a bit of momentum */
}


.plane {
    grid-column:        1;
    grid-row:           1;
    width:              inherit;
    aspect-ratio:       inherit;
    border-left:        4px solid blue;
    border-top:         4px solid red;
    background:         transparent;
    display:            grid;
    place-items:        center;
    font-family:        "Helvetica Neue", system-ui;
    font-size:          calc(var(--coord-length) / 3);
    font-weight:        bold;
    color:              transparent;
    &.show {
        background:     #fff5;
        color:          #0008;
    }
}

.xz-plane  {
    border-left:        4px solid yellow;
    transform-origin:   center top;
    transform:          rotateX(90deg);
}

.noSelection {
    -webkit-user-select:    none; /* sadly still needed in 2024 */
    user-select:            none;
}