/* Gamification Animations */

/* Checkbox pop animation */
@keyframes checkbox-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.checkbox-pop {
    animation: checkbox-pop 0.3s ease-out;
}

/* Checkmark draw animation */
@keyframes checkmark-draw {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkbox-checked .checkmark-icon path {
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    animation: checkmark-draw 0.3s ease-out;
}

/* Streak counter animation */
@keyframes streak-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.streak-animate {
    animation: streak-pulse 0.5s ease-out;
}

/* XP bar fill animation */
@keyframes xp-fill {
    from {
        width: var(--xp-start, 0%);
    }
    to {
        width: var(--xp-end, 100%);
    }
}

.xp-bar-fill {
    animation: xp-fill 0.8s ease-out forwards;
}

/* Level up glow */
@keyframes level-up-glow {
    0% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.8), 0 0 60px rgba(236, 72, 153, 0.4);
    }
    100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
    }
}

.level-up-glow {
    animation: level-up-glow 1s ease-in-out 3;
}

/* Achievement badge glow */
@keyframes badge-glow {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
    100% {
        filter: brightness(1);
    }
}

.badge-glow {
    animation: badge-glow 2s ease-in-out infinite;
}

/* Badge unlock animation */
@keyframes badge-unlock {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.badge-unlock {
    animation: badge-unlock 0.6s ease-out;
}

/* Heat map cell hover */
.heatmap-cell {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.heatmap-cell:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
    z-index: 10;
}

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

.fade-in-up {
    animation: fade-in-up 0.3s ease-out;
}

/* Shake animation for streak loss warning */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

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

.bounce {
    animation: bounce 0.5s ease-in-out;
}

/* Fire flicker for streak icon */
@keyframes fire-flicker {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.fire-flicker {
    animation: fire-flicker 0.5s ease-in-out infinite;
}