@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,800;1,800&display=swap');

svg {
    width: 100%;
    height: 25%;
    margin-top: 20px;
}

svg text {
    font-size: 12vw;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
    stroke: #00acac;
    text-stroke: 2px transparent;
    fill: transparent;
    margin-top: 30px;

    animation: animated-stroke 5s;
    text-anchor: middle;
}

@keyframes animated-stroke {
    0% {

        stroke: #0063e5;

        stroke-dasharray: 0 10%;
    }
    50% {
        stroke: #0063e5;
    }

    100% {
        stroke: #00acac;
        stroke-dasharray: 10% 0%;
        stroke-dashoffset: 25%;
    }
}


.card {
    width: 250px;
    height: 370px;
    border-radius: 12px;
    transform-style: preserve-3d;
}

.card.blue {
    background: linear-gradient(135deg, #09AFFF, #125575);
}

.card.purple {
    background: linear-gradient(135deg, #5911F2, #290987);
}

.card .product {
    height: 85%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
}

.product .number {
    font-size: 80px;
    line-height: 80px;
    font-style: italic;
    opacity: 0.25;
    color: #ffffff;
    font-weight: 800;
}

.product .sneakers {
    font-size: 35px;
    line-height: 35px;
    font-style: italic;
    opacity: 0.7;
    color: #fff;
    font-weight: 800;
}

.product img {
    height: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-35%, -45%, 0);
    pointer-events: none;
    filter: drop-shadow(10px 7px 10px black);
}

.product .price {
    background: rgba(255, 255, 255, 0.15);
    margin-top: auto;
    margin-left: auto;
    margin-right: -20px;
    padding: 5px 20px;
    border-radius: 99px 0 0 99px;
    color: #fff;
    font-weight: 800;
}

.card .title {
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 12px 12px;
    transform-style: preserve-3d;
    color: #fff;
    font-weight: 800;
}

.card.blue .title {
    background: #039BE5;
}

.card.purple .title {
    background: #5B1AE3;
}

.card:hover .product img {
    transform: translate3d(-50%, -40%, 80px);
}

.card:hover .product .number {
    transform: translateZ(40px);
    opacity: 1;
}

.card:hover .product .sneakers {
    transform: translateZ(40px);
    opacity: 0.85;
}

.card:hover .product .price {
    transform: translateZ(20px);
}

.card:hover .title h2 {
    transform: translateZ(20px);
}

@media (max-width: 1300px) {
    svg {
        height: 15%;
    }
}