@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}

.card-item[data-rarity="4"] .img-back:hover,
.card-item[data-rarity="5"] .img-back:hover,
.card-item[data-rarity="6"] .img-back:hover,
.card-item[data-rarity="7"] .img-back:hover,
.card-item[data-is-alternative="1"] .img-back:hover {
    -webkit-animation-name: shakeY;
    animation-name: shakeY;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.card-item.flipped[data-rarity="4"]::before,
.card-item.flipped[data-rarity="5"]::before,
.card-item.flipped[data-rarity="6"]::before,
.card-item.flipped[data-rarity="7"]::before,
.card-item.flipped[data-is-alternative="1"]::before {
    content: "";
    width: 94%;
    height: 104%;
    border-radius: 12px;
    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    display: block;
    z-index: 0;
    top: -2%;
    left: 3%;
    animation: spin 2.5s linear infinite;
}

.card-item.flipped .img-card {
    box-shadow: 0 0 12px 2px #000;
    border-radius: 12px;
}

@keyframes spin {
    0% {
        --rotate: 0deg;
    }

    100% {
        --rotate: 360deg;
    }
}