/* ============================================================
   scroll-lazy.css — Scroll-reveal & stagger animation states
   ============================================================ */

/* ── Section reveal ─────────────────────────────────────────
   Sections start hidden and slide up when .sr-revealed is
   added by IntersectionObserver in scroll-lazy.js          */
.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.scroll-reveal.sr-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Lazy background image fade-in ──────────────────────────*/
[data-bg] {
    background-image: none !important; /* hide until JS injects the URL */
}

[data-bg].bg-loaded {
    animation: bgFadeIn 0.7s ease forwards;
}

@keyframes bgFadeIn {
    from { opacity: 0.4; }
    to   { opacity: 1;   }
}

/* ── Staggered children ─────────────────────────────────────
   Direct children of .scroll-stagger start hidden and each
   animates in with an increasing delay for a cascade effect */
.scroll-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-stagger.sr-revealed > *:nth-child(1)  { transition-delay: 0.05s; }
.scroll-stagger.sr-revealed > *:nth-child(2)  { transition-delay: 0.15s; }
.scroll-stagger.sr-revealed > *:nth-child(3)  { transition-delay: 0.25s; }
.scroll-stagger.sr-revealed > *:nth-child(4)  { transition-delay: 0.35s; }
.scroll-stagger.sr-revealed > *:nth-child(5)  { transition-delay: 0.45s; }
.scroll-stagger.sr-revealed > *:nth-child(6)  { transition-delay: 0.55s; }
.scroll-stagger.sr-revealed > *:nth-child(7)  { transition-delay: 0.65s; }
.scroll-stagger.sr-revealed > *:nth-child(8)  { transition-delay: 0.75s; }
.scroll-stagger.sr-revealed > *:nth-child(9)  { transition-delay: 0.85s; }
.scroll-stagger.sr-revealed > *:nth-child(10) { transition-delay: 0.95s; }
.scroll-stagger.sr-revealed > *:nth-child(11) { transition-delay: 1.05s; }
.scroll-stagger.sr-revealed > *:nth-child(12) { transition-delay: 1.15s; }
.scroll-stagger.sr-revealed > *:nth-child(n+13) { transition-delay: 1.25s; }

.scroll-stagger.sr-revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── Respect prefers-reduced-motion ─────────────────────────
   Disable all animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    .scroll-reveal,
    .scroll-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}