@keyframes reveilBottomUp {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animateOnScreen, .subsection > * {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-play-state: paused;
}

/* Staggered animation delays for different elements */

.hero-title {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0s;
}

#cover-desc {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.2s;
}

#fst-cta-container {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

#interactive-tag {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.6s;
}

#motion-tag {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.6s;
}

#generative-tag {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.6s;
}

#cover svg {
    opacity: 0;
    animation: reveilBottomUp 1s ease-out forwards;
    animation-delay: 0.8s;
}