/* =============================================================================
   lib/styles/animations/scroll_reveals.css
   Global utility classes for IntersectionObserver-driven scroll animations.
   ============================================================================= */

.scroll-reveal {
    /* Hardware acceleration for composite properties only */
    will-change: opacity, transform;
}

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

/* ==========================================================================
   1. Fade In
   ========================================================================== */
.scroll-reveal--fade {
    opacity: 0;
    transition: opacity var(--motion-transition-reveal, 500ms cubic-bezier(0.4, 0.0, 0.2, 1));
}

.scroll-reveal--fade.is-visible {
    opacity: 1;
}

/* ==========================================================================
   2. Slide Up (Restrained for professional tone)
   ========================================================================== */
.scroll-reveal--slide-up {
    opacity: 0;
    transform: translateY(24px); /* Kept small to avoid layout thrashing */
    transition: opacity var(--motion-transition-reveal, 500ms cubic-bezier(0.4, 0.0, 0.2, 1)), 
                transform var(--motion-transition-reveal, 500ms cubic-bezier(0.4, 0.0, 0.2, 1));
}

.scroll-reveal--slide-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   3. Staggering Support
   ========================================================================== */
/* Applies initial hidden state to direct children rather than the wrapper */
.scroll-reveal--stagger {
    opacity: 1; 
    transform: none;
}

.scroll-reveal--stagger > * {
    opacity: 0;
    transition: opacity var(--motion-transition-reveal, 500ms cubic-bezier(0.4, 0.0, 0.2, 1)), 
                transform var(--motion-transition-reveal, 500ms cubic-bezier(0.4, 0.0, 0.2, 1));
}

.scroll-reveal--stagger.scroll-reveal--slide-up > * {
    transform: translateY(24px);
}

.scroll-reveal--stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Hardcoded reliable delay steps (up to 12 items for grids/lists) */
.scroll-reveal--stagger.is-visible > *:nth-child(1)  { transition-delay: 50ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(2)  { transition-delay: 100ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(3)  { transition-delay: 150ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(4)  { transition-delay: 200ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(5)  { transition-delay: 250ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(6)  { transition-delay: 300ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(7)  { transition-delay: 350ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(8)  { transition-delay: 400ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(9)  { transition-delay: 450ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(10) { transition-delay: 500ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(11) { transition-delay: 550ms; }
.scroll-reveal--stagger.is-visible > *:nth-child(12) { transition-delay: 600ms; }