/* Lazy Loading Scroll Animations - Mobile Optimized */

/* CRITICAL: Ensure first section (hero) is always visible */
section:first-of-type {
    opacity: 1 !important;
    transform: none !important;
}

/* Initial state - sections are hidden and slightly below */
/* Only apply to sections that aren't in immediate viewport */
section:not(:first-of-type) {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Visible state - triggered by JavaScript */
section.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Fallback: Show all sections after 2 seconds if JS fails */
section:not(.visible) {
    animation: emergency-show 0.5s ease-out 2s forwards;
}

@keyframes emergency-show {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    /* Less aggressive animation on mobile for performance */
    section:not(:first-of-type) {
        transform: translateY(20px); /* Smaller movement */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Faster */
    }
    
    /* Show content faster on mobile */
    section:not(.visible) {
        animation: emergency-show 0.3s ease-out 1s forwards; /* 1s instead of 2s */
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Ensure body is visible while loading */
body {
    min-height: 100vh;
    background: #0a0a0a; /* Match your dark background */
}