/* =================================================================== MOTION — the mark's renderings and the behaviours a shipped surface actually fires. Grammar: branding/logo/manas_concepts/motion_and_dimension.html (Round 4, adopted 2026-07-26). Durations and easings are TOKENS in brand.css; nothing here names a millisecond or a colour. Written 2026-09-07, when the mark went inline (_mark.html). Only what is wired is here — M4 Tally, M6 Sift and M10 Assay have no surface in the build yet and arrive with the screen that needs them. M1 Swell ambient, idle sign-in idle · empty stations M2 Japa indeterminate a screen that is taking >1 s to arrive M3 Gather ceremony, once sign-in success M5 Settle one-shot, done the done-toast M7 Refuse 160 ms shudder a refused keystroke (the control moves, never a gate) M8 Thread context change leaving one screen for another M9 Vigil staleness, amber the as-of chip when data is >1 day behind Budget (§5): transform and opacity only, so every behaviour stays on the compositor. One looping behaviour per view; one-shots may overlap it because they end. Reduced-motion degrades each to its END STATE, never to nothing. =================================================================== */ svg.mk{display:block;overflow:visible;flex:0 0 auto} svg.mk .bead{fill:var(--mk);opacity:.84;transform-box:fill-box;transform-origin:center} svg.mk .bindu{fill:var(--dot);transform-box:fill-box;transform-origin:center} svg.mk .halo{fill:none;stroke:var(--dot);stroke-width:1.1;transform-box:view-box; transform-origin:40px 40px;opacity:0} svg.mk .ring{transform-box:view-box;transform-origin:40px 40px} /* ---- M1 · SWELL — one breath, mirrored about the vertical axis. Never on a working screen's chrome. ⚠ The ambient ceiling was 6% of R (1.7 units) and OWN found it invisible on the sign-in page (2026-09-07); it is now 10% of R with scale 1.2 — still a breath, not a pulse. brand_base §5 owes this line. */ .m1{--amp:2.8px} .m1 .bead{animation:m_swell var(--t-amb) var(--ease-breath) infinite; animation-delay:calc(var(--ph) * -0.9s)} .m1 .bindu{animation:m_swellb var(--t-amb) var(--ease-breath) infinite} @keyframes m_swell{ 0%,100%{transform:translate(0,0) scale(1);opacity:.84} 46%{transform:translate(calc(var(--ux) * var(--amp)),calc(var(--uy) * var(--amp))) scale(1.2);opacity:1}} @keyframes m_swellb{0%,100%{transform:scale(1);opacity:1}46%{transform:scale(.9);opacity:.86}} /* ---- M2 · JAPA — a comet with a three-bead tail telling the mala CLOCKWISE, one rest-beat at the bindu per circuit. Unknown-duration work ONLY: a moving progress ring would be a promise, and this one promises nothing. ⚠ Direction lives in the delay: bead i (clockwise from the top) must reach its bright frame AFTER bead i-1, so the delay grows as i FALLS — the first cut had it growing with i and the comet ran anticlockwise. ---- */ .m2{--dur:5120ms} .m2 .bead{opacity:.26;animation:m_japa var(--dur) linear infinite; animation-delay:calc((21 - var(--i)) * var(--dur) * -0.0390476)} .m2 .bindu{animation:m_japab var(--dur) var(--ease-still) infinite} @keyframes m_japa{ 0%{opacity:1;transform:scale(1.55)} 3.9%{opacity:.70;transform:scale(1.20)} 8%{opacity:.48;transform:scale(1.06)} 14%,100%{opacity:.26;transform:scale(1)}} @keyframes m_japab{0%,80%{transform:scale(1);opacity:.72}88%{transform:scale(1.28);opacity:1}100%{transform:scale(1);opacity:.72}} /* ---- M3 · GATHER — draw in, FUSE at the centre, release outward. The return is a re-forming, never a rewind. Fires once, on sign-in success, and runs WHILE the session is being established — it fills the wait, it never adds to it. ---- */ .m3 .bead{animation:m_gather var(--t-rite) var(--ease-draw) 1 both; animation-delay:calc(var(--ph) * -0.09s)} .m3 .bindu{animation:m_gatherb var(--t-rite) var(--ease-draw) 1 both} .m3 .halo{animation:m_gatherh var(--t-rite) var(--ease-still) 1 both} @keyframes m_gather{ 0%,8%{transform:translate(0,0) scale(1);opacity:.84} 32%{transform:translate(calc(var(--ux) * -19px),calc(var(--uy) * -19px)) scale(.85);opacity:1} 36.5%{transform:translate(calc(var(--ux) * -26px),calc(var(--uy) * -26px)) scale(.18);opacity:.95} 38%{transform:translate(calc(var(--ux) * -28px),calc(var(--uy) * -28px)) scale(0);opacity:0} 44%{transform:translate(calc(var(--ux) * -22px),calc(var(--uy) * -22px)) scale(.4);opacity:1} 56%{transform:translate(calc(var(--ux) * 1.7px),calc(var(--uy) * 1.7px)) scale(1.09);opacity:1} 65%,100%{transform:translate(0,0) scale(1);opacity:.84}} @keyframes m_gatherb{ 0%,8%{transform:scale(1);opacity:1}32%{transform:scale(.88)} 38.5%{transform:scale(1.8);opacity:1}47%{transform:scale(1.14)}65%,100%{transform:scale(1);opacity:1}} @keyframes m_gatherh{ 0%,37%{transform:scale(.16);opacity:0}39.5%{transform:scale(.42);opacity:.9} 54%,100%{transform:scale(1.62);opacity:0}} /* ---- M5 · SETTLE — a true one-shot on a completed gesture; the done-toast carries the mark and plays this as it arrives. Rebuilt to ASSURE (OWN, 2026-09-07): the ring tells to completion — each bead lights in turn, clockwise from the top, over the first half of the rung — and when the last one lands the bindu seals with one firm swell. A completed round of the mala, then the seal: the same story as the sign-in, told in 900 ms. Functional ceiling: travel ≤ 15% R, scale ≤ 1.55, opacity floor .15. ---- */ .m5 .bead{opacity:.2;animation:m_settle calc(var(--t-done) * .55) var(--ease-still) 1 both; animation-delay:calc(var(--i) * var(--t-done) * .021)} .m5 .bindu{animation:m_settleb var(--t-done) var(--ease-still) 1 both} @keyframes m_settle{ 0%{transform:translate(calc(var(--ux) * -4px),calc(var(--uy) * -4px)) scale(.4);opacity:.2} 55%{transform:translate(calc(var(--ux) * 1.2px),calc(var(--uy) * 1.2px)) scale(1.5);opacity:1} 100%{transform:translate(0,0) scale(1);opacity:.84}} @keyframes m_settleb{ 0%,50%{transform:scale(.8);opacity:.7} 68%{transform:scale(1.55);opacity:1} 84%{transform:scale(.96)} 100%{transform:scale(1);opacity:1}} /* ---- M7 · REFUSE — the only motion permitted at a refusal, and it is the CONTROL that moves, never a gate and never the mark. No overshoot, no bounce: a wall does not spring. ---- */ .shudder{animation:m_refuse var(--t-refuse) var(--ease-hard) 1} @keyframes m_refuse{0%{transform:translateX(0)}22%{transform:translateX(-4px)} 52%{transform:translateX(4px)}78%{transform:translateX(-2px)}100%{transform:translateX(0)}} /* ---- M8 · THREAD — one bead-slot of travel (360/21°) when the context changes. The top-bar mark's ONE permitted motion during work, because the context itself moved. The screen's own fade is the view transition below, which is the same behaviour, not a second one. ---- */ .m8.go .ring{animation:m_thread var(--t-move) var(--ease-still) 1 both} /* clockwise, like the mala is told (OWN, 2026-09-07 — the first cut turned the other way) */ @keyframes m_thread{from{transform:rotate(0deg)}to{transform:rotate(17.1428deg)}} /* ---- M9 · VIGIL — the quiet wrongness of stale data. Amber, never red; 12 s period, never faster. Staleness is not an emergency. ---- */ .vigil{--mk:var(--rag-amber);--dot:var(--rag-amber)} .vigil .bead{animation:m_vigil 12s var(--ease-breath) infinite} .vigil .bindu{animation:m_vigilb 12s var(--ease-breath) infinite} @keyframes m_vigil{0%,100%{opacity:.88}50%{opacity:.42}} @keyframes m_vigilb{0%,100%{opacity:1}50%{opacity:.5}} /* ---- the screen change ---- Server-rendered pages reload whole. The View Transitions API lets the browser cross-fade old and new documents on a same-origin navigation with NO script and NO added wait — the fade runs over the render the browser was doing anyway, and on a browser without it nothing happens at all. The shell's chrome is NAMED so it is not part of the fade: the top bar and the nav stay put, and only the content moves — which is what M8 promises (the swap zone fades, the context strip does not). */ @view-transition{navigation:auto} #topbar{view-transition-name:topbar} #nav{view-transition-name:nav} ::view-transition-old(root){animation:vt_out var(--t-move) var(--ease-still) both} ::view-transition-new(root){animation:vt_in var(--t-move) var(--ease-still) both} @keyframes vt_out{to{opacity:0}} @keyframes vt_in{from{opacity:0}} /* ---- the hand-off, once per sign-in (OWN, 2026-09-07) ---- The permanent lockup is manas PRODUCT / by devji. For one beat after sign-in the second line reads the module in full — PRODUCT INTELLIGENCE — then it FLIPS over to "by devji" and the short module word slides in beside the wordmark. Transform and opacity only, one rung of travel. It runs only when the sign-in route left the `dpip_rite` cookie (base.html), so a plain page load never flickers. Degrades to the end state. */ .lock .modline{position:relative;display:block;height:12px;perspective:120px} .lock .modline > span{position:absolute;left:0;top:0;white-space:nowrap; transform-origin:50% 50% -6px;backface-visibility:hidden} .lock .modulename{opacity:0;transform:rotateX(90deg)} /* the intro line, hidden */ .lock.intro .modulename{opacity:1;transform:none} .lock.intro .byline{opacity:0;transform:rotateX(-90deg)} .lock.intro .modword{opacity:0;transform:translateX(-6px)} .lock.intro.handoff .modulename{opacity:0;transform:rotateX(90deg); transition:transform var(--t-move) var(--ease-still),opacity var(--t-move) var(--ease-still)} .lock.intro.handoff .byline{opacity:1;transform:none; transition:transform var(--t-move) var(--ease-still),opacity var(--t-move) var(--ease-still)} .lock.intro.handoff .modword{opacity:1;transform:none; transition:transform var(--t-move) var(--ease-still) calc(var(--t-move) / 2), opacity var(--t-move) var(--ease-still) calc(var(--t-move) / 2)} /* Non-negotiable: every behaviour degrades to ITS OWN END STATE. The vigil stays amber, the thread lands, the toast simply appears. */ @media (prefers-reduced-motion:reduce){ svg.mk *{animation:none !important} .shudder{animation:none !important} .lock .modulename{display:none} .lock.intro .byline,.lock.intro .modword{opacity:1;transform:none} @view-transition{navigation:none} ::view-transition-old(root),::view-transition-new(root){animation:none} }