/* ============================================
   MOBILE SCROLL ANIMATIONS
   Aktiviert Animationen wenn Elemente scrollen
   ============================================ */

@media (max-width: 768px) {

    /* Initial state - Elements are hidden/offset */
    .aos-element {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    /* Animated state - Elements are visible */
    .aos-element.aos-animate {
        opacity: 1;
        transform: translateY(0);
    }

    /* Different animation types */
    .aos-element[data-aos="fade-up"] {
        opacity: 0;
        transform: translateY(40px);
    }

    .aos-element[data-aos="fade-up"].aos-animate {
        opacity: 1;
        transform: translateY(0);
    }

    .aos-element[data-aos="fade-left"] {
        opacity: 0;
        transform: translateX(-40px);
    }

    .aos-element[data-aos="fade-left"].aos-animate {
        opacity: 1;
        transform: translateX(0);
    }

    .aos-element[data-aos="fade-right"] {
        opacity: 0;
        transform: translateX(40px);
    }

    .aos-element[data-aos="fade-right"].aos-animate {
        opacity: 1;
        transform: translateX(0);
    }

    .aos-element[data-aos="zoom-in"] {
        opacity: 0;
        transform: scale(0.9);
    }

    .aos-element[data-aos="zoom-in"].aos-animate {
        opacity: 1;
        transform: scale(1);
    }

    /* Staggered animations for groups */
    .expertise-card.aos-element {
        transition-delay: calc(var(--aos-delay, 0) * 0.1s);
    }

    .pricing-card.aos-element {
        transition-delay: calc(var(--aos-delay, 0) * 0.15s);
    }

    /* Smooth entrance for cards */
    .expertise-card,
    .pricing-card,
    .addon-category,
    .contact-card {
        transition-duration: 0.7s;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Section headers animate first */
    .section-head.aos-element {
        transition-duration: 0.8s;
    }

    /* Form sections with longer delay */
    .form-section.aos-element {
        transition-duration: 0.5s;
    }

    /* Performance optimizations */
    .aos-element {
        will-change: transform, opacity;
    }

    .aos-element.aos-animate {
        will-change: auto;
    }
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .aos-element {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}