/* Like animation styles - Base version, for detailed styles please refer to like-system.css */
.like-animation {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    --rotation: 0deg;
    --random-x: 0px;
}

/* Like floating animation */
@keyframes likeFloat {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(var(--rotation));
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.2) rotate(var(--rotation));
        opacity: 0.9;
    }
    100% {
        transform: translate(calc(-50% + var(--random-x, 0px)), calc(-50% - 50px)) scale(1) rotate(var(--rotation));
        opacity: 0;
    }
}

/* Heart icon styles */
.like-animation svg {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
}

/* Heart icons in different colors */
.like-animation[data-color="red"] svg {
    filter: drop-shadow(0 0 3px rgba(255,0,0,0.5));
}

.like-animation[data-color="pink"] svg {
    filter: drop-shadow(0 0 3px rgba(255,105,180,0.5));
}

.like-animation[data-color="light-pink"] svg {
    filter: drop-shadow(0 0 3px rgba(255,182,193,0.5));
}

/* Basic animation definitions, for detailed animations please refer to like-system.css */
.like-animation {
    animation: likeFloat 1s ease-out forwards;
}

/* Staggered effect for multiple like animations */
.like-animation:nth-child(2) {
    animation-delay: 0.1s;
}

.like-animation:nth-child(3) {
    animation-delay: 0.2s;
}

.like-animation:nth-child(4) {
    animation-delay: 0.3s;
}

.like-animation:nth-child(5) {
    animation-delay: 0.4s;
}

/* Responsive design */
@media (max-width: 480px) {
    .like-animation {
        --random-x: calc(var(--random-x) * 0.8);
    }
}

/* Like button click effect */
.like-button.clicked {
    animation: likeButtonClick 0.3s ease-out;
}

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

/* Like count update animation */
.action-count.updating {
    animation: countUpdate 0.3s ease-out;
}

@keyframes countUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Continuous like effect */
.like-animation.rapid {
    animation-duration: 0.8s;
}

.like-animation.rapid:nth-child(2) {
    animation-delay: 0.05s;
}

.like-animation.rapid:nth-child(3) {
    animation-delay: 0.1s;
}

.like-animation.rapid:nth-child(4) {
    animation-delay: 0.15s;
}

.like-animation.rapid:nth-child(5) {
    animation-delay: 0.2s;
}

/* Special effects */
.like-animation.special {
    animation: likeFloatSpecial 1.2s ease-out forwards;
}

@keyframes likeFloatSpecial {
    0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(var(--rotation));
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.5) rotate(var(--rotation));
        opacity: 1;
    }
    60% {
        transform: translate(calc(-50% + var(--random-x, 0px)), calc(-50% - 30px)) scale(1.2) rotate(var(--rotation));
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--random-x, 0px)), calc(-50% - 80px)) scale(1) rotate(var(--rotation));
        opacity: 0;
    }
}