/**
 * Animations CSS
 * Contains all keyframe animations for the FuckLiving app
 */

/* Star burst animation */
@keyframes starBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(var(--end-x) - var(--start-x, 0)),
            calc(var(--end-y) - var(--start-y, 0))
        ) scale(0);
        opacity: 0;
    }
}

/* Shooting star animation */
@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 20px)) translateY(100px);
        opacity: 0;
    }
}

/* Ghost dance animation */
@keyframes ghostDance {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-5deg);
    }
    50% {
        transform: translateY(-20px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* Hashtag suggestion fade in/out */
@keyframes hashtagFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hashtagFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Success message animation */
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* Apply animations to elements */
.hashtag-suggestion {
    animation: hashtagFadeIn 0.3s ease-out;
}

.success-message {
    animation: successPulse 0.5s ease-out;
}

.error-message {
    animation: errorShake 0.5s ease-out;
}

/* Star particle styles */
.star-particle {
    pointer-events: none;
    z-index: 100;
}

/* Shooting star styles */
.shooting-star {
    z-index: 50;
}

/* Enhanced star twinkling */
.star {
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Ghost hover effect */
.ghost-main:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Tombstone hover effect */
.tombstone-central:hover .name-text {
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700;
    transition: all 0.3s ease;
}