.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition: all 0.8s ease;
    transition-delay: 0.3s;
}

.reveal-up {
    transform: translateY(60px);
}

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

.reveal-scale {
    transform: scale(.9);
}

.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
    opacity: 1;
    transform: translate(0,0) scale(1);
}


.timeline-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s ease;
}

.timeline-line.active {
    transform: scaleX(1);
}

.timeline-dot {
    opacity: 0;
    transform: scale(0);
    transition: all .6s cubic-bezier(.34,1.56,.64,1);
}

.timeline-dot.active {
    opacity: 1;
    transform: scale(1);
}

.timeline-card {
    opacity: 0;
    transform: translateY(60px);
    transition: all .8s ease;
}

.timeline-card.active {
    opacity: 1;
    transform: translateY(0);
}