.task-item {
    transition: all 0.2s ease;
}

.task-item:hover {
    transform: translateY(-2px);
}

.task-complete {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Animation for task addition/removal */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.task-enter {
    animation: fadeIn 0.3s ease forwards;
}