@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.animate-fade-in {
    animation: fade-in 0.2s ease-out;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Backdrop blur support for older browsers */
@supports not (backdrop-filter: blur(12px)) {
    nav {
        background-color: rgba(255, 255, 255, 0.95);
    }

    #mobile-menu {
        background-color: rgba(255, 255, 255, 0.95);
    }
}