.reveal{
    opacity:0;

    transform:
    translateY(40px);

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.active{
    opacity:1;

    transform:
    translateY(0);
}

.hero-text{
    opacity:0;
    transform:translateY(24px);
    animation:fadeUp 0.9s ease forwards;
}

.hero-image{
    opacity:0;
    transform:translateY(28px) scale(0.98);
    animation:fadeUpMockup 1s ease forwards;
    animation-delay:0.25s;
}

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

@keyframes fadeUpMockup{
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.reveal{
    opacity:0;

    transform:
    translateY(40px);

    transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.reveal.active{
    opacity:1;

    transform:
    translateY(0);
}