.scroll-watcher {
    height: 5px;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #4594ca;
    width: 100%;
    scale: 1 1;
    margin-inline: auto;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
}



.ani-hidden {
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 50%;
}



.ani-hidden-title {
    animation: title-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 50%;
}



@media (prefers-reduced-motion:no-preference){
    @keyframes  scroll-watcher {
        to {scale:0 1;}
    }
    @keyframes fade-in {
        from {scale: 0.8; opacity: 0;}
        to { scale: 1; opacity: 1;}    
    }
    
    @keyframes title-fade-in {
        from {scale: 0.5; opacity: 0; margin-top: -100px;}
        to { scale: 1; opacity: 1;margin-top: opx}    
    }
    
}