/* Custom Styles to complement TailwindCSS */

.animation-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Custom modern scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc; /* slate-50 */
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Remove default blue outline on focus, replacing with tailwind ring visually if needed */
button:focus, a:focus {
    outline: none;
}