/* ============================================================================
   Helix Counter public site — READING PROGRESS (site-read.css).
   Loaded by the four LONG pages only: resources · security · sizing · notes.

   ⛔ NOT by `index.html`, deliberately. A marketing home page is BROWSED, not
   read: there is no "how much is left" question to answer there, so the bar
   would be decoration — and Hearth's rule is that colour is signal, never
   decoration. Row 52 of the design tracker says this in as many words.

   Why these four and no others: they are the single-column long reads
   (`resources` 343 lines, `sizing` 237, plus `security` and `notes`). The other
   pages under this root are short or tabular.

   Zero JS. `animation-timeline: scroll()` runs on the compositor, so this costs
   no main-thread work and no scroll listener — which is the whole reason it is
   worth doing at all rather than the reason it is clever.
   ============================================================================ */

/* The bar is a child of the sticky `.nav` rather than a `position: fixed`
   element of its own. Two reasons, both practical: it inherits the nav's
   position so there is no magic number tracking the nav's height (65px compact,
   ~71px at full padding — and `scroll-padding-top` already had to hard-code
   that once, which is enough), and sitting ON the nav's existing bottom
   hairline means the page gains a signal WITHOUT gaining a second horizontal
   rule. No layout shift: it is out of flow. */
.readbar {
  /* ⛔ DEFAULT IS "DO NOT DRAW". A bar that cannot track the scroll must not
     appear at all — see the @supports note below. */
  display: none;
}

@keyframes rb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  .readbar {
    display: block;
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    /* straddles the nav's 1px hairline, so the bar reads as that line filling
       in rather than as a new element arriving */
    background: var(--accent);
    transform-origin: 0 50%;

    /* ⛔ The REST state is a FULL bar, not an empty one. This is the second-order
       fallback: if the declaration above is honoured but the animation somehow
       does not run, a full bar reads as "nothing more to scroll" — merely
       uninformative. An empty one reads as BROKEN. The first-order fallback is
       `display: none` outside this block. */
    transform: scaleX(1);

    animation: rb-progress linear both;
    animation-timeline: scroll(root block);
  }
}

/* ---- reduced motion ------------------------------------------------------
   ⛔ DELIBERATELY NOT DISABLED HERE, and this is a judgement worth stating
   rather than burying. Everything else in this kit's motion layer is gated on
   `prefers-reduced-motion: no-preference`, so the default would be to gate this
   too. A progress bar is the exception: it has no autonomous motion. It moves
   only, and exactly, as far as the reader moves — which is what a SCROLLBAR
   does, and reduced-motion does not remove scrollbars. Gating it would leave a
   reduced-motion reader with a permanently full 2px line, i.e. furniture that
   states something false.

   If design disagrees, the fix is to hide it (`display: none`), never to freeze
   it full. Flagged as an open question on tracker row 52. */

@media print { .readbar { display: none; } }