/* Scroll progress bar - shared across the homepage and every blog page.
   Markup is a small fixed block placed as the last child of each page's
   sticky <header>; behaviour (the JS fallback for browsers without native
   scroll-driven animations) lives in assets/js/scroll-progress.js. */
.mv-scroll-progress {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--mv-spring-200);
  opacity: 0.35;
  z-index: var(--z-sticky);
  pointer-events: none;
}
.mv-scroll-progress__fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  background: linear-gradient(90deg, var(--mv-dusty-500), var(--mv-wood-500));
}
.mv-scroll-progress__boat {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  color: var(--mv-marian-600);
}

/* Native scroll-driven animation where supported (Chrome/Edge) - no JS
   needed. assets/js/scroll-progress.js feature-detects the same rule and
   skips its own scroll listener when this applies. */
@supports (animation-timeline: scroll()) {
  .mv-scroll-progress__fill {
    animation: mv-scroll-progress-fill linear both;
    animation-duration: 1ms; /* overridden by the scroll timeline below */
    animation-timeline: scroll(root);
  }
  .mv-scroll-progress__boat {
    animation: mv-scroll-progress-boat linear both;
    animation-duration: 1ms;
    animation-timeline: scroll(root);
  }
}
@keyframes mv-scroll-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes mv-scroll-progress-boat {
  from { left: 0%; }
  to { left: 100%; }
}