/* --------------------------------------------------------------------------
   Cube animation component
   File: wwwroot/css/Components/PZ_Cube.css
   -------------------------------------------------------------------------- */

.cube_stage {
    --cube_size: var(--space_32); /* 64px */
    --cube_half: var(--space_16); /* 32px */
    --cube_duration: 12s;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--space_64);
    overflow: hidden;
    perspective: calc(var(--space_25) * 8);
    perspective-origin: center;
}


/* --------------------------------------------------------------------------
   Cube
   -------------------------------------------------------------------------- */

.cube {
    position: relative;
    width: var(--cube_size);
    height: var(--cube_size);
    transform-style: preserve-3d;
    transform-origin: center;
    /*animation: cube_rotation var(--cube_duration) ease-in-out infinite;*/
    will-change: transform;
}

.cube_stage:hover .cube,
.cube_stage:focus-within .cube {
    /*animation-duration: 22s;*/
        animation-play-state: paused;
}


/* --------------------------------------------------------------------------
   Cube faces
   -------------------------------------------------------------------------- */

    .cube_face {
        position: absolute;
        inset: 0;
        width: var(--cube_size);
        height: var(--cube_size);
        overflow: hidden;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }

        .cube_face > a {
            display: block;
            width: 100%;
            height: 100%;
            color: inherit;
            text-decoration: none;
        }

            .cube_face > a:focus-visible {
                outline: var(--space_0_5) solid var(--color_state_active);
                outline-offset: calc(var(--space_0_5) * -1);
            }

        .cube_face img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            user-select: none;
            pointer-events: none;
        }
    /* --------------------------------------------------------------------------
   Cube geometry
   -------------------------------------------------------------------------- */

    .cube_face_front {
        transform: translateZ(var(--cube_half));
    }

    .cube_face_top {
        transform: rotateX(-90deg) translateZ(var(--cube_half));
    }

    .cube_face_right {
        transform: rotateY(90deg) rotateX(90deg) translateZ(var(--cube_half));
    }

    .cube_face_back {
        transform: rotateY(180deg) rotateZ(90deg) translateZ(var(--cube_half));
    }

    .cube_face_left {
        transform: rotateY(-90deg) rotateZ(90deg) translateZ(var(--cube_half));
    }

    .cube_face_bottom {
        transform: rotateY(90deg) translateZ(var(--cube_half));
    }
    /* --------------------------------------------------------------------------
   Cube animation
   Ohranjeno gibanje stare animacije
   -------------------------------------------------------------------------- */

    @keyframes cube_rotation {
        0%, 100% {
            transform: none;
        }

        16% {
            transform: rotateY(-90deg);
        }

        33% {
            transform: rotateY(-90deg) rotateZ(135deg);
        }

        50% {
            transform: rotateY(225deg) rotateZ(135deg);
        }

        66% {
            transform: rotateY(135deg) rotateX(135deg);
        }

        83% {
            transform: rotateX(135deg);
        }
    }
    /* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

    @media (prefers-reduced-motion: reduce) {
        .cube {
            animation: none;
            transform: none;
        }
    }