.screen-wrapper,
.screen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.screen {
    transform-style: preserve-3d;
    opacity: 1;
    transition: none;
    z-index: -1;
}

.layers {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 1000px;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
}

.layers__container {
    height: 100vh;
    justify-content: center;
    transform-style: preserve-3d;
    transform: rotateX(var(--move-y)) rotateY(var(--move-x));
    will-change: transform;
    transition: 1s cubic-bezier(.14, .51, .37, .79);
}

.layers__item {
    position: absolute;
    background-size: cover;
    background-position: center;
    inset: 0vw;
}

.layer-1 {
    transform: translateZ(-600px) translateX(-100px) scale(1.2);
    opacity: 0;
}

.layer-2 {
    transform: translateZ(-300px) scale(.8);
    opacity: 0;
}

.layer-Assassin {
    transform: translateZ(-100px) translateX(100px) scale(.9);
    opacity: 0;
}

.layer-Jager {
    transform: translateZ(-50px) translateX(50px) scale(.8);
    opacity: 0;
}

.layer-Myrmillo {
    transform: translateZ(100px) scale(.8);
    opacity: 0;
}

.layer-3 {
    transform: translateZ(-700px);
    opacity: 0;
}

.layer-4 {
    transform: translateZ(-700px) scale(.35);
    opacity: .0;
}

.layer-1,
.layer-2,
.layer-3,
.layer-4,
.layer-Assassin,
.layer-Jager,
.layer-Myrmillo {
    pointer-events: none;
    background-position: center;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    .layer-1 {
        transform: translateZ(-600px) translateX(150px) scale(1.2);
    }

    .layer-2 {
        transform: translateZ(-300px) scale(.8);
    }

    .layer-Assassin {
        transform: translateZ(-100px) translateX(100px) scale(.9);
    }

    .layer-Jager {
        transform: translateZ(-50px) translateX(50px) scale(.8);
    }

    .layer-Myrmillo {
        transform: translateZ(100px) scale(.8);
    }

    .layer-3 {
        transform: translateZ(-700px);
    }

    .layer-4 {
        transform: translateZ(-700px) scale(.35);
    }
}

.popup-wrapper {
    perspective: 1500px;
}

.mw-keeper {
    transform-style: preserve-3d;
    transform: rotateX(var(--move-y)) rotateY(var(--move-x)) translateZ(0px);
    will-change: transform;
}

#close-button,
.zebra-title,
.mw-keeper,
.dot-3,
.zebra-thin {
    transition: 1s cubic-bezier(.14, .51, .37, .79);
    transform-style: preserve-3d;
    will-change: transform;
}

#close-button,
.zebra-title,
.dot-3,
.zebra-thin {
    transform: rotateX(var(--move-y)) rotateY(var(--move-x)) translateZ(25px);
}