@import "../../../styles/mixins";
@import "../../../styles/vars";
@import "../../../styles/artwork";

.art-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -125%);
    transition: left 500ms, transform 500ms;
    z-index: -1;

    .art-rotate {
        //   transform: rotate(-180deg);
        animation: 5000ms rotate linear infinite;
        transition: transform 500ms;

        .art {
            position: relative;
            @include fluid-width-height(9.0625rem, 9.0625rem);
            background-image: $lume-2-base64;
            background-size: cover;
            background-position: 50%;
            transition: width 500ms, height 500ms;

            > div {
                position: absolute;
                inset: 0;
                transition: opacity 500ms;
            }

            .gradient-1 {
                background: radial-gradient(circle, rgba(75, 75, 75, 1) 0%, rgba(0, 0, 0, 1) 100%);
                z-index: -1;
            }

            .gradient-2 {
                background: conic-gradient(
                        from 180deg at 50% 50%,
                        #a67833 -15.8deg,
                        #e91f1f 222.32deg,
                        #a67833 344.2deg,
                        #e91f1f 582.32deg
                );
                opacity: 0;
                z-index: -2;
            }

            .gradient-3 {
                background: conic-gradient(
                        from -89.79deg at 50% 50%,
                        #33a653 -15.8deg,
                        #080808 222.32deg,
                        #33a653 344.2deg,
                        #080808 582.32deg
                );
                opacity: 0;
                z-index: -3;
            }

            .gradient-4 {
                background: radial-gradient(circle, rgba(75,75,75,1) 0%, rgba(0,0,0,1) 100%);
                opacity: 0;
                z-index: -4;
            }
        }
    }

    &.connected {
        top: 50%;
        left: -35em;
        transform: translate(0, -50%);

        .art-rotate {
            transform: rotate(-151.13deg);
            animation: none;

            .art {
                @include fluid-width-height(72rem, 72rem);

                .gradient-1 {
                    opacity: 0;
                }

                .gradient-4 {
                    opacity: 1;
                }
            }
        }
    }

    &.pulse {
        .art-rotate {
            will-change: transform;
            transform: rotate(-151.13deg);
            animation: none;

            .art {
                .gradient-1 {
                    opacity: 0;
                }

                .gradient-2 {
                    opacity: 1;
                }
            }
        }

    }
}



@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(127.54deg);
    }
    15.38% {
        transform: rotate(127.54deg);
    }
    23.08% {
        transform: rotate(420deg);
    }
    38.46% {
        transform: rotate(420deg);
    }
    46.15% {
        transform: rotate(360deg);
    }
    69.23% {
        transform: rotate(360deg);
    }
    76.92% {
        transform: rotate(540deg);
    }
    92.31% {
        transform: rotate(540deg);
    }
    100% {
        transform: rotate(127.54deg);
    }
}