/* Scroll motion — global, decisive, and built to be removed.
   ─────────────────────────────────────────────────────────────────────────────
   A client-demo layer (Wayne, 11 Sep 2026). The whole thing is this file plus
   assets/js/motion.js, both enqueued from one block in functions.php behind
   `pwr_scroll_motion_enabled()` — add_filter( 'pwr/scroll_motion',
   '__return_false' ) turns every effect off at once.

   Time-based, not scroll-driven. The first two cuts used CSS scroll-driven
   animation (`animation-timeline: view()`): the change is spread across the
   scroll, so it can only ever be as quick as the reader's thumb, and a stagger
   is a position offset, not a beat. Wayne: "the stagger needs to be longer and
   the animation quite quick — so that each block definitively drops in." That
   is a triggered animation: motion.js watches the targets with an
   IntersectionObserver, and when one enters it fires a SHORT transition, with
   its siblings in the same row or grid following at a fixed step.

   Rules that keep it honest:
   1. Nothing is hidden by CSS alone. The hidden state is gated on
      `.pwr-motion-js` on <html>, which only the script sets — JS off, or a
      browser without IntersectionObserver, gets the page exactly as it is.
   2. Nothing on screen at load animates. The script only tags targets whose
      top is below the fold, so heroes, covers, the first article section and
      the products index's first row never flash. */

/* Hidden state → arrival. 0.45s, an ease-out that lands rather than drifts. */
.pwr-motion-js .pwr-motion-target {
	opacity: 0;
	transform: translateY(40px) scale(0.96);
	transition:
		opacity   0.4s  cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
	/* transition-delay is set per element by motion.js — that is the stagger. */
}
.pwr-motion-js .pwr-motion-target.pwr-in {
	opacity: 1;
	transform: none;
}

/* One thing this file does NOT own. motion.js also stamps `--pwr-mark-d` on the bold
   and italic marks inside a case study's Challenge and Solution prose, and adds
   `.pwr-marks` then `.pwr-marks-in` to the prose block when it arrives — the styling then
   lands on one mark after the next instead of all at once (Wayne, 14 Oct). Those rules live
   with the marks, in the content-model plugin's assets/css/blocks.css under
   `.pwr-b-csstory__prose`, because that is where the pill and the pulse are defined.
   Both halves are still behind `pwr_scroll_motion_enabled()`: no script, no hidden state.
   Note it is keyed on `.pwr-marks` (per prose block), not `.pwr-motion-js` (on <html>) —
   rule 2 up there means a block on screen at load is never tagged, and a page-wide gate
   would have hidden such a block for good. */

/* Kill switch for anything that must never move (also honoured by the script). */
.pwr-no-motion, .pwr-no-motion * { transition: none !important; opacity: 1 !important; transform: none !important; }

/* Reduced motion: the script exits before tagging anything; this is belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
	.pwr-motion-target { transition: none !important; opacity: 1 !important; transform: none !important; }
}