.reveal {
    opacity: 0;
    filter: blur(5px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.8s ease;
    will-change: opacity, transform;
}

/* Directions */
.fade-bottom { transform: translateY(50px); }
.fade-up { transform: translateY(-50px); }
.scale-in { transform: scale(0.8); }
.fade-left { transform: translateX(-50px); }
.fade-right { transform: translateX(50px); }

/* The state when the element is visible */
.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
}