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

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

.fade-in[style*="animation-delay"] {
    animation-delay: var(--delay, 0s);
}

/* Додаткові стилі для анімацій, які не можна реалізувати через Tailwind */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Mobile specific styles */
@media (max-width: 767px) {
    .navbar-burger {
        display: flex !important;
        cursor: pointer;
        z-index: 60;
        position: relative;
    }
    
    .navbar-menu {
        z-index: 50;
    }
    
    .navbar-menu nav {
        width: 80% !important;
        max-width: 300px;
    }
    
    .navbar-backdrop {
        z-index: 40;
    }
    
    /* Fix for burger menu icon */
    .navbar-burger svg {
        transition: transform 0.3s ease;
        width: 24px;
        height: 24px;
    }
    
    /* Improve mobile menu animation */
    .navbar-menu.hidden {
        display: none;
    }
    
    /* Improve touch targets for mobile */
    .navbar-menu nav a {
        padding: 12px !important;
    }
    
    /* Ensure the mobile menu button is visible */
    #mobile-menu-btn {
        display: block !important;
        padding: 10px;
    }
    
    /* Fix for navbar on mobile */
    nav.relative {
        padding: 1rem 0.75rem;
    }
}

/* Fix for sidebar on mobile */
body.is-mobile #sidebar {
    position: fixed !important;
    z-index: 50 !important;
}

/* Overlay for mobile sidebar */
#overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}