Card content area computes to opacity 0 under prefers-reduced-motion, hiding content

[georgeolaru]

The defect

The card content area's reveal computes to opacity: 0 under prefers-reduced-motion: reduce, and no setting
stops it. The content stays laid out and visibility: visible while painting nothing, so a visitor who has asked
for reduced motion cannot see it at all.

This hides author content on every site using the affected blocks. It is not a preference issue; the reduced-motion
end state is the bug.

Measured

On the probe element:

• no-preference: style="opacity: 0.9998; transform: translate3d(0px, 0.0101px, 0px)" — note the resting opacity
  is written inline by script, not by a class or a media query;
• reduce: opacity: 0 at both 1440×900 and 390×844, max opacity over a full page sweep 0;
• every ancestor computes to 1, so nothing upstream is responsible.

Root cause

packages/scrolling-effect/src/utils.js:255-257 sets progress = 0.5 unconditionally under reduced motion —
after every attribute-derived clamp, and the four motion attributes only feed those clamps (:167,
:230-231). So the end state a reduced-motion visitor gets is the middle of the effect rather than its finished
state.

What does not fix it

• scrollingEffect: "static", the least animated value available — still 0.
• sm_intro_animations_enable set to false — already false in the tested configuration; changes nothing.
• The library's only four front-end prefers-reduced-motion rules cover an unrelated recipe and the Customizer UI.

The ask

Under prefers-reduced-motion: reduce, the effect should resolve to its finished state, not its midpoint: the
content fully visible, no transform. A per-block or global setting would help, but the default itself is the
problem — content must never end at opacity: 0 for a visitor who asked for less motion.

Acceptance

• With prefers-reduced-motion: reduce, card content areas compute to opacity: 1 with no residual transform, at
  both desktop and small-phone widths.
• No author setting is required to get that; it is the default end state.
• Motion attributes still take effect for visitors with no preference.

[georgeolaru]

Fixed in pixelgrade/anima@a418741b. The cause is in the Anima theme's Hero script, not in Nova's scrolling effect.

Root cause. Nova's scrolling-effect/utils.js only moves the doppler media and never sets opacity. The real fault is in Anima's src/js/components/hero.js, in two parts:

1. The reduced-motion branch read this.labels.middle, but the labels live on this.timeline. Setup threw TypeError: Cannot read properties of undefined (reading 'middle') after the intro had already set every hero piece to opacity 0, so nothing revealed them. This happens on full-width, stacked, one-column cards when GSAP and SplitText are loaded (commercial Anima, or LT with Plus).
2. Each scroll frame then stored the timeline ratio middle/end (≈0.56) as a scroll progress. The scroll mapping reads that as "past the intro", so fixing only part 1 would still have faded content out.

Fix.

• With reduced motion on, the timeline now settles on the finished intro, and the split title is restored, as a normal run does.
• The scroll progress is pinned to the resting 0.5, so the fade-out never plays. This goes through small helpers in hero-motion.js.
• With reduced motion off, the intro and fade-out are unchanged.

Visual proof (hero card, prefers-reduced-motion: reduce)

Acceptance checks

Fresh pxg-smoke site (WP 7.1.2, Anima LT with Plus entitlements so GSAP loads). Values are computed after the page settles, for the six content pieces of the card.

Motion	Width	Before	After
reduce	1440	TypeError; pieces at opacity 0 (1,0,1,0,0,0) at every scroll position	no error; all opacity 1, no offset, also at scroll 150–600
reduce	390	same TypeError, opacity 0	all opacity 1
no-preference	1440 / 390	intro 0 → 1, fade-out on scroll	identical

I re-measured the before and after states independently, serving the previous scripts.min.js for the before. The editor is unaffected: the Hero runs only on the front end.

Tests

• New Anima test/hero-reduced-motion.test.js (6 cases). It fails without the fix.
• Mutation-checked: reverting hero.js, only the scroll pin, or the settle point each makes a test fail.
• All Anima node tests pass, and Nova npm test passes.

A separate, harmless note: Nova's doppler/parallax effect also pins its progress to 0.5 under reduced motion, which leaves the image focal point halfway. It doesn't affect visibility.