Motion Prompt #148｜滚动切换背景色 · Background color change on scroll

请使用“Background color change on scroll”（背景色の切り替え），它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #148

定义：页面背景按章节改变颜色。
示例展示：每次滚动进入新章节，整个页面背景从奶油色混合到深蓝，再到浅蓝；深色背景下文字变白。
规格：
- 视口511×168，三个章节各高168 px，即一屏。滚动0.3–1.2 s从0→168 px，1.8–2.7 s从168→336，3.3–4.4 s从336→0，均用三次ease-in-out。单次4.7 s，在9.4 s包循环内播放两次。
- 背景色依次为早晨#FFEBD9、夜晚#1E2A4A、假日#DDE6FF；整页后方绘制单一背景色，跨越章节边界时混合。
- 混合进度在到下一章的滚动行程5%至95%之间0→1，采用二次ease-in-out，由滚动位置而非时间驱动。
- 进入夜晚时标题从深蓝混合为白色，正文条从米色混合为蓝灰色；章节标签（01 MORNING等）保持橙色。
- 各章图片分别为太阳、月亮和星星、山景照片，随页面移动；滚动条滑块跟随滚动。
何时使用：用于每章有独立情绪的叙事页面，或对比日夜、季节等场景。

参考实现（Canvas 2D，画面仅由时间决定的函数）：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/148.txt
共享辅助代码：https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js
请保持参考实现的形状、时间安排和缓动数值不变，只调整文字、颜色和素材，以适配我正在制作的项目。