文档官网
页面上的 11 条交互说明。
页面上的粉色圆点编号对应下方说明（共 11 条，11 为新增的标志、标语与三色点）。
页面上的粉色圆点编号对应下方说明。全局：区块出场为淡入 + 上移 16px（200ms ease-out）；所有动效都遵守 prefers-reduced-motion；所有可交互元素都可用键盘操作，并有 3px primary 焦点描边。
滚动 > 80px：高度 80→64，底色 paper→white，底部 4px 硬投影（见状态板）。点击锚点平滑滚动，顶部留 72px；当前区块对应的导航项高亮（IntersectionObserver）。减少动态效果时直接跳转，不做平滑滚动。 标志：默认态用彩色组合标（文件高 48，可见高 40）；吸顶态缩到文件高 39（可见高 32），点击回到顶部，alt="hajimi"。页脚三色标语进入视口时，吸顶组合标换成 ink 单色版，200ms 淡入淡出；离开后切回彩色（见状态板 C3）。
导航和 Hero 的 CTA 都滚到 09 询价并聚焦第一个必填项。悬停：上移 2px，投影 6→8px，160ms ease-out；按下：投影归零、位移 +4px，表现为"按扁"。焦点：3px primary 描边，外扩 2px。
鼠标移动时贴纸按深度系数（0.3–1）反向位移，最大 12px，200ms 跟随。首屏贴纸依次贴上：scale 0.9→1，间隔 60ms，总长 ≤600ms。触屏或减少动态效果时两者都关闭，贴纸静态展示。 图形标贴纸（hajimi-symbol-color.svg）在贴纸堆最上层，默认 −6°（逆时针，CSS rotate(-6deg)），允许 −6°~−3° 或 +3°~+6°。视差只位移不改角度，悬停不旋转；文件自带硬投影，不再加 CSS 投影。Hero 不放标语。
匀速 40s 一圈；悬停暂停，Logo 从 80% 透明度变为 100%（200ms）。减少动态效果时停止滚动，静态居中排布。Logo 需提供 alt 文本。
悬停：卡片回正到 0°，投影 6→8px。点击整卡滚到询价，并预选对应品类。键盘可用 Tab 聚焦，按 Enter 触发。
Chip 单选，切换时卡片淡出再淡入（200ms），并重排瀑布流。请求中显示骨架屏；无结果显示空状态。点击卡片打开详情浮层（Esc 或点遮罩关闭，焦点锁定在浮层内），「做类似的」进入询价并预填品类（2 次点击）。
进入视口时 01→04 依次出现：淡入 + 上移 16px，间隔 100ms。减少动态效果时直接显示。
支持拖拽、触控板横滑和左右箭头；每次滚动 1 张卡（288px）。到达边界时对应箭头为禁用态。「加入询价」点击后变为「已加入询价」，并在表单中自动选中对应品类；再次点击可取消。
进入视口时数字从 0 滚到目标值，800ms ease-out，只播放一次。减少动态效果时直接显示终值。屏幕阅读器始终读到终值。
必填：品类 ≥1、数量区间、称呼、手机或微信。失焦时校验，提交时整体校验并滚到第一个错误项。提交中按钮禁用并显示转圈；成功后原地替换为成功卡片（撒花 0.8s，只播放一次；减少动态效果时不撒花）；失败时在表单顶部显示可关闭的错误横条，提供「重试」和微信兜底，已填内容保留。
页脚（ink 底）：左侧 paper 单色组合标，右侧三色标语，左右分侧，不叠成签名。标语是主角：x 高 24.8px ≥ 组合标 19.1px。页脚其他位置没有彩色圆点。 同一视口只允许一组三色点：首屏 = 导航组合标；页脚屏 = 三色标语（导航已切单色）。询价区（紫底）和品牌墙不放 hajimi 标志。评价头像、流程编号、清单勾选都用单一颜色。
Pink numbered dots on the page match the notes below. Global: sections enter with fade + 16px rise (200ms ease-out); all motion respects prefers-reduced-motion; every interactive element is keyboard-operable with a 3px primary focus ring.
After scrolling > 80px: height 80→64, background paper→white, 4px hard shadow at the bottom (see States). Anchor links scroll smoothly with a 72px top offset; the link for the current section is highlighted (IntersectionObserver). With reduced motion, jump instantly instead of smooth scrolling. Logo: the default nav uses the colour lockup (file height 48, visible 40); sticky shrinks it to file height 39 (visible 32). Click returns to top, alt="hajimi". When the footer's three-dot slogan enters the viewport, the sticky lockup crossfades to the ink version in 200ms and switches back once the footer leaves (see States C3).
Both the nav and hero CTAs scroll to 09 Quote and focus the first required field. Hover: lift 2px, shadow 6→8px, 160ms ease-out. Press: shadow to 0 and shift +4px so it looks "squished". Focus: 3px primary ring, 2px offset.
On mouse move, stickers shift opposite to the cursor by a depth factor (0.3–1), max 12px, 200ms follow. On first load stickers "stick on" one by one: scale 0.9→1, 60ms stagger, ≤600ms total. Both are off on touch devices and with reduced motion — stickers stay static. The symbol sticker (hajimi-symbol-color.svg) sits on top of the pile at −6° by default (counter-clockwise, CSS rotate(-6deg)); allowed −6° to −3° or +3° to +6°. Parallax moves it but never changes the angle; no rotation on hover; the file already has its hard shadow, so add no CSS shadow. No slogan in the hero.
Constant speed, 40s per loop; pauses on hover and logos go from 80% to 100% opacity (200ms). With reduced motion it stops and logos sit static and centered. Every logo needs alt text.
Hover: card straightens to 0°, shadow 6→8px. Clicking anywhere on the card scrolls to Quote with that category preselected. Keyboard: Tab to focus, Enter to activate.
Single-select chips; cards fade out and back in (200ms) and the masonry reflows. Skeletons while loading; empty state when there are no results. Clicking a card opens the detail modal (Esc or backdrop click closes it, focus is trapped inside); "Make something like this" goes to Quote with the category prefilled (2 clicks).
On entering the viewport, 01→04 appear in sequence: fade + 16px rise, 100ms stagger. With reduced motion they show immediately.
Drag, trackpad swipe or arrow buttons; each step scrolls one card (288px). At either end the matching arrow is disabled. "Add to quote" turns into "Added to quote" and preselects that category in the form; click again to undo.
On entering the viewport, numbers count from 0 to target, 800ms ease-out, once. With reduced motion the final value shows immediately. Screen readers always get the final value.
Required: ≥1 category, quantity, name, email or phone. Validate on blur; on submit validate everything and scroll to the first error. While sending, the button is disabled with a spinner. On success the form is replaced in place by a success card (0.8s confetti, once; none with reduced motion). On failure a dismissible error bar appears at the top with "Retry" and a WhatsApp fallback; entered data is kept.
Footer (ink): paper one-colour lockup on the left, three-dot slogan on the right — split sides, never stacked as a signature. The slogan leads: x-height 24.8px ≥ lockup 19.1px. No other coloured dots in the footer. One set of three dots per viewport: first screen = nav lockup; footer screen = slogan (nav already switched to ink). No hajimi logo in the purple quote section or the brand wall. Testimonial avatars, process numbers and checklist ticks each use a single colour.
