/* ============================================
   Scroll Reveal Animation Styles
   Optimized for mobile performance
   ============================================ */

/* Desktop only - full animations */
@media (min-width: 769px) {
    .scroll-reveal {
        opacity: 0;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, transform;
    }

    .scroll-reveal.is-visible {
        opacity: 1;
        transform: none !important;
    }

    /* Fade Animations */
    .scroll-fade-up {
        transform: translateY(var(--scroll-distance, 50px));
        transition-delay: var(--scroll-delay, 0ms);
        transition-duration: var(--scroll-duration, 600ms);
    }
}

/* Mobile - no animations for performance */
@media (max-width: 768px) {
    .scroll-reveal,
    .scroll-fade-up,
    .scroll-fade-down,
    .scroll-fade-left,
    .scroll-fade-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

.scroll-fade-down {
    transform: translateY(calc(-1 * var(--scroll-distance, 50px)));
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

.scroll-fade-left {
    transform: translateX(var(--scroll-distance, 50px));
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

.scroll-fade-right {
    transform: translateX(calc(-1 * var(--scroll-distance, 50px)));
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

/* Zoom Animations */
.scroll-zoom-in {
    transform: scale(0.9);
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

.scroll-zoom-out {
    transform: scale(1.1);
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

/* Flip Animation */
.scroll-flip-up {
    transform: perspective(1000px) rotateX(-15deg);
    transform-origin: center bottom;
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

/* Bounce Animation */
.scroll-bounce {
    transform: translateY(var(--scroll-distance, 50px));
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 600ms);
}

.scroll-bounce.is-visible {
    animation: bounceIn var(--scroll-duration, 600ms) cubic-bezier(0.68, -0.55, 0.265, 1.55) var(--scroll-delay, 0ms) both;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(var(--scroll-distance, 50px));
    }
    60% {
        opacity: 1;
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Slide Animations */
.scroll-slide-up {
    transform: translateY(100px);
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 800ms);
}

.scroll-slide-left {
    transform: translateX(100px);
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 800ms);
}

.scroll-slide-right {
    transform: translateX(-100px);
    transition-delay: var(--scroll-delay, 0ms);
    transition-duration: var(--scroll-duration, 800ms);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-reveal {
        --scroll-distance: 30px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Utility classes for stagger effects */
.scroll-stagger-50 { --scroll-delay: 50ms; }
.scroll-stagger-100 { --scroll-delay: 100ms; }
.scroll-stagger-150 { --scroll-delay: 150ms; }
.scroll-stagger-200 { --scroll-delay: 200ms; }
.scroll-stagger-250 { --scroll-delay: 250ms; }
.scroll-stagger-300 { --scroll-delay: 300ms; }
.scroll-stagger-400 { --scroll-delay: 400ms; }
.scroll-stagger-500 { --scroll-delay: 500ms; }