.reveal {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.6s ease-out;
  animation-fill-mode: both;
  animation-delay: var(--reveal-delay, 0s);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-up {
    transform: translateY(30px);
}

.fade-down {
    transform: translateY(-30px);
}

.slide-left {
    transform: translateX(-30px);
}

.slide-right {
    transform: translateX(30px);
}

.reveal.visible.fade-up,
.reveal.visible.fade-down,
.reveal.visible.slide-left,
.reveal.visible.slide-right {
    transform: translate(0, 0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }
.delay-5 { transition-delay: 0.75s; }
.delay-6 { transition-delay: 0.90s; }
.delay-7 { transition-delay: 1.05s; }
.delay-8 { transition-delay: 1.20s; }