/* progress bar (uses --scroll set in main.js) */
.animate.progress{
    position:fixed; left:0; top:0; height:3px; width:100%;
    z-index:60; background:transparent;
}
:root{
    --brand-silver: #C9C2B8;
}

.animate.progress{
    position: fixed;
    inset: 0 auto auto 0;  /* top:0; left:0 */
    width: 100%;
    height: 3px;           /* thickness */
    z-index: 9999;
    background: transparent;
}
.animate.progress::before{
    content: "";
    display: block;
    height: 100%;
    background: var(--brand-silver);   /* bar color */
    transform-origin: 0 50%;
    transform: scaleX(var(--scroll, 0)); /* filled portion */
}

/* keyframes + paused trick (still used by intro text) */
@keyframes bgColorIn{ to{ background-color:var(--bg-img,transparent) } }
@keyframes slideIn{ to{ opacity:1; transform:translate3d(0,0,0) } }

.animate{
    animation-play-state:paused;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-delay:calc((var(--scroll,0) - var(--delay,0)) * -1s);
}

@media (prefers-reduced-motion:reduce){
    .animate{ animation:none !important; opacity:1 !important; transform:none !important }
    .animate.progress{ display:none }
}