/* Fire-themed animation for completed days */
@keyframes fireUp {
    0% {
        transform: scale(0.5) rotate(-10deg);
        opacity: 0;
        filter: brightness(2) saturate(2);
    }
    40% {
        transform: scale(1.2) rotate(5deg);
        filter: brightness(1.5) saturate(1.5);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}

.day-complete-animation {
    animation: fireUp 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Smooth transitions for hover effects */
.day-cell {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.day-cell:hover {
    transform: translateY(-4px) scale(1.05);
    filter: brightness(1.2);
}

.day-cell::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent, rgba(239, 68, 68, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0.5rem;
    pointer-events: none;
}

.day-cell:hover::before {
    opacity: 1;
}

/* Red pulse animation for today's cell */
@keyframes redPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

.today-pulse {
    animation: redPulse 2s infinite;
}

/* Counter animation with fire effect */
@keyframes countUp {
    0% {
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1) translateY(-2px);
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(239, 68, 68, 0.8));
    }
    100% {
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
}

.counter-bump {
    animation: countUp 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Flame flicker for main title */
@keyframes flameFlicker {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.5)) 
                drop-shadow(0 0 40px rgba(249, 115, 22, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.7)) 
                drop-shadow(0 0 60px rgba(249, 115, 22, 0.5));
    }
}

#habitName {
    animation: flameFlicker 3s ease-in-out infinite;
}

/* Glow effect for completed cells */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(239, 68, 68, 0.5),
            inset 0 0 20px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(239, 68, 68, 0.7),
            inset 0 0 25px rgba(239, 68, 68, 0.3);
    }
}

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

/* Fancy hover for buttons */
@keyframes buttonHover {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.fancy-button {
    background-size: 200% 200%;
    animation: buttonHover 3s ease infinite;
}

/* Loading shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(239, 68, 68, 0.1),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}