#playercard_dom.use3d {
    --color1: rgb(0, 171, 255);
    --color2: rgb(255, 255, 255);

    border-radius: 30px;
    box-shadow: -13px -13px 13px -15px var(--color1),
        13px 13px 13px -15px var(--color2),
        0 0 8px 4px rgba(246, 241, 232, 0.459),
        0 15px 15px -15px rgba(241, 238, 234, 0.3);
    transform-origin: center;
    z-index: 10;
}


#playercard_dom.Master.use3d {
    --color1: rgb(255, 0, 0);
    --color2: rgb(255, 251, 0);
    --color3: rgb(30, 255, 0);
    --color4: rgb(0, 183, 255);
    box-shadow: -13px -13px 13px -15px var(--color1),
        13px 13px 13px -15px var(--color2),
        0 0 8px 4px rgba(255, 157, 0, 0.459),
        0 15px 15px -15px rgba(255, 157, 0, 0.3);
}

#playercard_dom.use3d>span {
    position: relative;
    top: 45%;
}

#playercard_dom.use3d:before,
#playercard_dom.use3d:after {
    content: "";
    opacity: .1;
    mix-blend-mode: color-dodge;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-repeat: no-repeat;
    border-radius: 30px;
    transform-style: preserve-3d;
}

#playercard_dom.use3d:before {
    background-position: 50% 50%;
    background-size: 600% 600%;
    z-index: 10;
}

#playercard_dom.use3d:after {
    opacity: .8;
    background-image: url("../../img/sparkles.gif");
    background-position: center;
    background-size: 160%;
    z-index: 2;
    filter: brightness(.8);
    transition: filter 0.5s ease;
}

#playercard_dom.use3d.active {
    animation: none;
}

#playercard_dom.use3d.active:before {
    opacity: .2;
    animation: none;
    transition: none;
    background-image: linear-gradient(115deg,
            transparent 40%,
            /* var(--color1) 48%, */
            var(--color1) 49.5%,
            var(--color2) 50.5%,
            /* var(--color4) 52%, */
            transparent 60%);
    filter: opacity(0.66);
    mix-blend-mode: screen;
}

#playercard_dom.use3d.active:before,
#playercard_dom.use3d.active:after {
    animation: none;
    transform-style: preserve-3d;
}

#playercard_dom.use3d.active:after {
    filter: brightness(1);
    mix-blend-mode: screen;
}

.demo #playercard_dom.use3d:nth-of-type(1),
.demo #playercard_dom.use3d:nth-of-type(2),
.demo #playercard_dom.use3d:nth-of-type(3) {
    width: 124px;
    height: 170px;
    box-shadow: 0 0 1px 1px rgba(white, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
    animation: none;
}

.demo #playercard_dom.use3d:nth-of-type(1),
.demo #playercard_dom.use3d:nth-of-type(2),
.demo #playercard_dom.use3d:nth-of-type(3) {

    &:before,
    &:after {
        animation: none;
        opacity: 1;
    }
}

.demo #playercard_dom.use3d:nth-of-type(1) {

    &:before,
    &:after {
        display: none;
    }
}

.demo #playercard_dom.use3d:nth-of-type(2) {
    background: none;

    &:before {
        display: none;
    }
}

.demo #playercard_dom.use3d:nth-of-type(3) {
    background: none;

    &:before {
        background-position: center;
    }

    &:after {
        display: none;
    }
}

@keyframes holoSparkle {

    0%,
    5%,
    100% {
        opacity: 0.2;
        background-position: 50% 50%;
    }

    33% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(2);
    }

    45% {
        opacity: 0.4;
    }

    66% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(2);
    }
}

@keyframes holoGradient {

    0%,
    100% {
        opacity: 0.05;
        background-position: 50% 50%;
    }

    33% {
        background-position: 100% 100%;
        opacity: .66;
    }

    66% {
        background-position: 0% 0%;
        opacity: .66;
    }
}

@keyframes holoCard {

    0%,
    100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    33% {
        transform: rotateZ(-10deg) rotateX(20deg) rotateY(-12deg);
    }

    66% {
        transform: rotateZ(10deg) rotateX(-20deg) rotateY(12deg);
    }
}