.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 0.8s ease forwards;
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.breathing-circle {
    width: 100px;
    height: 100px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: breathe 4s infinite ease-in-out;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 1; }
}