/**
 * Animations CSS - Reveal Effects & Transitions
 * 
 * Responsibilities:
 * - Card reveal animations
 * - Section arrival moments
 * - Scroll-triggered animations
 * 
 * STEP 1: Section Arrival Moments
 */

/* ============================================================================
   STEP 1: SECTION HEADER ARRIVAL MOMENTS
   ========================================================================= */

/* Section headers start invisible with slight upward offset */
.section-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 350ms var(--ease-out),
                transform 350ms var(--ease-out);
}

/* Section intro follows header with slightly shorter movement */
.section-intro {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 300ms var(--ease-out),
                transform 300ms var(--ease-out);
    transition-delay: 100ms;
}

/* When section enters viewport, headers become visible */
.section-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-intro.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================================
   CARD REVEAL ANIMATION (WAITS FOR HEADER COMPLETION)
   ========================================================================= */

.card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cards wait for header animation (350ms + 100ms buffer = 450ms base delay) */
/* Then stagger for cascading effect */
.card:nth-child(1) { transition-delay: 450ms; }
.card:nth-child(2) { transition-delay: 550ms; }
.card:nth-child(3) { transition-delay: 650ms; }
.card:nth-child(4) { transition-delay: 750ms; }
.card:nth-child(5) { transition-delay: 850ms; }
.card:nth-child(6) { transition-delay: 950ms; }

/* ============================================================================
   NAVIGATION TRANSITIONS
   ========================================================================= */

.nav-link {
    position: relative;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary);
    transform: scaleY(0);
    transition: transform var(--duration-fast) var(--ease-out);
}

.nav-link.active::before {
    transform: scaleY(1);
}

/* ============================================================================
   REDUCED MOTION OVERRIDE
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .card,
    .section-title,
    .section-intro {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .card:nth-child(n) {
        transition-delay: 0ms !important;
    }
}