.png){kind=link}
请你扮演一位技术高超、审美优秀的网页动画设计师，同时熟悉跨境物流、海关监管、包裹查验、线上缴税等科普内容。请基于以下要求，生成一个完整的单文件 index.html 静态网页项目，用于科普“一件海外包裹从货机卸货到海关放行、再进入国内派送”的全过程。
网页标题为：
《跨境包裹的通关之旅》
整体体验应像电影分镜式滚动长页，而不是普通说明文页面。用户向下滚动时，应感觉镜头在机场、海关监管区、扫描通道、异常查验区、手机缴税界面、出关车队之间穿梭。
项目根目录中有以下素材，必须使用相对路径直接引用：
1货机卸货.png：夜间机场机坪，顺丰货机卸货，中国海关建筑在旁边。用于首屏 Hero 和第一段镜头推进转场。2进入海关.png：包裹进入海关监管区/海关门前特写。用于第一幕“进入海关”。3准备进入扫描仪.png：包裹准备进入扫描仪。用于第二段镜头推进转场起点。4进入传送带内部.png：包裹进入红色扫描通道内部。用于“科技之眼 / 非侵入式极速体检”板块。5进入异常处置框(1).png：包裹进入异常处置框。用于异常拦截图。6海关开箱.png：海关关员开箱查验。用于异常复核图，也可作为缴税板块背景。7收到缴费通知.JPG：手机收到待缴税通知。用于云端缴税板块手机界面第一阶段。8成功缴费.GIF：付款成功 GIF。用于云端缴税板块交互触发后的第二阶段。9出海关.png：物流车辆出海关。用于尾声出关横向视差画面。
请生成一个无需构建工具、无需外部依赖的 index.html，包含内联 CSS 和内联 JavaScript。页面结构如下：
- 首屏 Hero：夜幕下的货机卸货
- 镜头推进转场：从
1货机卸货.png推进融合到2进入海关.png - 第一幕：拆解与分流，进入海关监管区
- 镜头推进转场：从
3准备进入扫描仪.png推进融合到4进入传送带内部.png - 第二幕：科技之眼，非侵入式极速体检
- 第三幕：触发风控，异常拦截与人工复核
- 第四幕：云端缴税，手机通知与付款成功动画
- 尾声：获批放行，奔赴最后一公里
首屏右上角加入 GitHub 项目链接：
链接文字：Click here to enter Github project
链接地址：https://github.com/bugs-maker-richard/logistics_assignment_April
首屏使用 1货机卸货.png 作为全屏背景，深夜机场质感，加入轻微呼吸光、暗角、科技网格。
首屏文案：
- 英文小标题：
Cross-Border Logistics Briefing - 主标题：
跨境包裹的通关之旅 - 副标题：
by Zhijian Lin - 滚动提示：
向下滑动，和包裹一起开启通关之旅
首屏打开后自动播放大标题字体动画：小标题先出现，主标题随后以模糊、上浮、裁切展开的方式出现，副标题再出现，最后无缝出现鼠标滚动提示。首屏文字整体位置要偏上，不要压在页面底部。
整体风格应为深色、科技感、电影感、海关物流指挥中心感。不要做普通卡片式网页。使用：
- 深蓝黑背景
- 青色、蓝色、红色、暖黄色作为功能色
- 半透明 HUD 线条
- 细网格背景
- 暗角和光晕
- 玻璃拟态信息框
- 大字号标题
- 细边框、扫描线、进度条
需要有固定顶部滚动进度条，左下角或底部可加入包裹旅程进度线，右侧可加入章节导航圆点。
第一段转场使用 1货机卸货.png 和 2进入海关.png。
效果：当用户向下滚动时，第一张机场航拍图向海关建筑方向推进、放大、轻微虚化，然后逐渐融合到第二张海关门前特写。不要在这段显示大标题，只保留鼠标图标和提示文案：
向下滚动，跟随包裹进入监管区
第二段转场使用 3准备进入扫描仪.png 和 4进入传送带内部.png。
效果：镜头沿传送带向前推进，逐渐进入红色扫描通道。叠加红色扫描光束、网格线、轻微模糊和透明融合。这里可以显示：
Scanner Dive沿传送带向前穿梭，进入红光扫描通道
转场使用 position: sticky、CSS 变量和 JavaScript 滚动进度驱动，不使用外部动画库。
标题：
化整为零，开启国门第一道关卡
正文：
刚卸下的航空集装器 ULD 会被送入海关监管区拆板理货。包裹被逐件放上传送带，系统同步采集面单、重量、来源、品名和申报价值，形成后续查验的数字底账。
补充信息卡：
ULD：航空集装器让货物能整板装卸，压缩机坪停留时间。监管区：包裹进入这里后，流转、查验、放行都有电子轨迹。理货：把大批量货物拆分成可识别、可分拣的单件包裹。
视觉：使用 2进入海关.png 作为背景和图像内容，可叠加传送带动态条纹。
标题：
智能审图，毫秒级的透视之眼
正文：
包裹进入同位素或 X 光机扫描通道，系统不拆箱也能识别内部轮廓、密度和疑似风险点。AI 审图会把图像与申报品名、价值、重量进行同屏比对，正常包裹快速放行，异常包裹被标记复核。
补充信息卡：
光电互联：条码阵列瞬间读取面单信息，把实体包裹与物流数据绑定。智能 CT：多维影像帮助识别夹藏、瞒报、漏报和疑似违禁品。
视觉：使用 4进入传送带内部.png 作为主要画面，叠加红色扫描光束。扫描动画要流畅，不要使用性能较差的 background-attachment: fixed。推荐使用伪元素和 transform: translate3d(...) 做 GPU 友好的扫描光束动画。
标题：
异常拦截与人工复核
正文：
当 X 光图像与申报信息不符，或命中风险模型，包裹会从主线自动分流到异常暂存区。随后关员在执法记录和系统留痕下开箱查验，确认无违禁问题后重新封箱，并放入查验告知单。
提示框：
这一步看似“变慢”，其实是在为消费者、商家和国门安全做兜底：透明查验让跨境物流既快，也可追溯。
视觉：使用 5进入异常处置框(1).png 和 6海关开箱.png 做双图排布，整体色调转为暗黄、警示、风控质感。
标题：
阳光清关，一部手机搞定税款
正文：
如果包裹达到征税标准，收件人会收到待缴税通知。依托单一窗口、跨境电商平台和支付系统互联，行邮税或跨境电商综合税可在线完成，支付结果秒级回传海关系统。
补充信息卡：
推送：待缴税信息直达收件人手机。支付：线上核验税款并完成缴纳。放行：电子指令回传后闸门开启。
视觉和交互：
- 构造一个手机外框，不要直接裸放截图。
- 手机内先显示
7收到缴费通知.JPG。 - 页面任意位置滚动鼠标滚轮后，触发缴费成功状态。
- 成功状态触发后，通知图淡出，
8成功缴费.GIF淡入显示。 - 可加入底部状态提示，如
移动鼠标，完成线上缴税或类似文案。
标题：
获批放行，奔赴最后一公里
正文：
历经卸货、理货、机检、查验与清关，包裹终于获得海关放行指令。传送带尽头，干线物流车队整装待发，在清晨微光中驶离监管区，接力完成国内派送。
视觉：使用 9出海关.png，做横向全景视差，滚动时图片横向轻微移动，表现车队出关。
不要让文字每次滚轮都重复闪烁。请实现“分层固定”的文字出现逻辑：
- 每个章节初始可隐藏文字层。
- 第一次滚轮：出现章节标签和大标题。
- 第二次滚轮：出现正文。
- 第三次滚轮：出现数据卡、提示框、补充说明。
- 已出现的文字保持固定，不要反复重播。
可用 JavaScript 为当前可见章节添加 text-step-1、text-step-2、text-step-3 类名。用 CSS transition 控制透明度、上浮、模糊清晰化和轻微光晕。
请用原生 JavaScript 实现以下功能：
IntersectionObserver：章节进入视口时添加in类，激活右侧导航点。scroll事件：更新顶部进度条、旅程进度线、背景视差、横向全景位移、两段镜头转场进度。wheel事件：推进当前可见章节的文字分层动画，同时触发云端缴税成功 GIF。pointermove：在部分互动章节中加入轻微鼠标视差倾斜。- 支持
prefers-reduced-motion: reduce，降低动画。
桌面端要有强电影感和大标题。移动端要自动改为单列布局，隐藏右侧章节导航和底部旅程条，保证文字不溢出、不重叠。不要使用负字距，不要让按钮或提示文字被截断。
- 只生成一个
index.html。 - CSS 和 JS 全部内联。
- 不使用 React、Vue、Three.js、GSAP 或任何外部 CDN。
- 图片路径使用同目录相对路径。
- 页面应可直接双击
index.html在浏览器中打开。 - 保持中文文案正常显示，文件编码使用 UTF-8。
最终输出一个完整、可运行、视觉冲击强的 HTML 静态展示页。它应像一部跨境包裹通关短片：从夜间货机卸货开始，经历海关监管、智能扫描、异常查验、云端缴税，最后出关奔赴最后一公里。