# Motion and state plan

Revision 1. Preserve donor behavior across all four pages. One deliberate entrance timeline per section maximum. One signature moment per page, T02, with T16 providing the required secondary spatial gallery. Source: complete donor `design/reference/donor.html`, especially CSS lines 399–459 and JS lines 1836–2022. AL-Design GSAP skill and ScrollTrigger reference informed the proposed implementation.

| Region | Source behavior to preserve | Required states and implementation |
|---|---|---|
| H | Text/card stagger and two-step form choice | Initial selector, selected topic, next state with real action, back restoring choice. Entrance opacity 0→1 and y 24→0 over about 0.8s, modest stagger. Essential text visible without JS. |
| T01 | 25s horizontal seamless marquee, hover pause | Two equal copies. Pause on focus and explicit pause control. Reduced motion shows one static set. |
| T02 | 300vh split gate with 100vh sticky viewport and nine-image grid | At progress p: gateProgress=clamp(1.5p), e=gateProgress², halves translate ±100e percent, grid scale .8→1 with e, grid opacity clamp(2p), title opacity 1−clamp(6p), title scale 1→1.2. Capture 0, .25, .5, .75, 1. In first stage two matching halves form one image, middle reveals grid, end gives all nine photographs. |
| T03 | Single soft entrance | Three items readable together. Do not animate claims as counters. |
| T04–T06 | Three complete service galleries and lightbox | Main + three thumbs stay present on desktop. Hover/focus reveals expand button. Each image opens correct group/index. Previous/next wrap within group, Escape closes and returns focus. |
| T07 | Single band entrance | Four anchors, no invented animated numeric proof. |
| T08 | Drag/range comparison | Initialize at 50 on page load. 0, 50 and 100 reveal correct layer width, handle synchronized, keyboard arrow control and visible focus. Overlay image width follows full underlying frame, not cropped container width. Labels readable at extremes. |
| T09 | Image and copy reveal together | Badge remains attached to image, not detached by independent parallax. |
| T10 | Hover lift −5px source effect | Identical hover/focus treatment for Sanyi and Dóri. No skew or unequal prominence. |
| T11 | Four-panel image accordion, active flex 4 vs rest flex 1 | Each panel expands on pointer hover, click and keyboard activation/focus. Vertical title disappears and lower caption appears. Keep a stable default panel so essential text has an accessible reading path. Layout expansion is a donor-defining exception to the generic transform-only animation preference. Avoid extra parallax. |
| T12 | Native details/summary FAQ | Collapsed/expanded, plus→cross, one/all open still fit. Answer remains selectable/readable. |
| T13 | 40% sticky narrative beside four scrolling 60% cards | Start/middle/end captures prove fixed left column and changing right cards. top offset accounts for actual navigation height. Never put transform/overflow on sticky ancestors. |
| T14 | Four numbered steps and subtle hover scale 1.03 | Shared entrance, circular number remains centered. No sequential text concealment. |
| T15 | Three 600px clipped vertical columns, 20s middle reverse | Seamless complete repeated sets, duplicated copy aria-hidden. Hover/focus and pause control stop movement. Reduced motion shows all unique prompts statically. Preserve three-column composition. |
| T16 | Six-image 3D cylinder | Each card rotateY(i×60°) translateZ(450px), ring rotateY(−360p), perspective 1500px, 400×500 card. Capture p=0/.25/.5/.75/1 and open a visible image. Explicit previous/next controls may supplement scroll so all images remain reachable. |
| T17 | Active subject chips and draft composition | Six topic states, text entry, draft-opening action with correct encoded subject/body. No toast claiming sent. Do not submit during QA. |
| N01 | Small lane reveal | Both routes visible without waiting. Hover/focus arrow translates at most 4px. |
| N02 | Ruled row reveal | All three rows remain visible. Optional gold rule scaleX only. |
| N03 | Benefit rows and offer card entrance | Small single entrance, no pulsing CTA or pressure animation. Read three steps at rest. |
| Global | Sticky navigation, progress strip, lightbox | Progress uses transform scaleX to avoid repeated layout. Route links stay correct from subdirectories. Lightbox pauses gallery scroll logic, Escape/previous/next function, closing restores exact scroll position and opener focus. |

## Scroll implementation safeguards

Retain native scrolling. Use either the donor math or a GSAP timeline faithfully reproducing it, never both competing on one transform. GSAP should register once and create triggers in DOM order. Refresh after fonts and image dimensions settle. Do not apply overflow hidden/auto, containment or transforms to html/body or sticky ancestors. Clip only the stage/individual media wrappers where necessary. A generic whole-page `overflow-x:hidden` can break both donor galleries.

The source JavaScript uses global scroll positions and updates only while moving. Improve initialization: apply the correct gallery state at first render and on restored scroll/deep links so reloading in the middle does not leave stale gates or ring orientation. Keep one requestAnimationFrame loop or one timeline per gallery. Stop unnecessary processing offscreen. Keep essential text outside a permanently hidden animation layer.

## Reduced-motion state

Use `prefers-reduced-motion: reduce`: no autoplay ticker/vertical columns, no scrubbed 3D rotation and no prolonged pin. T02 becomes a useful visible 3×3 gallery preceded by its scene and text, T16 a visible six-image grid with working lightbox. Sticky narrative may remain ordinary native sticky if comfortable, or become a static split. All copy and all images remain accessible, while reduced-motion changes are explicitly separate from the normal-motion fidelity screenshots.

## Required integration evidence

At 1440×1000, save real normal-motion start/middle/end captures and gallery time sequences, then verify reduced-motion and keyboard states separately. DOM presence and CSS transforms alone cannot pass visual quality. Capture each donor region, every tall segment, overlap runs and full-page rhythm. This plan is not a statement that those future pages have passed.