.reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden; /* Initially hidden */
    will-change: transform, opacity; /* Inform the browser about upcoming changes */
    transition: all 1s ease;
}

.reveal.active {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible; /* Make it visible when active */
}