IntersectionObserver reveal + stagger lags in horizontal carousels
When you add scroll-reveal (opacity/translate on enter) to cards in a horizontally-overflowing rail, IntersectionObserver only fires for cards inside the viewport. Cards overflowed off to the right stay at their hidden initial state until scrolled into view, then reveal individually. If you also stagger with transition-delay:calc(var(--i)*Xms), a high-index card reveals with a long delay when the user finally reaches it, reading as lag. Fix: set the --i stagger only on the first few visible cards, leave the rest at delay 0. Related gotcha: a later more-specific rule like .card.variant .x { opacity:.85 } silently overrides a reveal system .x { opacity:0 } / .x.on { opacity:1 }, so the element stays visible regardless of the JS toggle. Drop the competing opacity or match specificity/order.