电影级网站（Cinematográfico）
您让网站拥有精心导演作品的感觉：每次滚动都揭示新内容，每个按钮响应都有分量，排版拥有海报般的规模。最终客户是本地商家老板，访问者通常使用手机，很多时候是 4G 网络。因此，动效是轻量的、基于浏览器的原生能力，绝不会干扰阅读或点击 WhatsApp 按钮。
实况参考标准：包含在技能 fazer-site 中的模板（fazer-site/template/）。对节奏、比例或密度有疑问时，打开参考并模仿其精修手法，而非内容。
原则（Axiomas）
- 身份是客户的。 颜色和字体来自 Logo、店面招牌和商家的 Instagram。禁止使用现成的目录调色板。仅当任何地方都不存在 Logo 时，才使用临时颜色，并明确声明为临时。
- 商家名称在 Hero 区域，大号显示。 没有名称的 Hero 已被否决。
- 照片必须是商家实拍，绝不使用图库。 店面、店铺、产品、成果。如果没有某部分的真实照片，该区块必须标记为“示意图”或删除。
- 动效服务于阅读。 如果某个动画延迟内容展示、阻塞滚动或遮盖按钮，则必须移除。
- 默认轻量。 HTML、CSS 和
IntersectionObserver足以解决问题。动画库（如 GSAP 等）仅在经批准的动效无法用 CSS 实现时引入，且绝不用于 CSS 已能完成的效果。
禁止项（每一项都已在真实项目中被否决）
- 滚动时堆叠或下降的卡片（粘性堆叠、
pin配合缩放和模糊）。禁止。 - 对商店、店面、产品或环境的照片使用圆角、弧形或圆形剪裁。 大
border-radius的容器也不行。锐利边角或对角剪裁（clip-path）是标准。 - 评价区底部的背景照片。
- 细衬线体和斜体作为标题，以及默认使用金色作为强调色。 会显得“精致”。所需调性是阳刚、激进、现代，除非客户品牌另有要求。
- 虚构的价格表和虚构的数字。 价格、分数、期限、推荐语和计数只能来自商家本身公开的信息。
- 对本地商家无意义的软件装饰： 模仿实时面板的卡片、“系统运行中”、自行点击的光标、打字机效果的 Logo。
电影级效果的具体实现
海报级的排版。 一种紧凑、粗重的字体家族用于标题（例如：Barlow Condensed 800 斜体），另一种干净的字体用于正文。大标题（桌面端使用 clamp() 达到约 90-140 px）、短行距、text-wrap: balance。标题与正文之间的尺寸对比是主要动效；零成本。
Hero 区域。 超大号的商家名称、一段具体的描述其业务内容和地点的短语、简短证明（评分、评价、粉丝数、营业时间）以及主要按钮。在桌面端，文本和照片并排。在手机上顺序为：名称、短语、证明、按钮、照片。照片可以带有对角剪裁的边角和缓慢缩放（scale 从 1 到 1.06，约 20 秒）。
分步进入。 加载时，Hero 区域的元素向上移动 16-40 px 并依次出现（元素之间延迟约 80 ms）。下面的区块在进入视口时以相同的动效显示，由低阈值的 IntersectionObserver 触发。
纹理。 SVG <feTurbulence> 噪点，5% 不透明度，覆盖在 Hero 和高亮区域的纯色背景上，去除数字渐变的感觉。
有分量的按钮。 overflow: hidden 配合一个滑动层在悬停时切换颜色，轻微的 scale(1.03) 配合 cubic-bezier(0.25, 0.46, 0.45, 0.94)。最小触摸目标 44 px。
宽屏证明高亮。 一条真实评价以宣言大小展示，深色纯背景，文字随滚动依次点亮。每个网站仅一条；其余评价以简单网格展示。
计数数字。 评分或其他真实数字，在进入视口时从 0 计数到目标值。
服务板块对比。 一个浅色区块插入深色网站中部（或反之），带有大号顺序数字（01，02…），切割节奏并标记主题变化。
走马灯横幅（marquee） 显示服务或类别，使用强调色，可选。
技术规则
- 基础：静态 HTML，CSS 内嵌在文件中，除非项目已有其他基础。在已有项目中，保留基础结构和已批准的文案；仅应用本层动效。
- 字体通过 Google Fonts 加载，使用
preconnect和display=swap。 - Hero 图片设置
fetchpriority="high"；其余图片设置loading="lazy"，声明width和height。 - 所有元素在
@media (prefers-reduced-motion: reduce)中关闭动画和过渡。 - 手机：底部固定栏包含 WhatsApp 和拨号按钮，当表单字段获得焦点时，以及 Hero 按钮可见时，该栏消失。在 360 px 宽度下不得出现水平滚动。
完成条件
- 已打开并检查 360px、375px 和 1440px 的截图，禁止列表中的任何项均未出现。
- 商家名称在 Hero 区域，照片来自商家本身或标记为示意图。
- 在启用
prefers-reduced-motion时，网站完整且可读，没有隐藏内容等待动画显示。