/* Base state for all animated elements */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Fade Directions */
.fade-up    { transform: translateY(100px); }
.fade-down  { transform: translateY(-100px); }
.fade-left  { transform: translateX(100px); }
.fade-right { transform: translateX(-100px); }

/* Zoom Animations */
.zoom-in    { transform: scale(0.8); }
.zoom-out   { transform: scale(1.2); }

/* Rotation Animations */
.rotate-left  { transform: rotate(-15deg) scale(0.9); }
.rotate-right { transform: rotate(15deg) scale(0.9); }

/* Active State (The Goal) */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
}