/* ═══════════════════════════════════════════════════════════════════════════ css/motion.css — the mobile motion layer. design/mobile-motion.md §B + the binding critic amendments. Owner: the engine (js/app.js). Loaded async with a

(no data-reveal)

overflow:clip first direct child

top-right bottom-left centred with translate:-50% 50% No transform on reels/handle (tilt = rotate), no data-m-depth, no countup. ═══════════════════════════════════════════════════════════════════════════ */ /* ── engine-owned structure (all modes: the split must read the same with or without motion, and the tilt pivot is layout, not motion) ─────────────── */ .m-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .m-w{ display: inline-block; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .m-wi{ display: inline-block; } [data-m="pop"]{ transform-origin: var(--m-origin, 50% 50%); } @media (prefers-reduced-motion: no-preference){ /* ── triggered reveals: from-states ─────────────────────────────────── */ [data-motion="on"] [data-m-armed]:not([data-m-in]){ opacity: 0; } [data-motion="on"] [data-m-armed][data-m="fade"]:not([data-m-in]){ transform: translate(0,var(--mo-d2)); } [data-motion="on"] [data-m-armed][data-m="rise"]:not([data-m-in]){ transform: translate(0,var(--mo-d3)); } [data-motion="on"] [data-m-armed][data-m="card"]:not([data-m-in]){ transform: translate(0,16px) scale(var(--mo-scale-in)); } [data-motion="on"] [data-m-armed][data-m="pop"]:not([data-m-in]){ transform: translate(var(--m-pop-x,0),var(--m-pop-y,0)) scale(.72); } [data-motion="on"] [data-m-armed][data-m="clip"]:not([data-m-in]){ opacity: 1; clip-path: inset(10% 14% 10% 14% round var(--r-lg)); } [data-motion="on"] [data-m-armed][data-m="clip"]:not([data-m-in]) > img{ transform: scale(1.12); } [data-motion="on"] [data-m-armed][data-m="lines"]:not([data-m-in]), [data-motion="on"] [data-m-armed][data-m="roll"]:not([data-m-in]){ opacity: 1; } /* 105% of the word, plus the mask's own .16em bottom allowance (padding + clip margin) so no sliver of a cap peeks under the line before it rises. */ [data-motion="on"] [data-m-armed][data-m="lines"]:not([data-m-in]) .m-wi{ transform: translate(0,calc(105% + .16em)); } [data-motion="on"] [data-m-armed][data-m="roll"]:not([data-m-in]) .m-roll{ transform: translate(0,100%); } /* clip end state (amendment 5): inset() → inset(0) interpolates; → none would snap. */ [data-motion="on"] [data-m-armed][data-m="clip"][data-m-in]:not([data-m-done]){ clip-path: inset(0 0 0 0 round var(--r-lg)); } /* ── per-effect parameters ─────────────────────────────────────────────── */ [data-m="fade"]{ --m-dur: var(--mo-base); --m-ease: var(--ease-out); } [data-m="rise"]{ --m-dur: var(--mo-slow); --m-ease: var(--ease-out); } [data-m="card"]{ --m-dur: var(--mo-card); --m-ease: var(--ease-expo); } [data-m="pop"] { --m-dur: var(--mo-spring); --m-ease: var(--ease-spring); } /* ── ONE transition list per armed element (reveal + press lane + colours). Applies only until data-m-done, so a finished reveal never keeps its delay. */ [data-motion="on"] [data-m-armed]:not([data-m-done]){ transition: opacity var(--m-dur,var(--mo-base)) var(--m-ease,var(--ease-out)) var(--m-delay,0ms), transform var(--m-dur,var(--mo-base)) var(--m-ease,var(--ease-out)) var(--m-delay,0ms), scale var(--m-press-t,var(--mo-spring)) var(--m-press-e,var(--ease-spring)), background-color var(--mo-quick) var(--ease-out), border-color var(--mo-quick) var(--ease-out), color var(--mo-quick) var(--ease-out); } /* CINEMA only: §8.1 blur, `card` only (amendment 19: a full list, not transition-property, so durations stay paired). */ [data-tier="cinema"][data-motion="on"] [data-m-armed][data-m="card"]:not([data-m-in]){ filter: blur(6px); } [data-tier="cinema"][data-motion="on"] [data-m-armed][data-m="card"]:not([data-m-done]){ transition: opacity var(--mo-card) var(--ease-expo) var(--m-delay,0ms), transform var(--mo-card) var(--ease-expo) var(--m-delay,0ms), filter var(--mo-card) var(--ease-expo) var(--m-delay,0ms), scale var(--m-press-t,var(--mo-spring)) var(--m-press-e,var(--ease-spring)), background-color var(--mo-quick) var(--ease-out), border-color var(--mo-quick) var(--ease-out), color var(--mo-quick) var(--ease-out); } /* lines: words rise inside their own masks, line by line */ [data-motion="on"] [data-m-armed][data-m="lines"]:not([data-m-done]) .m-w{ overflow: clip; overflow-clip-margin: .08em; } [data-motion="on"] [data-m-armed][data-m="lines"]:not([data-m-done]) .m-wi{ transition: transform var(--mo-mask) var(--ease-expo) calc(var(--m-delay,0ms) + var(--l,0) * var(--mo-line) + var(--i,0) * var(--m-word, var(--mo-word))); } /* roll: the whole content rises inside the host */ [data-motion="on"] [data-m-armed][data-m="roll"]:not([data-m-done]){ overflow: clip; } [data-motion="on"] [data-m-armed][data-m="roll"]:not([data-m-done]) .m-roll{ transition: transform var(--mo-card) var(--ease-expo) var(--m-delay,0ms); } /* clip: the frame develops, the photo racks focus */ [data-motion="on"] [data-m-armed][data-m="clip"]:not([data-m-done]){ transition: clip-path var(--mo-clip) var(--ease-expo) var(--m-delay,0ms), scale var(--m-press-t,var(--mo-spring)) var(--m-press-e,var(--ease-spring)); } [data-motion="on"] [data-m-armed][data-m="clip"]:not([data-m-done]) > img{ transition: transform var(--mo-clip) var(--ease-expo) var(--m-delay,0ms); } /* revealed by a failsafe / in view at arm: no transition, for two frames */ [data-motion="on"] [data-m-instant], [data-motion="on"] [data-m-instant] :is(.m-wi,.m-roll), [data-motion="on"] [data-m-instant][data-m="clip"] > img{ transition: none !important; } /* ── press (lane: scale). :active only swaps the variables, never the list. Pressables that are not mid-reveal get this list (amendment 18: it carries the colour transitions base.css .cta declares, so none are lost). ─────── */ [data-press="on"] :is(.cta, [data-m-press]):not([data-m-armed]:not([data-m-done])){ transition: scale var(--m-press-t,var(--mo-spring)) var(--m-press-e,var(--ease-spring)), background-color var(--mo-quick) var(--ease-out), border-color var(--mo-quick) var(--ease-out), color var(--mo-quick) var(--ease-out), /* lead, §8: the reel cards straighten their resting tilt on hover (rotate lane). No other pressable rotates, so this is inert elsewhere. */ rotate var(--mo-base) var(--ease-out); } [data-press="on"] :is(.cta, [data-m-press]):active{ scale: var(--mo-scale-press); --m-press-t: var(--mo-instant); --m-press-e: var(--ease-out); } /* ── shimmer: one-shot, .cta only (amendment 23). The engine sets data-m-shimmer-run and removes it on animationend. ───────────────────── */ [data-motion="on"] .cta[data-m-shimmer]{ position: relative; overflow: clip; isolation: isolate; } [data-motion="on"] .cta[data-m-shimmer]::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%); translate: -120% 0; } [data-motion="on"] .cta[data-m-shimmer-run]::before{ animation: m-shimmer var(--mo-shimmer) var(--ease-in-out) 1 both; } @keyframes m-shimmer{ from{ translate: -120% 0; } to{ translate: 120% 0; } } /* ── invalid-field shake (engine sets data-m-shake, removes on animationend) */ [data-motion="on"] [data-m-shake]{ animation: m-shake 320ms var(--ease-out) 1; } @keyframes m-shake{ 0%,100%{ transform: none; } 20%{ transform: translateX(-6px); } 40%{ transform: translateX(6px); } 60%{ transform: translateX(-4px); } 80%{ transform: translateX(4px); } } } /* ── scroll-linked decoration: compositor-driven, native only. No JS fallback: the rest state IS the final state. Gated on data-m-lite (set once at arm), never on data-tier (amendment 1). ────────────────────────────────────── */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ [data-motion="on"]:not([data-m-lite]) [data-m-scrub="dolly"]{ animation: m-dolly linear both; animation-timeline: view(); animation-range: cover 0% cover 60%; } [data-motion="on"]:not([data-m-lite]) [data-m-scrub="lights"]{ animation: m-lights linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } @keyframes m-dolly { from{ scale: 1.10; } to{ scale: 1; } } @keyframes m-lights{ from{ opacity: 1; } to{ opacity: 0; } } } } /* rest state for scrubbed decoration when nothing animates */ [data-m-scrub="lights"]{ opacity: 0; } @media print{ [data-m-armed], [data-m-armed] :is(.m-wi,.m-roll), [data-m-armed] > img{ opacity: 1 !important; transform: none !important; clip-path: none !important; } }