/* 
 * High-Performance Animation Utility Classes 
 * Include this file in your main CSS or layout head.
 */

/* Base State - Hidden & Prepared for Transition */
.animate-on-scroll {
    opacity: 0;
    /* Default transition values */
    transition-property: opacity, transform;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* Elegant easing */
}

/* Reduced Motion Override */
.reduced-motion .animate-on-scroll {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* --- Presets (Initial States) --- */

/* Vertical Slide */
.fade-in-up { transform: translateY(50px); }
.fade-in-down { transform: translateY(-50px); }

/* Horizontal Slide */
.fade-in-left { transform: translateX(50px); }
.fade-in-right { transform: translateX(-50px); }

/* Focal Expansion */
.scale-up-smooth { transform: scale(0.9); }

/* Mobile Adaptability via Media Queries */
@media (max-width: 768px) {
    .fade-in-up { transform: translateY(30px); }
    .fade-in-down { transform: translateY(-30px); }
    .fade-in-left { transform: translateX(30px); }
    .fade-in-right { transform: translateX(-30px); }
}

/* --- Active State (Triggered by JS) --- */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}