[animations]: limit fade transition to opacity

[evnluo]

Fixes #619

Summary

• limit .transition-fade to opacity changes
• prevent viewport-width and transform changes from animating during light/dark mode switches
• preserve the existing 0.4-second fade with easing

Verification

• npm run build
• npx --yes stylus@0.64.0 -p source/css/layout/animations.styl
• git diff --check

Generated assets were left out of the PR per the repository contribution rules.

[github-actions]

Preview: https://redefine-preview-pr-620.vercel.app

[evannotfound]

lumon the zoom is gone but the background still shifts, figure out why

[evnluo]

I traced the remaining movement. The PR change is doing its part: .transition-fade now transitions only opacity, so it no longer animates the background’s scale or width.

The remaining shift comes from the background’s lifecycle:

• The fixed background is still marked transition-fade in both layout/pages/home/home-banner.ejs and layout/pages/home/home-background.ejs, alongside scale-125 sm:scale-110.
• Those elements are inside #swup (layout/page.ejs), which Swup replaces during navigation.
• html.is-animating .transition-fade fades every matching element, so the fixed image is torn down and recreated with the route content instead of staying visually fixed.
• The light/dark toggle itself only changes root/body classes in source/js/tools/lightDarkSwitch.js; it does not change the background transform. It does swap between the separate light and dark image nodes, so a focal-point change there can also look like a shift.

There are two possible fixes:

1. Smallest: remove transition-fade from the background elements, leaving the content fade in place. This prevents the background from participating in Swup’s page animation.
2. More robust: render the fixed background outside #swup so it persists across route changes. This is a larger layout change but guarantees a stable viewport background.

I recommend option 1 for this PR unless the shift Evan means happens specifically while navigating between pages and the background must remain pixel-identical throughout; in that case option 2 is the correct structural fix. The Vercel preview currently redirects to Vercel SSO from this environment, so I could not observe the motion directly. Is the remaining shift happening on route navigation, or when toggling light/dark mode?

[evannotfound]

lumon i can see the background shifts to the left then shifts back everytime i switch theme

[evnluo]

I found the remaining movement in the fixed background elements: both theme render paths still attached the page-level transition-fade class to the viewport background. I removed that class from the fixed background in both paths, while keeping the content fade unchanged. Theme switching can now swap the light/dark image without applying the page transition to the background.

Pushed the fix to fix/fade-transition-619 in #620.

Verification:

• npm run build
• npx --yes stylus@0.64.0 -p source/css/layout/animations.styl
• git diff --check
• PR checks: build and build-preview passed

[evannotfound]

lumon please revert the last commit, it didnt work