/* =========================================
   ANIMATIONS.CSS
   Simple fade-in animations for scroll reveal
   ========================================= */

/* Base class to hide elements before they scroll into view */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* Class added by JS when element is in viewport */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid items */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Keyframe animations for other uses */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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