/* ========================================================================== PAMI — Global Motion System -------------------------------------------------------------------------- Motion is part of the Design System, not a page feature. Governance: - Components may declare participation only through the global roles below. - Components must not introduce a separate motion language without explicit architectural approval. - Reveal motion uses opacity and transform only. - Content remains visible when JavaScript is unavailable or initialization fails. Public roles: - .reveal-section — lifecycle and observation boundary; - .reveal-media — photography / visual content; - .reveal-content — headings, copy and supporting information; - .reveal-action — CTA groups and interaction entry points; - .motion-image-hover / .motion-image-hover__target — optional reusable image-hover contract. ========================================================================== */ /* ========================== REVEAL POLISH TOKENS -------------------------------------------------------------------------- These tokens are scoped to the reveal system so the v1.2 choreography does not slow down unrelated hover, focus or component transitions. ========================== */ :root { --motion-reveal-duration-content: 680ms; --motion-reveal-duration-action: 660ms; --motion-reveal-duration-self: 720ms; --motion-reveal-duration-media: 820ms; --motion-reveal-easing: cubic-bezier(0.18, 0.9, 0.32, 1); --motion-reveal-stagger-internal: 90ms; --motion-reveal-stagger-card: 130ms; --motion-reveal-distance-content: 20px; --motion-reveal-distance-action: 16px; --motion-reveal-distance-self: 22px; --motion-reveal-distance-media: 22px; --motion-reveal-scale-self: 0.992; --motion-reveal-scale-media: 0.988; } /* ========================== REVEAL ORDER API -------------------------------------------------------------------------- Components declare semantic order, never timing values. ========================== */ [data-reveal-order="0"] { --motion-order: 0; } [data-reveal-order="1"] { --motion-order: 1; } [data-reveal-order="2"] { --motion-order: 2; } [data-reveal-order="3"] { --motion-order: 3; } [data-reveal-order="4"] { --motion-order: 4; } [data-reveal-order="5"] { --motion-order: 5; } [data-reveal-order="6"] { --motion-order: 6; } /* ========================== CARD SEQUENCE API -------------------------------------------------------------------------- The controller assigns a visual-row position to reveal sections. The value is capped at four columns so card grids gain rhythm without accumulating a long delay during fast scrolling. ========================== */ [data-motion-sequence="0"] { --motion-section-order: 0; } [data-motion-sequence="1"] { --motion-section-order: 1; } [data-motion-sequence="2"] { --motion-section-order: 2; } [data-motion-sequence="3"] { --motion-section-order: 3; } /* ========================== PROGRESSIVE ENHANCEMENT -------------------------------------------------------------------------- Hidden states exist only after the global controller adds .pami-motion-ready to . Without JavaScript, all content stays visible. .pami-motion-armed is added only after initial pending states are configured. This prevents content from animating from visible to hidden during boot while keeping the transition contract active for the pending → revealed change. ========================== */ html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] ) :is(.reveal-media, .reveal-content, .reveal-action), html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] )[data-motion-self="true"] { transition-property: opacity, transform; transition-timing-function: var(--motion-reveal-easing); transition-delay: calc( ( var(--motion-reveal-stagger-card) * var(--motion-section-order, 0) ) + ( var(--motion-reveal-stagger-internal) * var(--motion-order, 0) ) ); } html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] ) .reveal-content { transition-duration: var(--motion-reveal-duration-content); } html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] ) .reveal-action { transition-duration: var(--motion-reveal-duration-action); } html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] ) .reveal-media { transition-duration: var(--motion-reveal-duration-media); } html.pami-motion-ready.pami-motion-armed .reveal-section:is( [data-motion-state="pending"], [data-motion-state="revealed"] )[data-motion-self="true"] { transition-duration: var(--motion-reveal-duration-self); } html.pami-motion-ready .reveal-section[data-motion-state="pending"] .reveal-content { opacity: 0; transform: translate3d( 0, var(--motion-reveal-distance-content), 0 ); } html.pami-motion-ready .reveal-section[data-motion-state="pending"] .reveal-action { opacity: 0; transform: translate3d( 0, var(--motion-reveal-distance-action), 0 ); } html.pami-motion-ready .reveal-section[data-motion-state="pending"] .reveal-media { opacity: 0; transform: translate3d( 0, var(--motion-reveal-distance-media), 0 ) scale(var(--motion-reveal-scale-media)); } html.pami-motion-ready .reveal-section[data-motion-state="pending"][data-motion-self="true"] { opacity: 0; transform: translate3d( 0, var(--motion-reveal-distance-self), 0 ) scale(var(--motion-reveal-scale-self)); } html.pami-motion-ready .reveal-section[data-motion-state="revealed"] :is(.reveal-media, .reveal-content, .reveal-action), html.pami-motion-ready .reveal-section[data-motion-state="revealed"][data-motion-self="true"] { opacity: 1; transform: none; } /* ========================== FURNITURE CARD CHOREOGRAPHY -------------------------------------------------------------------------- The existing card markup now exposes the media, heading, supporting copy and action as semantic reveal roles. This keeps the image in the lead while the card content settles in a controlled internal sequence. ========================== */ .furniture-card__action { display: block; } /* ========================== GLOBAL IMAGE HOVER CONTRACT -------------------------------------------------------------------------- Apply .motion-image-hover to the interactive wrapper. Keyboard focus on that wrapper therefore activates the same restrained image response as pointer hover without changing the focus outline contract. ========================== */ .motion-image-hover > img, .motion-image-hover > picture > img, .motion-image-hover .motion-image-hover__target { transform: scale(1); transform-origin: 50% 50%; transition: transform var(--motion-duration-media) var(--motion-easing-emphasized); } @media (hover: hover) and (pointer: fine) { .motion-image-hover:is(:hover, :focus-within) > img, .motion-image-hover:is(:hover, :focus-within) > picture > img, .motion-image-hover:is(:hover, :focus-within) .motion-image-hover__target { transform: scale(var(--motion-hover-scale)); } } /* ========================== REDUCED MOTION -------------------------------------------------------------------------- The controller disables observers and removes the root readiness classes when the preference is active. This CSS block is the independent safety net. ========================== */ @media (prefers-reduced-motion: reduce) { html.pami-motion-ready .reveal-section :is(.reveal-media, .reveal-content, .reveal-action), html.pami-motion-ready .reveal-section[data-motion-self="true"], .motion-image-hover > img, .motion-image-hover > picture > img, .motion-image-hover .motion-image-hover__target { opacity: 1; transform: none; transition: none; } }