/* Base state for non-staggered components */
.component:not([data-stagger="true"]) {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active state for non-staggered components */
.component:not([data-stagger="true"]).in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children initial state */
.component[data-stagger="true"] > * {
    opacity: 0;
    transform: translateY(80px);
    transition-property: opacity, transform;
    transition-duration: 2.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered children active state */
.component[data-stagger="true"].in-view > * {
    opacity: 1;
    transform: none;
}

/* Text fill — opts out of stagger reveal, words scrub in via GSAP */
.component[data-stagger="true"] > [data-text-fill], .component[data-stagger="true"].in-view > [data-text-fill] {opacity: 1; transform: none; transition: none;}
[data-text-fill] .word {opacity: 0.15;}

/* Apply incremental delays to each child */
.component[data-stagger="true"].in-view > *:nth-child(1) {
    transition-delay: 250ms;
}
.component[data-stagger="true"].in-view > *:nth-child(2) {
    transition-delay: 350ms;
}
.component[data-stagger="true"].in-view > *:nth-child(3) {
    transition-delay: 450ms;
}
.component[data-stagger="true"].in-view > *:nth-child(4) {
    transition-delay: 550ms;
}
.component[data-stagger="true"].in-view > *:nth-child(5) {
    transition-delay: 650ms;
}
.component[data-stagger="true"].in-view > *:nth-child(6) {
    transition-delay: 750ms;
}

/* Your existing component CSS stays the same... */

/* Custom stagger timing for social grid diagonal cascade */
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .item-1 {
    transition-delay: 150ms; /* Top-left first */
}
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .item-4 {
    transition-delay: 300ms; /* Top-right second */
}
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .item-2 {
    transition-delay: 450ms; /* Middle-left third */
}
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .item-3 {
    transition-delay: 600ms; /* Center tall fourth */
}
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .item-5 {
    transition-delay: 750ms; /* Middle-right fifth */
}
.component[data-show-type="social-grid"][data-stagger="true"].in-view > .social-grid-cta-card {
    transition-delay: 900ms; /* CTA last */
}