/* -------------------- Initial hidden state -------------------- */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* -------------------- Active state when in viewport -------------------- */
.fade-in-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}