.puzzle-container {
    align-items: center;
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    perspective: 700px;
    perspective-origin: 50% 50%;
    position: absolute
}

.puzzle-container .puzzle-layer {
    aspect-ratio: 16/12;
    background: url(../../../images/main/dashboard-puzzle-2.webp) no-repeat;
    background-size: cover;
    position: absolute;
    right: 4.8%;
    top: 7%;
    transform: rotateY(-25deg) rotateX(-1.4deg) rotate(2.3deg);
    transform-style: preserve-3d;
    width: 64%
}

.puzzle-container .puzzle-layer .puzzle-hole {
    background: #101010;
    height: 36px;
    opacity: 1;
    position: absolute;
    width: 36px;
    will-change: opacity
}

.puzzle-container .puzzle-layer .puzzle-hole-1 {
    left: 12.5%;
    top: 12.5%
}

.puzzle-container .puzzle-layer .puzzle-hole-2 {
    left: 25%;
    top: 25%
}

.puzzle-container .puzzle-layer .puzzle-hole-3 {
    left: 50%;
    top: 50%
}

.puzzle-container .puzzle-layer .puzzle-hole-4 {
    left: 62.5%;
    top: 25%
}

.puzzle-container .puzzle-layer .puzzle-hole-5 {
    left: 12.5%;
    top: 75%
}

.puzzle-container .puzzle-layer .puzzle-hole-6 {
    left: 75%;
    top: 75%
}

.puzzle-container .puzzle-layer .puzzle-cube {
    aspect-ratio: 1/1;
    position: absolute;
    transform: translateZ(300px);
    transform-style: preserve-3d;
    width: 36px;
    will-change: transform
}

.puzzle-container .puzzle-layer .puzzle-cube .side {
    backface-visibility: hidden;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    will-change: opacity
}

.puzzle-container .puzzle-layer .puzzle-cube .front {
    background-image: url(../../../images/main/dashboard-puzzle-2.webp);
    background-repeat: no-repeat;
    background-size: 918% auto;
    transform: translateZ(18px)
}

.puzzle-container .puzzle-layer .puzzle-cube .left {
    background: linear-gradient(140deg, #0091ea, #8417dd 72%);
    transform: rotateY(90deg) translateZ(17.7px)
}

.puzzle-container .puzzle-layer .puzzle-cube .top {
    background-color: #0091ea;
    transform: rotateX(90deg) translateZ(17.7px)
}

.puzzle-container .puzzle-layer .puzzle-cube .bottom {
    background: linear-gradient(315deg, #0091ea, #8417dd 72%);
    transform: rotateX(-90deg) translateZ(17.7px)
}

.puzzle-container .puzzle-layer .puzzle-cube-1 {
    left: 12.5%;
    top: 12.5%
}

.puzzle-container .puzzle-layer .puzzle-cube-1 .front {
    background-position: 14.2% 12.6%
}

.puzzle-container .puzzle-layer .puzzle-cube-2 {
    left: 25%;
    top: 25%
}

.puzzle-container .puzzle-layer .puzzle-cube-2 .front {
    background-position: 28% 25.3%
}

.puzzle-container .puzzle-layer .puzzle-cube-3 {
    left: 50%;
    top: 50%
}

.puzzle-container .puzzle-layer .puzzle-cube-3 .front {
    background-position: 56.1% 50.7%
}

.puzzle-container .puzzle-layer .puzzle-cube-4 {
    left: 62.5%;
    top: 25%
}

.puzzle-container .puzzle-layer .puzzle-cube-4 .front {
    background-position: 70.1% 25.2%
}

.puzzle-container .puzzle-layer .puzzle-cube-5 {
    left: 12.5%;
    top: 75%
}

.puzzle-container .puzzle-layer .puzzle-cube-5 .front {
    background-position: 13.8% 76.1%
}

.puzzle-container .puzzle-layer .puzzle-cube-6 {
    left: 75%;
    top: 75%
}

.puzzle-container .puzzle-layer .puzzle-cube-6 .front {
    background-position: 84.1% 76.1%
}

.puzzle-container .animated .puzzle-hole-1 {
    animation: holeFade .1s linear 1.5s forwards
}

.puzzle-container .animated .puzzle-hole-2 {
    animation: holeFade .1s linear 2.3s forwards
}

.puzzle-container .animated .puzzle-hole-3 {
    animation: holeFade .1s linear 2.8s forwards
}

.puzzle-container .animated .puzzle-hole-4 {
    animation: holeFade .1s linear 3.8s forwards
}

.puzzle-container .animated .puzzle-hole-5 {
    animation: holeFade .1s linear 3.3s forwards
}

.puzzle-container .animated .puzzle-hole-6 {
    animation: holeFade .1s linear 2.3s forwards
}

.puzzle-container .animated .puzzle-cube-1 {
    animation: cubeSlideIn 1.5s ease-out 1s forwards
}

.puzzle-container .animated .puzzle-cube-1 .side {
    animation: cubeFadeOut 1.5s linear 1s forwards
}

.puzzle-container .animated .puzzle-cube-2 {
    animation: cubeSlideIn 1.5s ease-out 1.5s forwards
}

.puzzle-container .animated .puzzle-cube-2 .side {
    animation: cubeFadeOut 1.5s linear 1.5s forwards
}

.puzzle-container .animated .puzzle-cube-3 {
    animation: cubeSlideIn 1.5s ease-out 2s forwards
}

.puzzle-container .animated .puzzle-cube-3 .side {
    animation: cubeFadeOut 1.5s linear 2s forwards
}

.puzzle-container .animated .puzzle-cube-4 {
    animation: cubeSlideIn 1.5s ease-out 3s forwards
}

.puzzle-container .animated .puzzle-cube-4 .side {
    animation: cubeFadeOut 1.5s linear 3s forwards
}

.puzzle-container .animated .puzzle-cube-5 {
    animation: cubeSlideIn 1.5s ease-out 2.5s forwards
}

.puzzle-container .animated .puzzle-cube-5 .side {
    animation: cubeFadeOut 1.5s linear 2.5s forwards
}

.puzzle-container .animated .puzzle-cube-6 {
    animation: cubeSlideIn 1.5s ease-out 1.5s forwards
}

.puzzle-container .animated .puzzle-cube-6 .side {
    animation: cubeFadeOut 1.5s linear 1.5s forwards
}

@keyframes cubeSlideIn {
    0% {
        transform: translateZ(450px)
    }

    40% {
        transform: translateZ(20px)
    }

    to {
        transform: translateZ(-37px)
    }
}

@keyframes holeFade {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes cubeFadeOut {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

/*# sourceMappingURL=c6cf28e168b0aa06.css.map*/