/* ============================================================
   zz-reading-progress-complete.css — "finished reading" cue
   ------------------------------------------------------------
   The reading-progress bar (custom.css + footer.html) fills as the
   article is scrolled. When the reader reaches the very end the
   footer script toggles `.is-complete` on #reading-progress-bar.
   Ride that moment for one quiet acknowledgement: the bar gives a
   single soft brightness pulse and its leading dot sends one gentle
   outward ping, then settles. A small "you've arrived" flourish at
   the end of a long read — felt the same on phones (bar pinned top)
   and desktop (bar pinned bottom).

   Purely additive: no layout, no reflow, nothing required to read
   the page. Gated behind `html.motion-reveal` (set in <head> only
   when the visitor has NOT requested reduced motion) and hard-
   neutralised under prefers-reduced-motion below. Loaded after
   custom.css / interaction-polish.css by filename order (z > c/i)
   so these rules win cleanly.
   ============================================================ */

/* The whole bar warms briefly — a centred cue that never clips at
   the viewport edge, so it reads on both the top- and bottom-pinned
   positions. Runs once (iteration 1) and holds the resting state. */
@keyframes rp-complete-glow {
  0%   { filter: brightness(1);    }
  35%  { filter: brightness(1.4);  }
  100% { filter: brightness(1);    }
}

html.motion-reveal .reading-progress-bar.is-complete {
  animation: rp-complete-glow 0.85s ease-out 1;
}

/* The leading-edge dot expands once and fades — a single "ping" that
   lands as the bar completes. The base transform (custom.css) is
   translate(50%, -50%); the keyframe carries it through so the dot
   stays anchored to the bar's tip while it scales. */
@keyframes rp-complete-ping {
  0%   { transform: translate(50%, -50%) scale(1);   opacity: 0.95; }
  70%  { transform: translate(50%, -50%) scale(2.2); opacity: 0;    }
  100% { transform: translate(50%, -50%) scale(2.2); opacity: 0;    }
}

html.motion-reveal .reading-progress-bar.is-complete::after {
  animation: rp-complete-ping 0.85s ease-out 1;
}

/* ============================================================
   Reduced motion: no pulse, no ping — the bar simply rests full.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.motion-reveal .reading-progress-bar.is-complete,
  html.motion-reveal .reading-progress-bar.is-complete::after {
    animation: none !important;
  }
}
