body {
    --animation-speed: 6s;
    background-color: #000;
    overflow: hidden;
}

.tunnel {
    perspective: 180px;
    background: rgb(1, 25, 1);
}

.tunnel,
.wall_bottom,
.tunnel::after,
.tunnel__jachin,
.wall_right,
.wall_top,
.tunnel__boaz,
.tunnel__boaz::before,
.wall_left {
    padding: 0;
    margin: 0;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-size: 200px;
}

.tunnel {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin: -100px;
}

.wall {
    background-color: #494949;
    background-image: url(00_4.gif);
}

/* floor */
.wall_bottom {
    top: 50%;
    left: 50%;
    width: 204px;
    height: 1200px;
    margin: -600px -102px;
    transform: translateY(101px) rotateX(90deg);
    animation: var(--animation-speed) bottom linear infinite;
}

/* right */
.wall_right {
    top: 0px;
    left: 0;
    width: 1200px;
    height: 200px;
    transform: translateX(-400px) translateY(600px) translateZ(-100px)
        rotateY(90deg) rotateZ(90deg);
    animation: var(--animation-speed) right linear infinite;
}

/* ceiling */
.wall_top {
    top: 0px;
    left: -2px;
    right: -2px;
    bottom: 0px;
    animation: var(--animation-speed) top linear infinite;
}

/* left */
.wall_left {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateZ(-1px);
    animation: var(--animation-speed) left linear infinite;
}

/* floor shadow */
.tunnel::after {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 1200px;
    margin: -600px -100px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0) 40%,
        rgba(10, 25, 10, 1) 800px
    );
    transform: translateY(99px) rotateX(90deg);
    box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0);
}

.tunnel__boaz {
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 200px;
    margin: -100px -600px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0) 40%,
        rgba(10, 25, 10, 1) 800px
    );
    transform: translateX(-99px) rotateY(90deg);
    transform-style: preserve-3d;
    box-shadow: inset 990 0 190px 29px rgba(0, 0, 0, 0);
}

/* ceiling shadow */
.tunnel__jachin {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 1200px;
    margin: -600px -100px;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0),
        rgba(10, 20, 10, 0.75) 40%,
        rgba(0, 0, 0, 0) 800px
    );
    transform: translateY(-99px) rotateX(90deg);
    transform-style: preserve-3d;
    box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0);
}

.object {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 1500px;
}

.object__layers {
    position: relative;
    width: 300px;
    height: 410px;
    transform-style: preserve-3d;
    transition: 0.3s ease-out;
    animation: 4s standby ease-in-out infinite;
}

.object__layers.object__layers_clicked {
    animation: none;
}

.object__layers-item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.object__layers-item.object__layers-item_0 {
    transform: translate3d(0, 0, -3px) rotateY(180deg);
}

.object__layers-item.object__layers-item_2 {
    transform: translate3d(0, 0, 20px);
}

.object__layers-item.object__layers-item_3 {
    transform: translate3d(0, 0, 30px);
}

.object__layers-item img {
    display: block;
    width: 100%;
    user-select: none;
    pointer-events: none;
}

@keyframes left {
    0% {
        transform: translateZ(-1px);
    }
    100% {
        transform: translateZ(-1px) translateX(-400px);
    }
}

@keyframes top {
    from {
        transform: translateZ(1px);
    }
    to {
        transform: translateY(400px) translateZ(1px);
    }
}

@keyframes right {
    from {
        transform: translateX(-400px) translateY(600px) translateZ(-100px)
            rotateY(90deg) rotateZ(-90deg);
    }
    to {
        transform: translateX(-400px) translateY(1000px) translateZ(-100px)
            rotateY(90deg) rotateZ(-90deg);
    }
}

@keyframes bottom {
    from {
        transform: translateY(101px) rotateX(90deg);
    }
    to {
        transform: translateZ(400px) translateY(101px) rotateX(90deg);
    }
}

@keyframes standby {
    0%,
    100% {
        transform: rotateY(0deg);
    }
    25% {
        transform: rotateY(-25deg);
    }
    75% {
        transform: rotateY(25deg);
    }
}

@keyframes line-runner {
    0% {
        top: -5rem;
    }
    100% {
        top: 100%;
    }
}