.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
    opacity: 1;
    transform: translate(0);
}

[data-delay="100"] { transition-delay: .1s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }

.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(2) { transition-delay: .1s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(3) { transition-delay: .2s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(4) { transition-delay: .3s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(5) { transition-delay: .4s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(6) { transition-delay: .5s; opacity: 1; transform: none; }