/* Animations for Dunia Ceria Gala */

/* Bounce animation for mascot */
@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mascot {
    animation: bounce-gentle 2s ease-in-out infinite;
}

/* Wiggle bounce for interactive hotspots */
@keyframes hotspotWiggle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.12) rotate(-8deg);
    }
    50% {
        transform: scale(1.15) rotate(6deg);
    }
    75% {
        transform: scale(1.08) rotate(-4deg);
    }
}

.hotspot-wiggle {
    animation: hotspotWiggle 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Tap hint animation */
@keyframes tap-hint {
    0%, 100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) translateY(-10px);
        opacity: 0.7;
    }
}

/* Balloon floating animation */
@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(var(--drift, 0));
        opacity: 0.8;
    }
}

.balloon {
    position: absolute;
    width: 80px;
    height: 100px;
    cursor: pointer;
    touch-action: none;
    animation: float-up linear forwards;
}

/* Balloon pop animation */
@keyframes pop-burst {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Confetti particle animation */
@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    animation: confetti-fall 2s ease-out forwards;
}

/* Star particle animation */
@keyframes star-burst {
    0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(1) rotate(180deg);
        opacity: 0;
    }
}

.star-particle {
    position: absolute;
    pointer-events: none;
    font-size: 1.5rem;
    animation: star-burst 0.8s ease-out forwards;
}

/* Wobble animation for incorrect selection */
@keyframes wobble {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

.wobble {
    animation: wobble 0.4s ease-in-out;
}

/* Pulse animation for new sticker */
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 16px rgba(255, 215, 77, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 24px rgba(255, 215, 77, 0.6);
    }
}

.pulse-glow {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Fade in animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in 0.4s ease-out forwards;
}

/* Scale in animation */
@keyframes scale-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in {
    animation: scale-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Slide in from bottom */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    animation: slide-up 0.4s ease-out forwards;
}

/* Celebration animation */
@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-10deg);
    }
    75% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.celebrate {
    animation: celebrate 0.6s ease-in-out;
}

/* Animasi khusus Kebun Binatang Cilik */
@keyframes animal-jump {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.15, 0.85) translateY(0);
    }
    60% {
        transform: scale(0.9, 1.15) translateY(-28px);
    }
    80% {
        transform: scale(1.05, 0.95) translateY(0);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.bounce-tap {
    animation: animal-jump 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gentle-hint-wiggle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    20% {
        transform: rotate(-6deg) scale(1.04);
    }
    40% {
        transform: rotate(6deg) scale(1.04);
    }
    60% {
        transform: rotate(-4deg) scale(1.02);
    }
    80% {
        transform: rotate(4deg) scale(1.02);
    }
}

.gentle-hint {
    animation: gentle-hint-wiggle 0.9s ease-in-out;
}

@keyframes bubble-pop-in {
    0% {
        transform: scale(0) translateY(10px);
        opacity: 0;
    }
    70% {
        transform: scale(1.1) translateY(-5px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes pulse-prompt-anim {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.06);
    }
}

.pulse-prompt {
    animation: pulse-prompt-anim 0.4s ease-in-out;
}

@keyframes matched-glow {
    0%, 100% {
        box-shadow: 0 10px 0 var(--animal-border), 0 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        box-shadow: 0 10px 0 var(--animal-border), 0 0 35px 12px rgba(255, 215, 0, 0.8);
        transform: scale(1.05);
    }
}

.matched-card {
    animation: matched-glow 1s ease-in-out forwards;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .mascot {
        animation: none;
    }
}