/* Base reveal class - hidden state */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

/* Active state - visible */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Variations */

/* Fade in from left */
.reveal.fade-left {
    transform: translateX(-30px);
}
.reveal.fade-left.active {
    transform: translateX(0);
}

/* Fade in from right */
.reveal.fade-right {
    transform: translateX(30px);
}
.reveal.fade-right.active {
    transform: translateX(0);
}

/* Zoom in */
.reveal.zoom-in {
    transform: scale(0.95);
}
.reveal.zoom-in.active {
    transform: scale(1);
}

/* Staggered delays for children */
.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }
.reveal-delay-400 { transition-delay: 0.4s; }
.reveal-delay-500 { transition-delay: 0.5s; }
.reveal-delay-600 { transition-delay: 0.6s; }