/* --- Animation Keyframes --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}


/* --- Base State for Animated Elements --- */
.animate-on-scroll {
    opacity: 0; /* Start hidden */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* --- Specific Animation Classes (to be applied by JS) --- */
.animate-on-scroll.fade-in { animation-name: fadeIn; }
.animate-on-scroll.fade-in-up { animation-name: fadeInUp; }
.animate-on-scroll.slide-in-left { animation-name: fadeInLeft; }
.animate-on-scroll.slide-in-right { animation-name: fadeInRight; }
.animate-on-scroll.zoom-in { animation-name: zoomIn; }
.animate-on-scroll.scale-in { animation-name: scaleIn; }

/* When the 'animated' class is added by JS */
.animate-on-scroll.animated {
    opacity: 1;
    transform: none; /* Reset transforms */
    animation-fill-mode: forwards; /* Keep the final state */
    animation-duration: 0.8s; /* Adjust duration as needed */
    animation-timing-function: ease-out;
}

/* Apply animation delays from data-delay attribute */
/* JS will need to read data-delay and set style.animationDelay */