/* Use the Inter font family */
body {
    font-family: 'Inter', sans-serif;
}

/* Keyframes for the fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for the button fade-in animation */
@keyframes fadeInButton {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for background fade-in */
@keyframes fadeInBackground {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Class to apply the text animation - initially hidden, shows via JS */
.fade-in-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Class to apply the button animation - initially hidden, shows via JS */
.fade-in-button {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Class to apply the background image fade-in - loads first */
.fade-in-bg {
    animation: fadeInBackground 2s ease-in-out;
}

/* Fade-in scroll animations */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sequential fade-in animations for about and initiatives pages */
.fade-in-sequence {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-sequence.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Special class for the intro section background to fade in */
.intro-section {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.intro-section.visible {
    opacity: 1;
}

/* Content within intro section starts hidden */
.intro-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.intro-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay classes */
.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }
.fade-delay-5 { transition-delay: 0.5s; }
.fade-delay-6 { transition-delay: 0.6s; }
.fade-delay-7 { transition-delay: 0.7s; }
.fade-delay-8 { transition-delay: 0.8s; }
.fade-delay-9 { transition-delay: 0.9s; }