/**
 * Scroll Animations
 * Fade-up animation triggered when sections enter the viewport
 */

/* ============================================
   BASE SECTION STYLES
   ============================================ */

/* Initial state - hidden and offset down */
.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Visible state - fade in and slide up */
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   CHILD ELEMENT STYLES
   ============================================ */

/* Initial state for child elements */
.fade-up.is-visible > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state for child elements */
.fade-up.is-visible.is-animated > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   FEATURES SECTION DELAYS
   .section-features
   ============================================ */

.section-features.fade-up.is-visible .features-sticky { transition-delay: 0ms; }
.section-features.fade-up.is-visible .features-header { transition-delay: 150ms; }
.section-features.fade-up.is-visible .illustrator-square:nth-child(1) { transition-delay: 300ms; }
.section-features.fade-up.is-visible .illustrator-square:nth-child(2) { transition-delay: 450ms; }

/* ============================================
   MISSION SECTION DELAYS
   .section-mission
   ============================================ */

.section-mission.fade-up.is-visible .mission-bg-image { transition-delay: 0ms; }
.section-mission.fade-up.is-visible .mission-label { transition-delay: 150ms; }
.section-mission.fade-up.is-visible .mission-header { transition-delay: 300ms; }

/* Mission chips - no animation, show immediately with section */
.section-mission.fade-up.is-visible .mission-chip {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

/* ============================================
   INSIGHTS SECTION DELAYS
   .section-insights
   ============================================ */

.section-insights.fade-up.is-visible .section-label { transition-delay: 0ms; }
.section-insights.fade-up.is-visible .insights-large-card { transition-delay: 200ms; }
.section-insights.fade-up.is-visible .insights-small-cards { transition-delay: 350ms; }

/* Small cards - stagger each */
.section-insights.fade-up.is-visible .insights-small-card:nth-child(1) { transition-delay: 350ms; }
.section-insights.fade-up.is-visible .insights-small-card:nth-child(2) { transition-delay: 500ms; }
.section-insights.fade-up.is-visible .insights-small-card:nth-child(3) { transition-delay: 650ms; }

/* ============================================
   TEAM & CONTACT SECTION DELAYS
   .section-team-contact
   ============================================ */

.section-team-contact.fade-up.is-visible .team-column { transition-delay: 0ms; }
.section-team-contact.fade-up.is-visible .contact-column { transition-delay: 200ms; }

/* ============================================
   404 PAGE - Page-load stagger animation
   ============================================ */

.error-404-page .error-404-bg,
.error-404-page .error-404-title,
.error-404-page .error-404-paragraph,
.error-404-page .error-404-cta {
    opacity: 0;
}

.animate-404 .error-404-bg {
    animation: error404FadeIn 1s ease-out 0s forwards;
}

.animate-404 .error-404-title {
    animation: error404FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.animate-404 .error-404-paragraph {
    animation: error404FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.animate-404 .error-404-cta {
    animation: error404FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

@keyframes error404FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ============================================
   SINGLE PAGE - Scroll-triggered stagger
   ============================================ */

.single-page-content-container.fade-up.is-visible .single-page-title { transition-delay: 0ms; }
.single-page-content-container.fade-up.is-visible .single-page-divider { transition-delay: 150ms; }
.single-page-content-container.fade-up.is-visible .single-page-content { transition-delay: 300ms; }

/* ============================================
   MOBILE OVERRIDES
   ============================================ */

@media (max-width: 576px) {
    .fade-up {
        transform: translateY(30px);
    }
}

/* ============================================
   ACCESSIBILITY - Respect reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fade-up.is-visible {
        opacity: 1;
        transform: none;
    }

    .fade-up.is-visible > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .error-404-page .error-404-bg,
    .error-404-page .error-404-title,
    .error-404-page .error-404-paragraph,
    .error-404-page .error-404-cta {
        opacity: 1;
        animation: none;
    }
}