/* ========================================================================
   Phase 4 Step 5 — Reading progress bar

   Fixed thin bar at top of viewport. Wrapper is always-on once injected;
   the inner __bar is transform: scaleX(0..1) driven by JS, GPU-accelerated.
   Pure CSS handles the WP admin-bar offset and reduced-motion suppression.
   ======================================================================== */

.cai-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cai-progress-height);          /* 2px */
  z-index: var(--cai-z-progress);              /* 9000 — above Blocksy sticky header */
  background: transparent;
  pointer-events: none;                        /* never block clicks */
  contain: strict;                             /* isolate paint */
}

/* Clear the WP admin bar when logged-in users see one.
   Desktop admin bar: 32px. Mobile breakpoint: 46px. */
.admin-bar .cai-progress { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .cai-progress { top: 46px; }
}

.cai-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--cai-progress-color);       /* --cai-primary cyan */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* Small ease for visual smoothness without lagging the actual scroll */
  transition: transform 80ms linear;
}

/* Reduced motion: hide entirely. JS also bails (belt + braces). */
@media (prefers-reduced-motion: reduce) {
  .cai-progress {
    display: none;
  }
}