/* 
   ScrollFX - Lightweight Scroll Animations 
   No external libraries. Pure CSS + IntersectionObserver.
*/

/* 1. Base State: Elements start hidden or in initial state */
[data-fx] {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.8s ease;
}

/* 2. Active State: When .fx-in is added by JS */
[data-fx].fx-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* 3. Animation Types */

/* Fade Up: Moves up slightly and fades in */
[data-fx="fade-up"] {
    transform: translateY(30px);
}

/* Blur In: Fades in from a blur */
[data-fx="blur-in"] {
    filter: blur(10px);
    transform: scale(0.95);
}

/* Slide Left: Enters from the left */
[data-fx="slide-left"] {
    transform: translateX(-50px);
}

/* Slide Right: Enters from the right */
[data-fx="slide-right"] {
    transform: translateX(50px);
}

/* Zoom Soft: Gentle zoom in */
[data-fx="zoom-soft"] {
    opacity: 0;
    transform: scale(0.92);
}

/* Reveal Mask: Simplified to avoid visibility issues */
[data-fx="reveal-mask"] {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(5px);
}

[data-fx="reveal-mask"].fx-in {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* 4. Delays (Utility classes generared dynamically via style attribute in HTML, 
   but we can add some standard classes if preferred. 
   Here we rely on the inline style set by JS or manual CSS) */

/* 5. Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    [data-fx] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}