/**
 * InView Animation Styles
 * Provides smooth scroll-triggered animations
 */

/* Base animation setup */
[data-in-view] {
    transition-property: opacity, transform, filter;
    transition-timing-function: ease-in-out;
}

/* Hidden state (before element comes into view) */
.in-view-hidden {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(4px);
}

/* Visible state (when element is in view) */
.in-view-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* Default animation duration */
[data-in-view] {
    transition-duration: 0.3s;
}

/* Custom animation durations */
[data-in-view][data-duration="fast"] {
    transition-duration: 0.2s;
}

[data-in-view][data-duration="slow"] {
    transition-duration: 0.6s;
}

[data-in-view][data-duration="slower"] {
    transition-duration: 0.8s;
}

/* Animation variants */

/* Fade only (no movement) */
[data-in-view][data-variant="fade"] .in-view-hidden {
    opacity: 0;
    transform: none;
    filter: none;
}

[data-in-view][data-variant="fade"] .in-view-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Slide from left */
[data-in-view][data-variant="slide-left"] .in-view-hidden {
    opacity: 0;
    transform: translateX(-100px);
    filter: blur(4px);
}

[data-in-view][data-variant="slide-left"] .in-view-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
}

/* Slide from right */
[data-in-view][data-variant="slide-right"] .in-view-hidden {
    opacity: 0;
    transform: translateX(100px);
    filter: blur(4px);
}

[data-in-view][data-variant="slide-right"] .in-view-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
}

/* Scale up */
[data-in-view][data-variant="scale"] .in-view-hidden {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
}

[data-in-view][data-variant="scale"] .in-view-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}

/* Slide from bottom (default) */
[data-in-view][data-variant="slide-up"] .in-view-hidden,
.in-view-hidden {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(4px);
}

[data-in-view][data-variant="slide-up"] .in-view-visible,
.in-view-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [data-in-view] {
        transition-duration: 0.01ms !important;
    }
    
    .in-view-hidden {
        opacity: 0;
        transform: none !important;
        filter: none !important;
    }
    
    .in-view-visible {
        opacity: 1;
        transform: none !important;
        filter: none !important;
    }
}