/* =============================================================================
   Scroll-Triggered Animations
   ============================================================================= */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays for cards in grid */
.cards-grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.cards-grid [data-animate]:nth-child(2) { transition-delay: 100ms; }
.cards-grid [data-animate]:nth-child(3) { transition-delay: 200ms; }

.capabilities-grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.capabilities-grid [data-animate]:nth-child(2) { transition-delay: 100ms; }
.capabilities-grid [data-animate]:nth-child(3) { transition-delay: 200ms; }
.capabilities-grid [data-animate]:nth-child(4) { transition-delay: 300ms; }

/* Hero animation - slightly different effect */
.hero-content[data-animate] {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-content[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    [data-animate].animate-in {
        opacity: 1;
        transform: none;
    }
    
    .card::before,
    .capability-card::before {
        animation: none;
    }
}

/* =============================================================================
   Lite Mode - Reduced animations for low-end devices
   Applied via JS: document.documentElement.classList.add('perf-low')
   ============================================================================= */
.perf-low .pipeline-diagram .flow-paths path.is-animated {
    animation: none;
}

.perf-low .pipeline-diagram .core-pulse-ring {
    animation: none;
}

/* Slow down ring rotations significantly on low-end devices */
.perf-low .pipeline-diagram .ring-outer,
.perf-low .pipeline-diagram .ring-middle,
.perf-low .pipeline-diagram .ring-inner {
    animation-duration: 60s;
}

/* Disable floating animations */
.perf-low .pipeline-diagram .source-docs,
.perf-low .pipeline-diagram .source-db,
.perf-low .pipeline-diagram .source-api {
    animation: none;
}

.perf-low .pipeline-diagram .insight {
    animation: none;
}

.perf-low .pipeline-diagram .core-nodes .node {
    animation: none;
}

.perf-low .pipeline-diagram .junction {
    animation: none;
}

/* Simplify glow effects */
.perf-low .pipeline-diagram .core-glow {
    animation: none;
    opacity: 0.15;
}

/* Disable card scan line animations */
.perf-low .card::before,
.perf-low .capability-card::before {
    animation: none;
    display: none;
}

/* Mobile-specific optimizations */
.is-mobile .pipeline-diagram .flow-paths path.is-animated {
    animation-duration: 6s;
}

.is-mobile .pipeline-diagram .ring-outer,
.is-mobile .pipeline-diagram .ring-middle,
.is-mobile .pipeline-diagram .ring-inner {
    animation-duration: 40s;
}