#card {
    -webkit-clip-path: url("#svgPath");
    background: #ddd;
    clip-path: url("#svgPath");
    color: #725b16;
    display: block;
    height: 430px;
    margin: auto;
    opacity: 0;
    position: relative;
    transform: rotateY(-180deg);
    transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: 0.1s;
    width: 270px;
}

#card #card-inner {
    background: #aaa;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#card #card-inner #card-top {
    /*    background: #e1c072;
    background: linear-gradient(135deg, #fdeaa7 0%, #d8ad48 100%);*/
    height: 54%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

.bronze {
    background: #4A361A;
    background: linear-gradient(135deg, #E3AF66 0%, #bb6e4c 100%);
}

.silver {
    background: #aaaaaa;
    background: linear-gradient(135deg, aliceblue 0%, #dddddd 100%);
}

.gold {
    background: #e1c072;
    background: linear-gradient(135deg, #fdeaa7 0%, #d8ad48 100%);
}

#card #card-inner #card-top .backfont {
    bottom: -22px;
    font-size: 118px;
    font-style: italic;
    font-weight: 700;
    left: 0;
    letter-spacing: -5px;
    line-height: 1;
    opacity: 0;
    position: absolute;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

#card #card-inner #card-top .image {
    background-image: url("https://icon-library.com/images/no-user-image-icon/no-user-image-icon-26.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    height: 75%;
    opacity: 0;
    position: absolute;
    right: 10px;
    transition: 0.5s all ease-out 3s;
    width: 70%;
    z-index: 2;
}

#card #card-inner #card-top .info {
    bottom: 0;
    box-sizing: border-box;
    height: 75%;
    left: 0;
    padding: 0 5px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 30%;
    z-index: 3;
}

#card #card-inner #card-top .info div {
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1;
    opacity: 0;
    position: relative;
    top: 20px;
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

#card #card-inner #card-top .info div.value { font-size: 40px; }

#card #card-inner #card-top .info div.position { transition-delay: 1.25s; }

#card #card-inner #card-top .info div.country { transition-delay: 1.5s; }

#card #card-inner #card-top .info div.club { transition-delay: 1.75s; }

#card #card-inner #card-top .info div.position, #card #card-inner #card-top .info div.country {
    border-bottom: 2px solid rgba(253, 234, 167, 0.9);
    font-weight: 700;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

#card #card-inner #card-top .info div.country, #card #card-inner #card-top .info div.club {
    display: block;
    height: 25px;
    margin: 5px auto;
    position: relative;
    width: 40px;
}

#card #card-inner #card-top .info div.country div, #card #card-inner #card-top .info div.club div {
    background-position: center;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

#card #card-inner #card-top .info div.country.club, #card #card-inner #card-top .info div.club.club { height: 60px; }

#card #card-inner #card-top .info div.country.club div, #card #card-inner #card-top .info div.club.club div {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/214624/Juventus_Logo.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

#card #card-inner #card-bottom {
    bottom: 0;
    height: 46%;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

#card #card-inner #card-bottom:before {
    background: #fef2ca;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: -1px;
    width: 100%;
}

#card #card-inner #card-bottom .name {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0;
    opacity: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -5px;
    transition: 0.5s all ease-out 3.2s;
}

    #card #card-inner #card-bottom .stats {
        border-top: 0px solid #505050;
        margin: 0 40px;
        padding-top: 10px;
        position: relative;
        transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
    }

        #card #card-inner #card-bottom .stats:after {
            background: #505050;
            bottom: -6px;
            content: "";
            height: 1px;
            left: 0;
            margin: 0 auto;
            position: absolute;
            right: 0;
            transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
            width: 0;
        }

        #card #card-inner #card-bottom .stats:before {
            background: #505050;
            bottom: -6px;
            content: "";
            height: 0%;
            left: 0;
            margin: 5% auto;
            position: absolute;
            right: 0;
            transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
            width: 1px;
        }

#card #card-inner #card-bottom .stats div {
    display: inline-block;
    font-family: system-ui;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: top;
    width: 49%;
}

#card #card-inner #card-bottom .stats div:last-child ul { margin-left: 24px; }

#card #card-inner #card-bottom .stats ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#card #card-inner #card-bottom .stats ul li {
    display: block;
    left: 20px;
    margin: 0;
    margin-bottom: 5px;
    opacity: 0;
    padding: 0;
    position: relative;
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1) 2s;
}

#card #card-inner #card-bottom .stats ul li:nth-child(2) { transition-delay: 2.2s; }

#card #card-inner #card-bottom .stats ul li:nth-child(3) { transition-delay: 2.4s; }

#card #card-inner #card-bottom .stats ul li:nth-child(4) { transition-delay: 2.6s; }

#card #card-inner #card-bottom .stats ul li:nth-child(5) { transition-delay: 2.8s; }

#card #card-inner #card-bottom .stats ul li:nth-child(6) { transition-delay: 3s; }

#card #card-inner #card-bottom .stats ul li span {
    display: inline-block;
    position: relative;
}

#card #card-inner #card-bottom .stats ul li span:first-child {
    font-weight: 700;
    text-align: left;
    width: 30px;
}

#card.active {
    cursor: pointer;
    display: block;
    opacity: 1;
    transform: rotate(0deg);
}

#card.active #card-inner #card-top .image {
    opacity: 1;
    right: 0;
}

#card.active #card-inner #card-top .backfont {
    left: -8px;
    opacity: 0.1;
}

#card.active #card-inner #card-top .info div {
    opacity: 1;
    top: 0;
}

    #card.active #card-inner #card-bottom .stats {
        border-top: 1px solid #505050;
    }

#card.active #card-inner #card-bottom .stats:after { width: 25%; }

#card.active #card-inner #card-bottom .stats:before { height: 90%; }

#card.active #card-inner #card-bottom .stats ul li {
    left: 0;
    opacity: 1;
}

#card.active #card-inner #card-bottom .name {
    opacity: 1;
    top: 0;
}

/*SHINE*/
.sparkle {
    /*   margin-top: 10em; */
    width: 20px;
    height: 20px;
    position: relative;
    background: url(https://i.imgur.com/2T5M8.png?1);
    -webkit-animation: sparkle .5s infinite steps(1), movetop 2.5s infinite steps(1), moveleft 3.5s infinite steps(1)
}

@keyframes sparkle {
    0%, 100% {
        background-position: 0px 0
    }

    20% {
        background-position: 20px 0
    }

    40% {
        background-position: 40px 0
    }

    60% {
        background-position: 60px 0
    }

    80% {
        background-position: 80px 0
    }
}

@keyframes movetop {
    0%, 100% {
        top: 0;
    }

    40% {
        top: 85px;
    }

    60% {
        top: 40px;
    }

    80% {
        top: 110px;
    }

    100% {
        top: 20px
    }
}

@keyframes moveleft {
    0%, 100% {
        left: 50px
    }

    14.28% {
        left: 10px
    }

    28.57% {
        left: 90px
    }

    42.85% {
        left: 35px
    }

    57.14% {
        left: 20px
    }

    71.42% {
        left: 60px
    }

    85.71% {
        left: 80px
    }
}