@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
            font-family: 'montserrat', sans-serif;
            scroll-behavior: smooth;
            transition: background-color 0.3s ease, color 0.3s ease; 
            z-index: 0;
}

/* Keyframes for the fade-in and slide-up animation */
@keyframes fadeInUpOnScroll {
    from {
        opacity: 0;
        transform: translateY(30px); /* Starts 30px below its final position */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Ends at its final position */
    }
}

/* Initial state: Hidden and no transition */
.initial-hidden {
    opacity: 0;
    transform: translateY(30px); /* Starts below */
    transition: none; /* Crucial: Prevents a flicker on page load before JS takes over */
}

/* Class to apply the animation when observed */
.animate-on-intersect {
    animation: fadeInUpOnScroll 0.8s ease-out forwards; /* 0.8s duration, ease-out timing, keeps final state */
}