/* Base animation properties */
.fade-in-element {
    opacity: 0;
    transition: all 1.4s ease-out;
}

.slide-in-left {
    transform: translateX(-100px);
}

.slide-in-right {
    transform: translateX(100px);
}

.scale-in {
    transform: scale(0.8);
}

/* Visible state - applied when elements come into view */
.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Optional loading animation for heavy elements */
img[loading="lazy"] {
    transition: opacity 0.5s ease-in-out;
}

/* Section-specific animations */
#vision .md\:w-1\/2 {
    transition-delay: 0.2s;
}

#programs .group {
    transition-delay: calc(var(--animation-order, 0) * 0.1s);
}

#goals .group {
    transition-delay: calc(var(--animation-order, 0) * 0.15s);
}

/* Card animations */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Section header animations */
.section-header {
    transition-delay: 0.1s;
}

/* Add smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Optional: Add animation pause for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}