@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes bubbleGrow {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes walkCycle {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-2cqh);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes packItem {
    0% {
        transform: translate(-50%, -50%) scale(1);
        top: 50cqh;
        left: 50cqw;
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        top: 85cqh;
        left: 50cqw;
        opacity: 0.5;
    }
}

.fade-in {
    animation: fadeIn 1s forwards;
}

.fade-out {
    animation: fadeOut 1s forwards;
}

.bubble-grow {
    animation: bubbleGrow 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.walking {
    animation: walkCycle 0.5s infinite ease-in-out;
}

.packing-item-anim {
    position: absolute;
    z-index: 100;
    animation: packItem 1.5s ease-in-out forwards;
}

@keyframes danceIdle {
    0% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) translateY(-0.5cqh) rotate(0.5deg);
    }
    50% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    75% {
        transform: translateX(-50%) translateY(0.5cqh) rotate(-0.5deg);
    }
    100% {
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
}

@keyframes bounceIdle {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes bubblePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes danceAndPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-50%, -50%) scale(1.08) rotate(-4deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.92) rotate(0deg);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
    }
}

.dance-pulse {
    animation: danceAndPulse 2s infinite ease-in-out;
}

@keyframes confettiFly {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--x-distance), var(--y-distance), 0) rotate(var(--rotation));
        opacity: 0;
    }
}

.confetti-particle {
    position: absolute;
    width: 1.5cqw;
    height: 1.5cqw;
    z-index: 100;
    pointer-events: none;
    animation: confettiFly var(--duration) cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}