.heart-container {
    cursor: pointer;
    position: relative;
}

.fill-percentage {
    font-size: 18px;
    font-weight: bold;
    color: #ff4757;
    margin-top: 10px;
}

.heart-segment {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.heart-segment:hover {
    filter: brightness(1.2) saturate(1.2) !important;
    transform: scale(1.05);
    transform-origin: center;
}

.heart-svg {
    animation: gentleBob 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes gentleBob {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    25% { 
        transform: translateY(-3px) rotate(0.5deg); 
    }
    50% { 
        transform: translateY(-5px) rotate(0deg); 
    }
    75% { 
        transform: translateY(-2px) rotate(-0.5deg); 
    }
}

@keyframes heartbeat {
    0%, 100% { 
        transform: scale(1) translateY(0px); 
    }
    14% { 
        transform: scale(1.15) translateY(-2px); 
    }
    28% { 
        transform: scale(1.05) translateY(-1px); 
    }
    42% { 
        transform: scale(1.2) translateY(-3px); 
    }
    70% { 
        transform: scale(1.02) translateY(0px); 
    }
}

@keyframes sparkle {
    0% { 
        opacity: 0; 
        transform: scale(0) rotate(0deg); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1) rotate(180deg); 
    }
    100% { 
        opacity: 0; 
        transform: scale(0) rotate(360deg); 
    }
}

.heartbeat-animation {
    animation: heartbeat 1.5s ease-in-out 3 !important;
}

.sparkle {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    animation: sparkle 1s ease-out forwards;
}