/* ==========================================================================
   lx-animations.css — Scroll-triggered entrance animations
   Usage: Add data-animate="fade-in|slide-up|slide-in-left|slide-in-right|stagger"
          Add data-hover="lift" for hover effects
   ========================================================================== */

/* --- Base: hide elements until observed --- */
[data-animate] {
    opacity: 0;
}

[data-animate].lx-visible {
    opacity: 1;
}

/* --- Animation types --- */
[data-animate="fade-in"].lx-visible {
    animation: lxFadeIn 0.6s ease-out forwards;
}

[data-animate="slide-up"].lx-visible {
    animation: lxSlideUp 0.6s ease-out forwards;
}

[data-animate="slide-in-left"].lx-visible {
    animation: lxSlideInLeft 0.6s ease-out forwards;
}

[data-animate="slide-in-right"].lx-visible {
    animation: lxSlideInRight 0.6s ease-out forwards;
}

/* --- Stagger: children animate in sequence --- */
[data-animate="stagger"] > * {
    opacity: 0;
}

[data-animate="stagger"].lx-visible > * {
    animation: lxSlideUp 0.5s ease-out forwards;
}

[data-animate="stagger"].lx-visible > *:nth-child(1) { animation-delay: 0s; }
[data-animate="stagger"].lx-visible > *:nth-child(2) { animation-delay: 0.1s; }
[data-animate="stagger"].lx-visible > *:nth-child(3) { animation-delay: 0.2s; }
[data-animate="stagger"].lx-visible > *:nth-child(4) { animation-delay: 0.3s; }
[data-animate="stagger"].lx-visible > *:nth-child(5) { animation-delay: 0.4s; }
[data-animate="stagger"].lx-visible > *:nth-child(6) { animation-delay: 0.5s; }
[data-animate="stagger"].lx-visible > *:nth-child(7) { animation-delay: 0.6s; }
[data-animate="stagger"].lx-visible > *:nth-child(8) { animation-delay: 0.7s; }

/* --- Hover utilities --- */
[data-hover="lift"] {
    transition: transform 0.2s ease;
}

[data-hover="lift"]:hover {
    transform: translateY(-4px);
}

/* --- Keyframes --- */
@keyframes lxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lxSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lxSlideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes lxSlideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- Accessibility: disable animations for users who prefer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        animation: none !important;
    }

    [data-animate="stagger"] > * {
        opacity: 1 !important;
        animation: none !important;
    }

    [data-hover="lift"]:hover {
        transform: none !important;
    }
}