/* ITEM */
.category-item {
    text-align: center;
    cursor: pointer;
}

/* ABSTRACT FLOWING SHAPE */
.circle-bg {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3D8FEF 0%, #2563eb 50%, #1d4ed8 100%);
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    box-shadow:
        0 10px 30px rgba(61, 143, 239, 0.4),
        0 20px 60px rgba(37, 99, 235, 0.2),
        inset 0 -2px 8px rgba(255, 255, 255, 0.3);
    animation: morphShape 10s ease-in-out infinite;
    overflow: hidden;
}

/* Flowing light streak */
.circle-bg::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(61, 143, 239, 0.6) 0%, transparent 50%);
    border-radius: 48% 52% 65% 35% / 42% 58% 42% 58%;
    animation: flowingLight 8s ease-in-out infinite reverse;
}

/* Depth layer */
.circle-bg::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: 5%;
    left: 15%;
    filter: blur(10px);
}

@keyframes morphShape {
    0%, 100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 48% 52% 68% 32% / 42% 61% 39% 58%;
        transform: rotate(5deg);
    }
    50% {
        border-radius: 38% 62% 43% 57% / 51% 44% 56% 49%;
        transform: rotate(-3deg);
    }
    75% {
        border-radius: 56% 44% 61% 39% / 68% 35% 65% 32%;
        transform: rotate(4deg);
    }
}

@keyframes flowingLight {
    0%, 100% {
        border-radius: 48% 52% 65% 35% / 42% 58% 42% 58%;
        transform: rotate(0deg) scale(1);
    }
    50% {
        border-radius: 35% 65% 48% 52% / 58% 42% 58% 42%;
        transform: rotate(180deg) scale(1.1);
    }
}

/* Alternative: Twisted ribbon shape */
.circle-bg.ribbon {
    border-radius: 45% 55% 65% 35% / 72% 28% 72% 28%;
    background: linear-gradient(165deg, #3D8FEF 0%, #60a5fa 50%, #3D8FEF 100%);
    box-shadow:
        0 12px 35px rgba(61, 143, 239, 0.5),
        0 25px 70px rgba(61, 143, 239, 0.25);
    animation: twistRibbon 12s ease-in-out infinite;
}

@keyframes twistRibbon {
    0%, 100% {
        border-radius: 45% 55% 65% 35% / 72% 28% 72% 28%;
        transform: rotate(0deg) scale(1);
    }
    33% {
        border-radius: 72% 28% 45% 55% / 35% 65% 35% 65%;
        transform: rotate(120deg) scale(1.05);
    }
    66% {
        border-radius: 28% 72% 55% 45% / 65% 35% 65% 35%;
        transform: rotate(240deg) scale(1);
    }
}

/* Alternative: Asymmetric wave */
.circle-bg.wave {
    border-radius: 73% 27% 39% 61% / 48% 71% 29% 52%;
    background: 
        linear-gradient(220deg, rgba(61, 143, 239, 0.9) 0%, #3D8FEF 100%),
        radial-gradient(circle at 70% 30%, rgba(96, 165, 250, 0.8) 0%, transparent 60%);
    box-shadow:
        0 8px 25px rgba(61, 143, 239, 0.45),
        0 18px 55px rgba(29, 78, 216, 0.3);
    animation: waveFlow 9s ease-in-out infinite;
}

@keyframes waveFlow {
    0%, 100% {
        border-radius: 73% 27% 39% 61% / 48% 71% 29% 52%;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        border-radius: 27% 73% 61% 39% / 71% 48% 52% 29%;
        transform: translateY(-5px) rotate(8deg);
    }
}

/* PRODUCT IMAGE */
.product-img {
    width: 120px;
    transition: transform 0.25s ease;
}

/* TEXT */
.category-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

/* HOVER EFFECT */
.category-item:hover .product-img {
    transform: scale(1.05);
}