.autoshow{
    animation: text-appear both;
    animation-timeline: view();
    animation-range: entry 20% cover 100vh;
}
@keyframes text-appear{
    from{
        opacity: 0;
        transform: translateY(100px);
    }
    to{
        opacity: 100%;
        transform: translateY(0);
    }
}

.imagereveal{
    animation: image-reveal both;
    animation-timeline: view();
    animation-range: entry 10% cover 80vh;

}

@keyframes image-reveal {

    from{
        filter: blur(5px);
        opacity: 0;
        scale: .95;
        translate: 0 4rem;
    }
    to{
        filter: none;
        opacity: 100;
        scale: 1;
        translate: 0 0 ;
    }
    
}