.action-btn,
.favorite-btn,
.heart-icon {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.action-btn.active,
.favorite-btn.active,
.heart-icon.active {
    animation: heartBeat 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.3);
    }
    30% {
        transform: scale(0.9);
    }
    45% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(0.95);
    }
}

.action-btn.active i,
.favorite-btn.active i,
.heart-icon.active svg,
.heart-icon.active path {
    fill: #e74c3c;
    stroke: #e74c3c;
    color: #e74c3c;
}

.action-btn::before,
.favorite-btn::before,
.heart-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.favorite-action-btn::before,
.favorite-action-btn::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    animation: none !important;
    transform: none !important;
}

.favorite-action-btn:hover::before,
.favorite-action-btn:hover::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    animation: none !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.action-btn.active::before,
.favorite-btn.active::before,
.heart-icon.active::before {
    animation: heartRipple 0.6s ease-out;
    background: transparent !important;
    border: 2px solid transparent !important;
}

@keyframes heartRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

.action-btn:hover,
.favorite-btn:hover,
.heart-icon:hover {
    transform: scale(1.1);
}

.action-btn:active,
.favorite-btn:active,
.heart-icon:active {
    transform: scale(0.9);
}

.heart-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 100;
}

.heart-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #e74c3c;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 1s ease-out forwards;
}

.heart-particle:nth-child(1) { animation-delay: 0s; transform: translate(-50%, -50%) rotate(0deg); }
.heart-particle:nth-child(2) { animation-delay: 0.05s; transform: translate(-50%, -50%) rotate(45deg); }
.heart-particle:nth-child(3) { animation-delay: 0.1s; transform: translate(-50%, -50%) rotate(90deg); }
.heart-particle:nth-child(4) { animation-delay: 0.15s; transform: translate(-50%, -50%) rotate(135deg); }
.heart-particle:nth-child(5) { animation-delay: 0.2s; transform: translate(-50%, -50%) rotate(180deg); }
.heart-particle:nth-child(6) { animation-delay: 0.25s; transform: translate(-50%, -50%) rotate(225deg); }
.heart-particle:nth-child(7) { animation-delay: 0.3s; transform: translate(-50%, -50%) rotate(270deg); }
.heart-particle:nth-child(8) { animation-delay: 0.35s; transform: translate(-50%, -50%) rotate(315deg); }

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-40px) scale(0);
    }
}

.favorite-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    animation: badgePop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes badgePop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-btn,
    .favorite-btn,
    .heart-icon {
        animation: none !important;
        transition: none;
    }
    
    .action-btn::before,
    .favorite-btn::before,
    .heart-icon::before,
    .heart-particle {
        animation: none !important;
    }
}