/* Animations */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(107, 70, 193, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(107, 70, 193, 0);
    }
}

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(107, 70, 193, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(107, 70, 193, 1));
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Apply animations */
.header {
    animation: fadeInDown 0.8s ease;
}

.card {
    animation: fadeInUp 0.8s ease;
}

.prayer-item.current {
    animation: pulse 2s infinite;
}

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

.notification-badge {
    animation: bounceIn 0.5s ease;
}

/* Streak celebration animation */
@keyframes celebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

.streak-celebrate {
    animation: celebrate 0.5s ease;
}

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

.shake {
    animation: shake 0.3s ease;
}