body {
    background-color: rgb(10,10,10);
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
#cursor-gallery{
    --current_top: 0px;
    --current_left: 0px;
    --track_left_endpoint: 0px;
    --track_top_endpoint: 0px;
}
.image {
    width: 50vmin;
    position: absolute;
    transform: translate(-50%, -50%);
}

.image[data-status="inactive"]{
    opacity: 0;
    -webkit-transition: opacity 150ms ease-in-out;
    -moz-transition: opacity 150ms ease-in-out;
    /*display: none;*/
}

.image[data-status="active"] {
    opacity: 1;
    display: block;
    /*animation-delay: 2s;*/
}

.image[data-status="track"]{
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in-out;
    /*animation-name: track_fade;*/
}

/*@keyframes track_fade {*/
/*    50% {opacity: 0;}*/
/*    70% { }*/
/*}*/

.image[data-status="track"]{
    /*opacity: 0;*/
    animation-name: open_image_track;
    animation-duration: 4s;
    animation-delay: 1s;
}

@keyframes open_image_track {
    0% {left: var(--current_left); top: var(--current_top)}
    50% {left: 50vw; top: 50vh}
    100% {height: 56vh; width: 60vw}
}

.image-selector[data-status="inactive"]{
    display: none;
}

#image-track[data-status="inactive"]{
    display: none;
}

#image-track[data-status="active"]{
    display: flex;
    gap: 4vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0, -50%) ;
    user-select: none;
}

#image-track > .track-image {
    width: 48vmin;
    height: 76vmin;
    object-fit: cover;
    object-position: 100% center;
}