.scene {
    width: 20rem;
    height: 20rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    perspective: 10vmin;
    position: relative;
}

.scene__star {
    --unit: 1.5vmin;
    width: var(--unit);
    height: var(--unit);
    --rotate: rotateY(90deg);
    transform:
        translateZ(-100vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    position: absolute;
    top: 0%;
    left: 0%;

    animation: none 900ms infinite ease-in;

    background: black;
}

.scene__items {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.scene__item {
    width: 6rem;
    height: auto;
    position: absolute;
    transition: 1s ease-in;
    opacity: 0;
    visibility: hidden;
}

.scene__item--active {
    animation: animationFade;
    animation-duration: 3000ms;
    opacity: 1;
    visibility: visible;
}

.scene__item > img {
    display: block;
    width: 100%;
    height: auto;
}

.scene__button {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    appearance: none;
    width: 35px;
    height: 25px;
    padding: 10px;
    z-index: 1;
}

.scene__button::after,
.scene__button::before {
    content: "";
    position: absolute;
    background: blue;
    width: calc(33% - 10px);
    height: 70%;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    top: 50%;
    transform: translateY(-50%);
    transition: width 200ms ease-in-out,
    clip-path 200ms ease-in-out;
    will-change: width, clip-path;
}

.scene__button::before {
    left: 10px;
    width: calc(40% - 8px);
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
}

.scene__button::after {
    right: 11px;
    width: calc(60% - 12px);
    clip-path:  polygon(0 calc(20% - 0.5px), 100% 50%, 100% 50%, 0 calc(80% + 0.5px));
}

.scene__button--pause::before,
.scene__button--pause::after {
    width: calc(33% - 6px);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}



/* Animations */
@keyframes hyper {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translateZ(0vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(6);
    }
}

@keyframes animationFade {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}