/**
 * Comment Popup Animations
 * Adds smooth animations when comments load and appear
 */

/* Fade in animation for comments when they load */
.comment-popup-item {
    animation: commentFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(15px);
}

/* Stagger the animation for each comment */
.comment-popup-item:nth-child(1) {
    animation-delay: 0.05s;
}

.comment-popup-item:nth-child(2) {
    animation-delay: 0.1s;
}

.comment-popup-item:nth-child(3) {
    animation-delay: 0.15s;
}

.comment-popup-item:nth-child(4) {
    animation-delay: 0.2s;
}

.comment-popup-item:nth-child(5) {
    animation-delay: 0.25s;
}

.comment-popup-item:nth-child(6) {
    animation-delay: 0.3s;
}

.comment-popup-item:nth-child(7) {
    animation-delay: 0.35s;
}

.comment-popup-item:nth-child(8) {
    animation-delay: 0.4s;
}

.comment-popup-item:nth-child(9) {
    animation-delay: 0.45s;
}

.comment-popup-item:nth-child(10) {
    animation-delay: 0.5s;
}

/* For comments beyond 10, use a base delay */
.comment-popup-item:nth-child(n+11) {
    animation-delay: 0.55s;
}

@keyframes commentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reply items animation */
.comment-popup-reply-item {
    animation: replySlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateX(-10px);
}

.comment-popup-reply-item:nth-child(1) {
    animation-delay: 0.05s;
}

.comment-popup-reply-item:nth-child(2) {
    animation-delay: 0.1s;
}

.comment-popup-reply-item:nth-child(3) {
    animation-delay: 0.15s;
}

.comment-popup-reply-item:nth-child(4) {
    animation-delay: 0.2s;
}

.comment-popup-reply-item:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes replySlideIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Smooth transition when replies container expands */
.comment-popup-replies {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

/* Loading skeleton animation */
.comments-skeleton {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}

/* Empty state fade in */
.comments-empty {
    animation: emptyStateFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

@keyframes emptyStateFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Error state animation */
.comments-error {
    animation: errorShake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* New comment being added animation */
.comment-popup-item.new-comment {
    animation: newCommentHighlight 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes newCommentHighlight {
    0% {
        background: rgba(76, 175, 80, 0.2);
        transform: scale(1.02);
    }
    100% {
        background: transparent;
        transform: scale(1);
    }
}

/* Smooth hover effects on comment items */
.comment-popup-item {
    transition: background 0.2s ease, transform 0.2s ease;
}

.comment-popup-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Avatar animation on load */
.comment-popup-avatar img,
.comment-popup-reply-avatar img {
    animation: avatarZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes avatarZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Button interactions */
.comment-popup-like-btn,
.comment-popup-reply-like-btn,
.comment-popup-reply-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-popup-like-btn:active,
.comment-popup-reply-like-btn:active {
    transform: scale(0.95);
}

/* Heart pop animation (already exists but ensuring smooth transition) */
.heart-pop {
    animation: heartPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes heartPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}