/* scroll top bar animation */
.scroll-watcher {
    height: 3px;
    position: fixed;
    top: 0;
    z-index: 11000;
    background-color: #000;
    width: 100%;
    scale: 0 1;
    transform-origin: left;
    -webkit-animation: scroll-watcher linear;
            animation: scroll-watcher linear;
    animation-timeline: scroll(y);
}

@-webkit-keyframes scroll-watcher {
    to { scale: 1 1; }
}

@keyframes scroll-watcher {
    to { scale: 1 1; }
}


/* fade in elements */
h2.title-main,
h3.title-main {
    -webkit-animation: fade-in linear forwards;
            animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@-webkit-keyframes fade-in {
    from { scale: 0.8; opacity: 0;}
    to { scale: 1; opacity: 1; }
}

@keyframes fade-in {
    from { scale: 0.8; opacity: 0;}
    to { scale: 1; opacity: 1; }
}